@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'EB Garamond', serif;
}
.h1-page-title {
  margin-bottom: 20px
}
.h2-highlighted-title {
  margin-bottom: 10px
}
  #textblockwrapper-cover h2 {background-color: #dbeafe;}
  #textblockwrapper-aboutme h2 {background-color: #f3e8ff;}
  #textblockwrapper-lists h2 {background-color: #fee2e2;}
  #textblockwrapper-bookshelf h2 {background-color: #fce7f3;}
  #textblockwrapper-journals h2 {background-color: #fef9c3;}
  #textblockwrapper-letters h2 {background-color: #ffedd5;}
  #textblockwrapper-snippets h2 {background-color: #dcfce7;}
  #textblockwrapper-junk h2 {background-color: #dbeafe;}
  
.hr-divider {
  border: none;
  height: 1px;
  background-color: white;
  margin: 8px 0;
  }
html, body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

header {
  flex-shrink: 0;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
}
  header a {
  text-decoration: none;
  color: inherit;
}

/* Main Container Layout */
main {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.div-text-row{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  text-align: left;
  background-color: transparent;
  height: auto;
  width: 100%
}
.div-textblockwrapper{
  display: flex;
  flex-direction: column;
  background-color: transparent;
  height: auto;
  width: 100%
}
.div-textblockwrapper a{
  text-decoration: none;
  color: black
}
.div-textblockwrapper a:hover{
  text-decoration: underline;
  color: black
}
  #textblockwrapper-cover{border: #dbeafe solid 1px;}
  #textblockwrapper-aboutme{border: #f3e8ff solid 1px;}
  #textblockwrapper-lists{border: #fee2e2 solid 1px;}
  #textblockwrapper-bookshelf{border: #fce7f3 solid 1px;}
  #textblockwrapper-journals{border: #fef9c3 solid 1px;}
  #textblockwrapper-letters{border: #ffedd5 solid 1px;}
  #textblockwrapper-snippets{border: #dcfce7 solid 1px;}
  #textblockwrapper-junk{border: #dbeafe solid 1px;}

/* Left Sidebar */
aside {
  width: 220px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: #f8fafc;
}
  aside a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  padding: 6px 0px;
}
  aside a:hover{
  font-weight: bold
}

/* Center Scrollable Area */
section {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
}

/* Right Nav */
nav {
  width: 220px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: #f8fafc;
}
  nav a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  padding: 0;
}
  #nav-aboutme a:hover{background-color: #f3e8ff}
  #nav-bookshelf a:hover{background-color: #fce7f3}
  #nav-lists a:hover{background-color: #fee2e2}
  #nav-journals a:hover{background-color: #fef9c3}
  #nav-letters a:hover{background-color: #ffedd5}
  #nav-snippets a:hover{background-color: #dcfce7}
  #nav-junk a:hover{background-color: #dbeafe}

/* Base Highlight Markers for Sidebar Links */
mark {
  padding: 3px 6px;
  border-radius: 4px;
}

aside a:nth-child(1) mark { background-color: #dbeafe; } /* blue */
aside a:nth-child(2) mark { background-color: #f3e8ff; } /* purple */
aside a:nth-child(3) mark { background-color: #fce7f3; } /* pink */
aside a:nth-child(4) mark { background-color: #fee2e2; } /* red */
aside a:nth-child(5) mark { background-color: #ffedd5; } /* orange */
aside a:nth-child(6) mark { background-color: #fef9c3; } /* yellow */
aside a:nth-child(7) mark { background-color: #dcfce7; } /* green */
aside a:nth-child(8) mark { background-color: #dbeafe; } /* blue */