:root {
  --logo-size: 2.5rem;
  --logo-tracking: -0.04em;
  --logo-color: currentColor;
  --base00: #f8f8f8;
  --base01: #e8e8e8;
  --base02: #d8d8d8;
  --base03: #b8b8b8;
  --base04: #585858;
  --base05: #383838;
  --base06: #282828;
  --base07: #181818;
  --base08: #ab4642;
  --base09: #dc9656;
  --base0A: #f7ca88;
  --base0B: #a1b56c;
  --base0C: #86c1b9;
  --base0D: #7cafc2;
  --base0E: #ba8baf;
  --base0F: #a16946;
}
@media (prefers-color-scheme: dark) {
  :root {
    --base00: #080808;
    --base01: #282828;
    --base02: #383838;
    --base03: #585858;
    --base04: #b8b8b8;
    --base05: #d8d8d8;
    --base06: #e8e8e8;
    --base07: #f8f8f8;
  }
}

.theme-dark {
  --base00: #080808;
  --base01: #282828;
  --base02: #383838;
  --base03: #585858;
  --base04: #b8b8b8;
  --base05: #d8d8d8;
  --base06: #e8e8e8;
  --base07: #f8f8f8;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    /* Had to disable in Codepen -- iframe false postive?
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: none !important;
    transition-duration: 1ms !important;
    transition-delay: 1ms !important;
    scroll-behavior: auto !important;
    */
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}
@media (max-width: 319.5px) {
  html,
  body {
    overflow-x: auto;
  }
}

html {
  height: 100%;
  font-size: 100%;
  font-optical-sizing: auto;
}

body {
  background: var(--base00);
  color: var(--base06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100dvh;
  font-family: "JetBrains Mono", monospace;
  padding: 4vw 0;
}

.container {
  margin: auto;
  width: 100%;
  padding: 0 10vw;
  display: flex;
  flex-direction: column;
}

main.container {
  padding: 2vw 10vw;
}

h1 {
  font-size: clamp(3.125rem, 3.464vw + 3rem, 10rem);
  line-height: 1.1;
  font-weight: normal;
  margin: 0 0 2vw;
  color: var(--base03);
  font-style: italic;
  transition: font-size 1000ms;
}
@media (max-width: 419.5px) {
  h1 {
    font-size: 36px;
  }
}
@media (min-width: 420px) and (max-width: 576px) {
  h1 {
    font-size: 48px;
  }
}
@media (max-width: 1023.5px) {
  h1 > br {
    display: none;
  }
}

.logo-neeksdotme {
  flex: none;
  color: var(--logo-color);
}
@media (max-width: 419.5px) {
  .logo-neeksdotme {
    --logo-size: 1.5rem;
  }
}
@media (min-width: 420px) and (max-width: 576px) {
  .logo-neeksdotme {
    --logo-size: 2rem;
  }
}
.logo-svg {
  transition: max-height 1000ms;
  max-height: var(--logo-size);
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto 0 0;
}
.logo-svg path {
  fill: currentColor;
}

footer {
  margin: auto 0 0;
}
footer .logo-svg {
  margin-bottom: 1.5rem;
}
footer ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
footer ul > li {
  margin-right: 1rem;
}
footer ul > li a {
  color: var(--base0E);
  font-weight: 600;
}
footer ul > li a:hover {
  text-decoration: line-through;
}