:root {
  --bg_h: #1d2021;
  --bg:   #282828;
  --bg_s: #32302f;
  --bg1:  #3c3836;
  --bg2:  #504945;
  --bg3:  #665c54;
  --bg4:  #7c6f64;

  --fg:  #fbf1c7;
  --fg1: #ebdbb2;
  --fg2: #d5c4a1;
  --fg3: #bdae93;
  --fg4: #a89984;

  --red:    #fb4934;
  --green:  #b8bb26;
  --yellow: #fabd2f;
  --blue:   #83a598;
  --purple: #d3869b;
  --aqua:   #8ec07c;
  --gray:   #928374;
  --orange: #fe8019;

  --red-dim:    #cc2412;
  --green-dim:  #98971a;
  --yellow-dim: #d79921;
  --blue-dim:   #458588;
  --purple-dim: #b16286;
  --aqua-dim:   #689d6a;
  --gray-dim:   #a89984;
  --orange-dim: #d65d0e;
}

/* Normal Colors */

.red {
  color: var(--red);
}

.green {
  color: var(--green);
}

.yellow {
  color: var(--yellow);
}

.blue {
  color: var(--blue);
}

.purple {
  color: var(--purple);
}

.aqua {
  color: var(--aqua);
}

.gray {
  color: var(--gray);
}

.orange {
  color: var(--orange);
}

/* Dim Colors */

.red-dim {
  color: var(--red-dim);
}

.green-dim {
  color: var(--green-dim);
}

.yellow-dim {
  color: var(--yellow-dim);
}

.blue-dim {
  color: var(--blue-dim);
}

.purple-dim {
  color: var(--purple-dim);
}

.aqua-dim {
  color: var(--aqua-dim);
}

.gray-dim {
  color: var(--gray-dim);
}

.orange-dim {
  color: var(--orange-dim);
}

/* Foreground Colors */

.fg {
  color: var(--fg);
}

.fg1 {
  color: var(--fg1);
}

.fg2 {
  color: var(--fg2);
}

.fg3 {
  color: var(--fg3);
}

.fg4 {
  color: var(--fg4);
}

/* Background Colors */

.bg-hard {
  color: var(--bg_h);
}

.bg {
  color: var(--bg);
}

.bg-soft {
  color: var(--bg_s);
}

.bg1 {
  color: var(--bg1);
}

.bg2 {
  color: var(--bg2);
}

.bg3 {
  color: var(--bg3);
}

.bg4 {
  color: var(--bg4);
}

html {
  scroll-padding-top: 2%;
  scroll-behavior: smooth;
}
header {
  padding-top: 8%;
}  
footer {
  padding: 1%;
  text-align: center;
  color: dimgray;
  font-size: smaller;
}

nav {
  position: sticky;
  top: 0;
  left: 0;
  background-color: var(--bg);
  text-align: center;
  padding: 1.5%;
  z-index: 1000;
}
.paragraph {
  text-align: justify; 
  line-height: 200%; 
  margin: 3%;
  font-family: 'Courier Prime', monospace;
}
h3 {
  margin: 1%
}
body {
 background-color: var(--bg);
 color: var(--fg);
 text-align: center;
 font-family: 'Courier Prime', monospace;
 overflow: auto;
}
section {
  margin: 0% 15%;
  min-height: 100%;
  max-width: 100%;
}
.center {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  position: relative;
  text-align: center;
  color: white;
}
.centered {
  position: absolute;
  font-weight: bolder;
  font-size: clamp(2rem, 10vw, 8rem);
  color: var(--fg);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
ul {
  list-style-type: none;
  margin: 0;
  background-color: var(--bg);
}
li {
  display: inline;
}
li a {
  display: inline-block;
  text-align: center;
  padding: 0% 2%;
  text-decoration: none;
}
a {
  color:var(--yellow)
}