:root {
  /* Layout Variables */
  --sticky-top: 7rem;
  --navbar-height: 0rem;
  --navbar-gap: 0.8rem;
  
  /* Color Palette */
  --peach: #fad1b0;
  --lime: limegreen;
  --bright-lime: lime;
  --cyan: aqua;
  --dark-gray: #000000;
  --shadow-black: #000000bb;
  --brown-dark: #49311d;
  --brown-medium: #624226;
  --brown-medium-light: #7a5230;
  --brown-light: #92623a;
  --brown-tan: #ab7343;
  --sandstone: #dc9456;
  --sand: #f4a460;
  --slate: darkslategray;
  --dark-purple: #181425;
  --medium-purple: #2b2e3f;
  --silver-light: #eceded;
  --silver: #c7c8c9;
  --silver-medium: #a1a3a5;
  --silver-dark: #8e9093;
  --charcoal: #090807;
  
  /* Semantic Color Assignments */
  --text-primary: var(--peach);
  --text-accent: var(--lime);
  --text-nav: var(--bright-lime);
  --text-nav2: var(--cyan);
  
  --bg-header: var(--dark-purple);
  --bg-body: var(--slate);
  --bg-box: var(--brown-medium-light);
  --bg-box-body: var(--brown-tan);
  --bg-nav: var(--silver-medium);
  --bg-nav-body: var(--dark-gray);
  
  --border-box-top: var(--brown-tan);
  --border-box-bottom: var(--brown-dark);
  --border-box-left: var(--brown-light);
  --border-box-right: var(--brown-medium);
  --border-box-body-top: var(--sand);
  --border-box-body-right: var(--brown-medium-light);
  --border-nav-bottom: var(--silver-dark);
  --border-nav-top: var(--silver-light);
  --border-nav-sides: var(--silver);
  --border-header: var(--medium-purple);
  
  --shadow: var(--shadow-black);
}

/* Base Elements */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-body);
  font-size: 1rem;
  font-family: Verdana, sans-serif;
}

/* Typography */
h1 {
  color: var(--text-primary);
  margin: 0rem 2rem -4.5rem 2rem;
  padding: 0rem;
}

h2 {
  color: var(--text-accent);
  font-size: 1.2rem;
  margin: 0.75rem 4rem -0.75rem 7rem;
  padding: 0rem 0rem 0.5rem 0rem;
}

h3 {
  scroll-margin-top: 12rem;
  display: inline;
  font-size: 1.15rem;
  margin: 0rem;
  padding: 0rem;
}

p, ul, ol {
  margin: 0rem;
  padding: 0rem;
}

a {
  color: var(--text-nav);
}

/* Layout Classes */
.grid {
  display: grid;
}

.flex {
  display: flex;
  flex-flow: column nowrap;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: var(--sticky-top);
}

/* Labeled Box Styles */
.labeled-box {
  text-align: left;
  margin: 0;
  padding: 0rem;
}

.labeled-box > div.label {
  color: var(--text-primary);
  background-color: var(--bg-box);
  border-top: 0.25rem solid var(--border-box-top);
  border-bottom: 0.25rem solid var(--border-box-bottom);
  border-left: 0.25rem solid var(--border-box-left);
  border-right: 0.25rem solid var(--border-box-right);
  padding: .25rem;
  box-shadow: 0.75rem 0.75rem 0.75rem var(--shadow);
}

.labeled-box > div.body {
  color: var(--charcoal);
  background-color: var(--bg-box-body);
  border-bottom: 0.25rem solid var(--border-box-right);
  border-top: 0.25rem solid var(--border-box-body-top);
  border-left: 0.25rem solid var(--sandstone);
  border-right: 0.25rem solid var(--border-box-body-right);
  padding: 0.5rem 2rem 2rem 2rem;
  box-shadow: 0.75rem 0.75rem 0.75rem var(--shadow);
}

/* Navigation Styles */
#right-navbars {
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--navbar-gap);
}

#group-navbar > div.labeled-box > div.label,
#entry-navbar > div.labeled-box > div.label,
#other-navbar > div.labeled-box > div.label {
  color: var(--dark-gray);
  background-color: var(--bg-nav);
  border-bottom: 0.25rem solid var(--border-nav-bottom);
  border-top: 0.25rem solid var(--border-nav-top);
  border-left: 0.25rem solid var(--border-nav-sides);
  border-right: 0.25rem solid var(--border-nav-sides);
  box-shadow: 0.75rem 0.75rem 0.75rem var(--shadow);
}

#group-navbar > div.labeled-box > div.body {
  color: var(--text-nav);
  background-color: var(--bg-nav-body);
  border-bottom: 0.25rem solid var(--border-nav-bottom);
  border-top: 0.25rem solid var(--border-nav-top);
  border-left: 0.25rem solid var(--border-nav-sides);
  border-right: 0.25rem solid var(--border-nav-sides);
  box-shadow: 0.75rem 0.75rem 0.75rem var(--shadow);
  font-family: 'Courier New', monospace;
  max-height: 15vh;
  overflow-y: auto;
}

#entry-navbar > div.labeled-box > div.body {
  color: var(--text-nav);
  background-color: var(--bg-nav-body);
  border-bottom: 0.25rem solid var(--border-nav-bottom);
  border-top: 0.25rem solid var(--border-nav-top);
  border-left: 0.25rem solid var(--border-nav-sides);
  border-right: 0.25rem solid var(--border-nav-sides);
  box-shadow: 0.75rem 0.75rem 0.75rem var(--shadow);
  font-family: 'Courier New', monospace;
  max-height: 50.571vh;
  overflow-y: auto;
}

#other-navbar > div.labeled-box > div.body {
  color: var(--text-nav);
  background-color: var(--bg-nav-body);
  border-bottom: 0.25rem solid var(--border-nav-bottom);
  border-top: 0.25rem solid var(--border-nav-top);
  border-left: 0.25rem solid var(--border-nav-sides);
  border-right: 0.25rem solid var(--border-nav-sides);
  box-shadow: 0.75rem 0.75rem 0.75rem var(--shadow);
  font-family: 'Courier New', monospace;
  max-height: 74vh;
  overflow-y: auto;
}
/* Layout Specifics */
header.sticky {
  top: 0rem;
}

header {
  width: 100vw;
  margin: 0rem;
  padding: 0rem;
  border-bottom: 0.25rem solid var(--border-header);
  background-color: var(--bg-header);
  box-shadow: 0rem 1rem 0.75rem var(--shadow);
  text-align: center;
  z-index: 999;
  font-family: "Garamond", serif;
}


footer {
  width: 100vw;
  height: 2rem;
  color: var(--text-accent);
  background-color: var(--bg-header);
  border-top: 0.25rem solid var(--border-header);
  box-shadow: 0rem 1rem 0.75rem var(--shadow);
  padding: 0.5rem 0rem 0rem 0rem;
  text-align: center;
  margin-top: auto;
}

/* Container Styles */
#center-container {
  min-height: 82.5vh;
}

#center-container.grid {
  flex:grow;
  grid-auto-rows: auto;
  justify-content: center;
  margin: 2rem 0rem;
  gap: 2rem;
}

#text-column.flex {
  gap: 3rem;
}

#group-navbar.flex > div,
#entry-navbar.flex > div,
#other-navbar.flex > div {
  padding: 0rem 1.5rem;
  margin: 0rem;
}

/* Form Elements */
input {
  background-color: var(--bg-header);
  color: var(--text-accent);
}