*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:focus {
  outline: none;
}

a {
  color: inherit;
  text-decoration: none;
}

html, body {
  height: 100%;
}

:root {
  --accent: #3B5998;
  --highlight: #FFF500;
  --highlight-dim: #fffa5d;
}

.font-montserrat {
  font-family: "Montserrat", sans-serif;
}
.font-aldrich {
  font-family: "Aldrich", sans-serif;
}

.container {
  margin: auto;
  height: 100%;
  width: 100%;
  padding: 2em;
}

.flex, .header-container, .header-action, .header, .navbar-container, .navbar-right, .navbar-menu a, .navbar-menu_divide, .navbar-left, .navbar, .body {
  display: flex;
}

.temp {
  outline: 2px solid red;
}

.accent-background {
  background-color: var(--accent);
}

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

.skipto {
  position: fixed;
  left: 0;
  top: 0;
  padding: 0.5em;
  transform: translateY(-120%);
  transition: transform 200ms ease;
  z-index: 10;
}
.skipto:focus {
  transform: translateY(0);
}

.highlight:hover::before, .navbar-menu a:hover::before, .skipto:hover::before, .highlight:focus::before, .navbar-menu a:focus::before, .skipto:focus::before {
  transform: scaleX(1);
}
.highlight-color {
  color: var(--highlight);
}
.highlight-color_dim {
  color: var(--highlight-dim);
}
.highlight-background {
  background-color: var(--highlight);
}
::-moz-selection {
  background-color: var(--highlight-dim);
}
.highlight-background_dim, .highlight::before, .navbar-menu a::before, .skipto::before, ::selection {
  background-color: var(--highlight-dim);
}
.highlight-href::-moz-selection {
  position: relative;
}
.highlight-background.highlight-href, .highlight-background_dim.highlight-href, .highlight-href.highlight::before, .navbar-menu a.highlight-href::before, .highlight-href.skipto::before, .highlight-href::selection {
  position: relative;
}
.highlight-background.highlight-href:is(:hover, :focus)::before, .highlight-background_dim.highlight-href:is(:hover, :focus)::before, .highlight-href.highlight:is(:hover, :focus)::before, .navbar-menu a.highlight-href:is(:hover, :focus)::before, .highlight-href.skipto:is(:hover, :focus)::before {
  width: 100%;
}
.highlight-background.highlight-href::before, .highlight-background_dim.highlight-href::before, .highlight-href.highlight::before, .navbar-menu a.highlight-href::before, .highlight-href.skipto::before {
  content: "";
  bottom: -0.4em;
  left: -0.4em;
  position: absolute;
  width: 0%;
  background-color: #000;
  height: 0.3em;
  transition: width 200ms ease-in;
}
.highlight::before, .navbar-menu a::before, .skipto::before {
  content: "";
  position: absolute;
  left: -10%;
  right: 0;
  top: 0;
  bottom: 0;
  width: 120%;
  height: 100%;
  z-index: -1;
  transform: scaleX(0);
  transition: transform 200ms ease;
}

.body {
  flex-direction: column;
  font-size: clamp(1rem, 1vw, 5rem);
  line-height: 1.6;
}

.sr-popup {
  visibility: hidden;
  transform: scale(0);
  left: 0;
  bottom: 0;
  pointer-events: none;
  position: absolute;
}
.sr-only {
  position: absolute;
}

#canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.navbar {
  flex: 0 0 auto;
  position: -webkit-sticky;
  position: sticky;
  align-items: center;
  justify-content: center;
  top: 0;
  min-height: 2em;
  width: 100%;
}
.navbar-brand {
  height: 2em;
}
.navbar-brand_text {
  font-weight: 700;
}
.navbar-left {
  align-items: center;
  position: relative;
  padding: 0.5rem 0;
  font-size: clamp(1em, 2.1vw, 1.2em);
  transition: color 200ms ease-out;
}
.navbar-left:is(:hover, :focus)::before {
  transform: scaleX(1) translateY(-50%);
}
.navbar-left::before {
  content: "";
  top: 50%;
  left: -0.45em;
  position: absolute;
  width: 0.3em;
  background-color: #000;
  height: 50%;
  transform: scaleX(0) translateY(-50%);
  transform-origin: left;
  transition: transform 200ms ease-in;
}
.navbar-menu {
  letter-spacing: 0.1em;
  position: relative;
}
.navbar-menu_divide {
  padding-bottom: 0.4em;
  margin-bottom: -0.4em;
}
.navbar-menu_divide:focus .navbar-menu-github_repo, .navbar-menu_divide a:focus ~ .navbar-menu-github_repo, .navbar-menu_divide a:hover ~ .navbar-menu-github_repo, .navbar-menu_divide:hover .navbar-menu-github_repo {
  transform: translateX(0%);
  visibility: visible;
  opacity: 1;
  pointer-events: unset;
}
.navbar-menu_divide .navbar-menu-github_repo {
  transform: translateX(-100%);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 1.9em;
  right: 0;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  transition: transform 200ms ease-in;
}
.navbar-menu_divide .navbar-menu-github_repo a {
  position: relative;
}
.navbar-menu a {
  align-items: center;
  z-index: 1;
}
.navbar-menu_icon {
  width: 1em;
}
.navbar-right {
  text-transform: uppercase;
  gap: 1em;
}
.navbar-container {
  justify-content: space-between;
  align-items: center;
  padding: 0 1.5em;
  font-weight: 600;
}
.navbar li {
  list-style: none;
}

.header {
  align-items: center;
  justify-content: center;
  flex: 1 0 auto;
}
.header-action {
  gap: 1em;
  flex-direction: column;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  width: 100%;
}
.header-action-button {
  margin-top: 1em;
  position: relative;
  padding-right: 1.2em;
  margin-left: -0.8em;
  padding-left: 0.8em;
}
.header-action-button:hover .arrow, .header-action-button:focus .arrow {
  -webkit-animation: arrow 600ms infinite ease;
          animation: arrow 600ms infinite ease;
}
.header-action-button .arrow {
  top: 40%;
  transform: translate(0%, -50%);
  font-size: 2em;
  position: absolute;
  margin-left: 0.5em;
}
@-webkit-keyframes arrow {
  50% {
    margin-left: 0;
  }
  to {
    margin-left: 0.5em;
  }
}
@keyframes arrow {
  50% {
    margin-left: 0;
  }
  to {
    margin-left: 0.5em;
  }
}
.header-container {
  align-items: center;
  justify-content: center;
}
.header .text {
  font-size: clamp(1em, 2.1vw, 1.2em);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 40ch;
  text-transform: uppercase;
  letter-spacing: 0.3em;
}
.header .text_big {
  max-width: 22ch;
  font-size: clamp(1.5em, 3vw, 1.8em);
}