@font-face {
  font-family: 'GeistPixel';
  src: url('../fonts/GeistPixel-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --main-white: #FFF;
  --letter-stage-one: #D8D8DC;
  --letter-stage-two: #B0B0B4;
  --letter-stage-three: #89898E;
  --letter-stage-four: #616167;
  --letter-stage-five: #3E3E45;
  --main-red: #d87b6b;
  --main-yellow: #ecc239;
  --main-black: #1c1c25;
  --sun-red: #e30c3d;
  --main-padding: 2rem;
  --main-blue: rgb(128, 176, 222);
}

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

html, body {
  overflow: hidden;
  scrollbar-width: none;
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none;
}

html {
  position: relative;
  font-size: 62.5%;
}

body {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background:var(--main-black);
  background-image: url(/imgs/pixelspixel.png);
  background-repeat: repeat;
  background-position: center;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  padding: 2rem;
  transition-property: opacity, background-color;
  transition-duration: 888ms;
  transition-timing-function: ease-out;
}

body::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50% 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.1), rgba(0, 255, 0, 0.06), rgba(0, 0, 255, 0.1));
    z-index: 10;
    background-size: 1px 2px, 3px 1px;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

main {
  grid-row: 1/9;
  grid-column: 1/9;
  align-self: center;
  justify-self: center;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}


.oz {
  z-index: 2;
  perspective: 1500px;
  grid-row: 1/9;
  grid-column: 1/9;
  align-self: center;
  justify-self: center;
  transition: ease-in transform 2222ms;
  transform: translateX(0vh) translateY(0vh);
}

#oz-center-target {
  grid-row: 1/9;
  grid-column: 1/9;
  align-self: center;
  justify-self: center;
  opacity: none;
  height: 4.9px;
  width: 4.9px;
  transform: translateY(-30vh);
}

.oz div {
  transform-style: preserve-3d;
}

.image-container {
  position: relative;
  width: clamp(16rem, 20vw, 49rem);
  height: clamp(16rem, 20vw, 49rem);
  transform: rotateX(0deg) rotateY(0deg);
  --layers-count: 20;
  --layer-offset: 0.245vw;
  display: grid;
  align-items: center;
  justify-items: center;
}

@media only screen and (min-width: 1000px ) {
  .image-container {
    width: clamp(20rem, 16vw, 49rem);
    height: clamp(20rem, 16vw, 49rem);
  }
}



.oz.oz--fight {
  transform: translateY(-30vh);
}


.original {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  justify-items: center;
}

.original img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  max-width: 490px;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.layers, .layer {
  position: absolute;
  inset: 0;
}

.layer {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  transform: translateZ(calc(var(--i) * var(--layer-offset)));
}

.layer img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background-color: transparent;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  max-width: 490px;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}


.main-content--section {
  grid-row: 1/9;
  grid-column: 1/9;
  align-self: center;
  justify-self: center;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

.main-content--section button {
  font-family: "GeistPixel", sans-serif;
  color: var(--main-white);
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 1rem 2rem;
}

.intro--container {
    -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  grid-row: 1/9;
  grid-column: 1/9;
  align-self: start;
  justify-self: center;
  display: grid;
  grid-template-rows: 2fr;
  grid-template-columns: 1fr;
}


h1.name-intro {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  grid-row: 1/2;
  grid-column: 1/2;
  align-self: center;
  justify-self: center;
  text-align: center;
  font-family: "GeistPixel", sans-serif;
  color: var(--main-white);
  font-size: clamp(2rem, 10vw, 12rem);
  white-space: nowrap;
  letter-spacing: 0.05em;
  transition: ease-in-out transform 2222ms;
  transform: translateY(0vh);
  text-shadow: -0.0125em 0.0125em 0em var(--letter-stage-one), -0.025em 0.025em 0em var(--letter-stage-two), -0.04em 0.04em 0em var(--letter-stage-three), -0.055em 0.055em 0em var(--letter-stage-four), -0.07em 0.07em 0em var(--letter-stage-five);
}

.contact--header, .portfolio--header {
  grid-row: 1/2;
  grid-column: 1/2;
  align-self: center;
  justify-self: center;
  text-align: center;
  font-family: "GeistPixel", sans-serif;
  color: var(--main-white);
  font-size: clamp(2rem, 10vw, 12rem);
  white-space: nowrap;
  letter-spacing: 0.05em;
  transition: ease-in-out transform 2222ms;
  transform: translateY(-100vh);
}

.portfolio--header {
  text-shadow: -0.015em 0.02782em 0em var(--letter-stage-one), -0.03em 0.05564em 0em var(--letter-stage-two), -0.045em 0.08346em 0em var(--letter-stage-three), -0.06em 0.11128em 0em var(--letter-stage-four), -0.075em 0.1391em 0em var(--letter-stage-five);
}

.contact--header {
  text-shadow: 0.015em 0.02715em 0em var(--letter-stage-one), 0.03em 0.0543em 0em var(--letter-stage-two), 0.045em 0.08145em 0em var(--letter-stage-three), 0.06em 0.1086em 0em var(--letter-stage-four), 0.075em 0.13575em 0em var(--letter-stage-five);
}

p.name-tag {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  grid-row: 2/3;
  grid-column: 1/2;
  align-self: center;
  justify-self: center;
  font-family: "GeistPixel", sans-serif;
  color: var(--main-white);
  text-shadow: -0.02em 0.02em 0em var(--letter-stage-one), -0.04em 0.04em 0em var(--letter-stage-two), -0.06em 0.06em 0em var(--letter-stage-three), -0.08em 0.08em 0em var(--letter-stage-four), -0.1em 0.1em 0em var(--letter-stage-five);
  font-size: clamp(2.4rem, 5vw, 4.9rem);
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-align: center;
  transition: ease-in-out transform 2222ms;
}

p.name-tag > span.spring-on, .section-button-text-left-down span.spring-on  {
  animation-name: text-springing-left-down;
  animation-duration: 222ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

p.name-tag span.spring-off, .section-button-text-left-down span.spring-off {
  animation-name: text-sprung-left-down;
  animation-duration: 120ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

@keyframes text-springing-left-down {
  0% {
    color: var(--main-white);
    text-shadow: -0.02em 0.02em 0em var(--letter-stage-one), -0.04em 0.04em 0em var(--letter-stage-two), -0.06em 0.06em 0em var(--letter-stage-three), -0.08em 0.08em 0em var(--letter-stage-four), -0.1em 0.1em 0em var(--letter-stage-five);
  }
  19% {
    color: var(--main-white);
    text-shadow: -0.02em 0.02em 0em var(--letter-stage-one), -0.04em 0.04em 0em var(--letter-stage-two), -0.06em 0.06em 0em var(--letter-stage-three), -0.08em 0.08em 0em var(--letter-stage-four), -0.1em 0.1em 0em var(--letter-stage-five);
  }
  20% {
    color: transparent;
    text-shadow: -0.02em 0.02em 0em var(--main-white), -0.04em 0.04em 0em var(--letter-stage-two), -0.06em 0.06em 0em var(--letter-stage-three), -0.08em 0.08em 0em var(--letter-stage-four), -0.1em 0.1em 0em var(--letter-stage-five);
  }
 39% {
    color: transparent;
    text-shadow: -0.02em 0.02em 0em var(--main-white), -0.04em 0.04em 0em var(--letter-stage-two), -0.06em 0.06em 0em var(--letter-stage-three), -0.08em 0.08em 0em var(--letter-stage-four), -0.1em 0.1em 0em var(--letter-stage-five);

  }
  40% {
    color: transparent;
    text-shadow: -0.02em 0.02em 0em transparent, -0.04em 0.04em 0em var(--main-white), -0.06em 0.06em 0em var(--letter-stage-three), -0.08em 0.08em 0em var(--letter-stage-four), -0.1em 0.1em 0em var(--letter-stage-five);
  }

  59% {
    color: transparent;
    text-shadow: -0.02em 0.02em 0em transparent, -0.04em 0.04em 0em var(--main-white), -0.06em 0.06em 0em var(--letter-stage-three), -0.08em 0.08em 0em var(--letter-stage-four), -0.1em 0.1em 0em var(--letter-stage-five);
  }
  60% {
    color: transparent;
    text-shadow: -0.02em 0.02em 0em transparent, -0.04em 0.04em 0em transparent, -0.04em 0.04em 0em var(--main-white), -0.08em 0.08em 0em var(--letter-stage-four), -0.1em 0.1em 0em var(--letter-stage-five);
  }

  79% {
    color: transparent;
    text-shadow: -0.02em 0.02em 0em transparent, -0.04em 0.04em 0em transparent, -0.04em 0.04em 0em var(--main-white), -0.08em 0.08em 0em var(--letter-stage-four), -0.1em 0.1em 0em var(--letter-stage-five);
  }
  80% {
    color: transparent;
    text-shadow: -0.02em 0.02em 0em transparent, -0.04em 0.04em 0em transparent, -0.04em 0.04em 0em transparent, -0.08em 0.08em 0em var(--main-white), -0.1em 0.1em 0em var(--letter-stage-five);
  }

  99% {
    color: transparent;
    text-shadow: -0.02em 0.02em 0em transparent, -0.04em 0.04em 0em transparent, -0.04em 0.04em 0em transparent, -0.08em 0.08em 0em var(--main-white), -0.1em 0.1em 0em var(--letter-stage-five);
  }
  100% {
    color: transparent;
    text-shadow: -0.02em 0.02em 0em transparent, -0.04em 0.04em 0em transparent, -0.04em 0.04em 0em transparent, -0.08em 0.08em 0em transparent, -0.1em 0.1em 0em var(--main-white);
  }
}

@keyframes text-sprung-left-down {
  0% {
    color: transparent;
    text-shadow: -0.02em 0.02em 0em transparent, -0.04em 0.04em 0em transparent, -0.04em 0.04em 0em transparent, -0.08em 0.08em 0em transparent, -0.1em 0.1em 0em var(--main-white);
  }

  20% {
    color: transparent;
    text-shadow: -0.02em 0.02em 0em transparent, -0.04em 0.04em 0em transparent, -0.04em 0.04em 0em transparent, -0.08em 0.08em 0em var(--main-white), -0.1em 0.1em 0em var(--letter-stage-five);
  }

  40% {
    color: transparent;
    text-shadow: -0.02em 0.02em 0em transparent, -0.04em 0.04em 0em transparent, -0.04em 0.04em 0em var(--main-white), -0.08em 0.08em 0em var(--letter-stage-four), -0.1em 0.1em 0em var(--letter-stage-five);
  }

  60% {
    color: transparent;
    text-shadow: -0.02em 0.02em 0em transparent, -0.04em 0.04em 0em var(--main-white), -0.06em 0.06em 0em var(--letter-stage-three), -0.08em 0.08em 0em var(--letter-stage-four), -0.1em 0.1em 0em var(--letter-stage-five);
  }

  80% {
    color: transparent;
    text-shadow: -0.02em 0.02em 0em var(--main-white), -0.04em 0.04em 0em var(--letter-stage-two), -0.06em 0.06em 0em var(--letter-stage-three), -0.08em 0.08em 0em var(--letter-stage-four), -0.1em 0.1em 0em var(--letter-stage-five);
  }

  100% {
    color: var(--main-white);
    text-shadow: -0.02em 0.02em 0em var(--letter-stage-one), -0.04em 0.04em 0em var(--letter-stage-two), -0.06em 0.06em 0em var(--letter-stage-three), -0.08em 0.08em 0em var(--letter-stage-four), -0.1em 0.1em 0em var(--letter-stage-five);
  }
}

.section-button-text-right-down span.spring-on  {
  animation-name: text-springing-right-down;
  animation-duration: 222ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.section-button-text-right-down span.spring-off {
  animation-name: text-sprung-right-down;
  animation-duration: 120ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

@keyframes text-springing-right-down {
  0% {
    color: var(--main-white);
    text-shadow: 0.02em 0.02em 0em var(--letter-stage-one), 0.04em 0.04em 0em var(--letter-stage-two), 0.06em 0.06em 0em var(--letter-stage-three), 0.08em 0.08em 0em var(--letter-stage-four), 0.1em 0.1em 0em var(--letter-stage-five);
  }
  19% {
    color: var(--main-white);
    text-shadow: 0.02em 0.02em 0em var(--letter-stage-one), 0.04em 0.04em 0em var(--letter-stage-two), 0.06em 0.06em 0em var(--letter-stage-three), 0.08em 0.08em 0em var(--letter-stage-four), 0.1em 0.1em 0em var(--letter-stage-five);
  }
  20% {
    color: transparent;
    text-shadow: 0.02em 0.02em 0em var(--main-white), 0.04em 0.04em 0em var(--letter-stage-two), 0.06em 0.06em 0em var(--letter-stage-three), 0.08em 0.08em 0em var(--letter-stage-four), 0.1em 0.1em 0em var(--letter-stage-five);
  }
 39% {
    color: transparent;
    text-shadow: 0.02em 0.02em 0em var(--main-white), 0.04em 0.04em 0em var(--letter-stage-two), 0.06em 0.06em 0em var(--letter-stage-three), 0.08em 0.08em 0em var(--letter-stage-four), 0.1em 0.1em 0em var(--letter-stage-five);

  }
  40% {
    color: transparent;
    text-shadow: 0.02em 0.02em 0em transparent, 0.04em 0.04em 0em var(--main-white), 0.06em 0.06em 0em var(--letter-stage-three), 0.08em 0.08em 0em var(--letter-stage-four), 0.1em 0.1em 0em var(--letter-stage-five);
  }

  59% {
    color: transparent;
    text-shadow: 0.02em 0.02em 0em transparent, 0.04em 0.04em 0em var(--main-white), 0.06em 0.06em 0em var(--letter-stage-three), 0.08em 0.08em 0em var(--letter-stage-four), 0.1em 0.1em 0em var(--letter-stage-five);
  }
  60% {
    color: transparent;
    text-shadow: 0.02em 0.02em 0em transparent, 0.04em 0.04em 0em transparent, 0.04em 0.04em 0em var(--main-white), 0.08em 0.08em 0em var(--letter-stage-four), 0.1em 0.1em 0em var(--letter-stage-five);
  }

  79% {
    color: transparent;
    text-shadow: 0.02em 0.02em 0em transparent, 0.04em 0.04em 0em transparent, 0.04em 0.04em 0em var(--main-white), 0.08em 0.08em 0em var(--letter-stage-four), 0.1em 0.1em 0em var(--letter-stage-five);
  }
  80% {
    color: transparent;
    text-shadow: 0.02em 0.02em 0em transparent, 0.04em 0.04em 0em transparent, 0.04em 0.04em 0em transparent, 0.08em 0.08em 0em var(--main-white), 0.1em 0.1em 0em var(--letter-stage-five);
  }

  99% {
    color: transparent;
    text-shadow: 0.02em 0.02em 0em transparent, 0.04em 0.04em 0em transparent, 0.04em 0.04em 0em transparent, 0.08em 0.08em 0em var(--main-white), 0.1em 0.1em 0em var(--letter-stage-five);
  }
  100% {
    color: transparent;
    text-shadow: 0.02em 0.02em 0em transparent, 0.04em 0.04em 0em transparent, 0.04em 0.04em 0em transparent, 0.08em 0.08em 0em transparent, 0.1em 0.1em 0em var(--main-white);
  }
}

@keyframes text-sprung-right-down {
  0% {
    color: transparent;
    text-shadow: 0.02em 0.02em 0em transparent, 0.04em 0.04em 0em transparent, 0.04em 0.04em 0em transparent, 0.08em 0.08em 0em transparent, 0.1em 0.1em 0em var(--main-white);
  }

  20% {
    color: transparent;
    text-shadow: 0.02em 0.02em 0em transparent, 0.04em 0.04em 0em transparent, 0.04em 0.04em 0em transparent, 0.08em 0.08em 0em var(--main-white), 0.1em 0.1em 0em var(--letter-stage-five);
  }

  40% {
    color: transparent;
    text-shadow: 0.02em 0.02em 0em transparent, 0.04em 0.04em 0em transparent, 0.04em 0.04em 0em var(--main-white), 0.08em 0.08em 0em var(--letter-stage-four), 0.1em 0.1em 0em var(--letter-stage-five);
  }

  60% {
    color: transparent;
    text-shadow: 0.02em 0.02em 0em transparent, 0.04em 0.04em 0em var(--main-white), 0.06em 0.06em 0em var(--letter-stage-three), 0.08em 0.08em 0em var(--letter-stage-four), 0.1em 0.1em 0em var(--letter-stage-five);
  }

  80% {
    color: transparent;
    text-shadow: 0.02em 0.02em 0em var(--main-white), 0.04em 0.04em 0em var(--letter-stage-two), 0.06em 0.06em 0em var(--letter-stage-three), 0.08em 0.08em 0em var(--letter-stage-four), 0.1em 0.1em 0em var(--letter-stage-five);
  }

  100% {
    color: var(--main-white);
    text-shadow: 0.02em 0.02em 0em var(--letter-stage-one), 0.04em 0.04em 0em var(--letter-stage-two), 0.06em 0.06em 0em var(--letter-stage-three), 0.08em 0.08em 0em var(--letter-stage-four), 0.1em 0.1em 0em var(--letter-stage-five);
  }
}

.section-button-text-right-up span.spring-on  {
  animation-name: text-springing-right-up;
  animation-duration: 222ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.section-button-text-right-up span.spring-off {
  animation-name: text-sprung-right-up;
  animation-duration: 120ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

@keyframes text-springing-right-up {
  0% {
    color: var(--main-white);
    text-shadow: 0.02em -0.02em 0em var(--letter-stage-one), 0.04em -0.04em 0em var(--letter-stage-two), 0.06em -0.06em 0em var(--letter-stage-three), 0.08em -0.08em 0em var(--letter-stage-four), 0.1em -0.1em 0em var(--letter-stage-five);
  }
  19% {
    color: var(--main-white);
    text-shadow: 0.02em -0.02em 0em var(--letter-stage-one), 0.04em -0.04em 0em var(--letter-stage-two), 0.06em -0.06em 0em var(--letter-stage-three), 0.08em -0.08em 0em var(--letter-stage-four), 0.1em -0.1em 0em var(--letter-stage-five);
  }
  20% {
    color: transparent;
    text-shadow: 0.02em -0.02em 0em var(--main-white), 0.04em -0.04em 0em var(--letter-stage-two), 0.06em -0.06em 0em var(--letter-stage-three), 0.08em -0.08em 0em var(--letter-stage-four), 0.1em -0.1em 0em var(--letter-stage-five);
  }
 39% {
    color: transparent;
    text-shadow: 0.02em -0.02em 0em var(--main-white), 0.04em -0.04em 0em var(--letter-stage-two), 0.06em -0.06em 0em var(--letter-stage-three), 0.08em -0.08em 0em var(--letter-stage-four), 0.1em -0.1em 0em var(--letter-stage-five);

  }
  40% {
    color: transparent;
    text-shadow: 0.02em -0.02em 0em transparent, 0.04em -0.04em 0em var(--main-white), 0.06em -0.06em 0em var(--letter-stage-three), 0.08em -0.08em 0em var(--letter-stage-four), 0.1em -0.1em 0em var(--letter-stage-five);
  }

  59% {
    color: transparent;
    text-shadow: 0.02em -0.02em 0em transparent, 0.04em -0.04em 0em var(--main-white), 0.06em -0.06em 0em var(--letter-stage-three), 0.08em -0.08em 0em var(--letter-stage-four), 0.1em -0.1em 0em var(--letter-stage-five);
  }
  60% {
    color: transparent;
    text-shadow: 0.02em -0.02em 0em transparent, 0.04em -0.04em 0em transparent, 0.04em -0.04em 0em var(--main-white), 0.08em -0.08em 0em var(--letter-stage-four), 0.1em -0.1em 0em var(--letter-stage-five);
  }

  79% {
    color: transparent;
    text-shadow: 0.02em -0.02em 0em transparent, 0.04em -0.04em 0em transparent, 0.04em -0.04em 0em var(--main-white), 0.08em -0.08em 0em var(--letter-stage-four), 0.1em -0.1em 0em var(--letter-stage-five);
  }
  80% {
    color: transparent;
    text-shadow: 0.02em -0.02em 0em transparent, 0.04em -0.04em 0em transparent, 0.04em -0.04em 0em transparent, 0.08em -0.08em 0em var(--main-white), 0.1em -0.1em 0em var(--letter-stage-five);
  }

  99% {
    color: transparent;
    text-shadow: 0.02em -0.02em 0em transparent, 0.04em -0.04em 0em transparent, 0.04em -0.04em 0em transparent, 0.08em -0.08em 0em var(--main-white), 0.1em -0.1em 0em var(--letter-stage-five);
  }
  100% {
    color: transparent;
    text-shadow: 0.02em -0.02em 0em transparent, 0.04em -0.04em 0em transparent, 0.04em -0.04em 0em transparent, 0.08em -0.08em 0em transparent, 0.1em -0.1em 0em var(--main-white);
  }
}

@keyframes text-sprung-right-up {
  0% {
    color: transparent;
    text-shadow: 0.02em -0.02em 0em transparent, 0.04em -0.04em 0em transparent, 0.04em -0.06em 0em transparent, 0.08em -0.08em 0em transparent, 0.1em -0.1em 0em var(--main-white);
  }

  20% {
    color: transparent;
    text-shadow: 0.02em -0.02em 0em transparent, 0.04em -0.04em 0em transparent, 0.04em -0.06em 0em transparent, 0.08em -0.08em 0em var(--main-white), 0.1em -0.1em 0em var(--letter-stage-five);
  }

  40% {
    color: transparent;
    text-shadow: 0.02em -0.02em 0em transparent, 0.04em -0.04em 0em transparent, 0.04em -0.06em 0em var(--main-white), 0.08em -0.08em 0em var(--letter-stage-four), 0.1em -0.1em 0em var(--letter-stage-five);
  }

  60% {
    color: transparent;
    text-shadow: 0.02em -0.02em 0em transparent, 0.04em -0.04em 0em var(--main-white), 0.06em -0.06em 0em var(--letter-stage-three), 0.08em -0.08em 0em var(--letter-stage-four), 0.1em -0.1em 0em var(--letter-stage-five);
  }

  80% {
    color: transparent;
    text-shadow: 0.02em -0.02em 0em var(--main-white), 0.04em -0.04em 0em var(--letter-stage-two), 0.06em -0.06em 0em var(--letter-stage-three), 0.08em -0.08em 0em var(--letter-stage-four), 0.1em -0.1em 0em var(--letter-stage-five);
  }

  100% {
    color: var(--main-white);
    text-shadow: 0.02em -0.02em 0em var(--letter-stage-one), 0.04em -0.04em 0em var(--letter-stage-two), 0.06em -0.06em 0em var(--letter-stage-three), 0.08em -0.08em 0em var(--letter-stage-four), 0.1em -0.1em 0em var(--letter-stage-five);
  }
}

.section-button-text-left-up span.spring-on  {
  animation-name: text-springing-left-up;
  animation-duration: 222ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.section-button-text-left-up span.spring-off {
  animation-name: text-sprung-left-up;
  animation-duration: 120ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

@keyframes text-springing-left-up {
  0% {
    color: var(--main-white);
    text-shadow: -0.02em -0.02em 0em var(--letter-stage-one), -0.04em -0.04em 0em var(--letter-stage-two), -0.06em -0.06em 0em var(--letter-stage-three), -0.08em -0.08em 0em var(--letter-stage-four), -0.1em -0.1em 0em var(--letter-stage-five);
  }
  19% {
    color: var(--main-white);
    text-shadow: -0.02em -0.02em 0em var(--letter-stage-one), -0.04em -0.04em 0em var(--letter-stage-two), -0.06em -0.06em 0em var(--letter-stage-three), -0.08em -0.08em 0em var(--letter-stage-four), -0.1em -0.1em 0em var(--letter-stage-five);
  }
  20% {
    color: transparent;
    text-shadow: -0.02em -0.02em 0em var(--main-white), -0.04em -0.04em 0em var(--letter-stage-two), -0.06em -0.06em 0em var(--letter-stage-three), -0.08em -0.08em 0em var(--letter-stage-four), -0.1em -0.1em 0em var(--letter-stage-five);
  }
 39% {
    color: transparent;
    text-shadow: -0.02em -0.02em 0em var(--main-white), -0.04em -0.04em 0em var(--letter-stage-two), -0.06em -0.06em 0em var(--letter-stage-three), -0.08em -0.08em 0em var(--letter-stage-four), -0.1em -0.1em 0em var(--letter-stage-five);

  }
  40% {
    color: transparent;
    text-shadow: -0.02em -0.02em 0em transparent, -0.04em -0.04em 0em var(--main-white), -0.06em -0.06em 0em var(--letter-stage-three), -0.08em -0.08em 0em var(--letter-stage-four), -0.1em -0.1em 0em var(--letter-stage-five);
  }

  59% {
    color: transparent;
    text-shadow: -0.02em -0.02em 0em transparent, -0.04em -0.04em 0em var(--main-white), -0.06em -0.06em 0em var(--letter-stage-three), -0.08em -0.08em 0em var(--letter-stage-four), -0.1em -0.1em 0em var(--letter-stage-five);
  }
  60% {
    color: transparent;
    text-shadow: -0.02em -0.02em 0em transparent, -0.04em -0.04em 0em transparent, -0.04em -0.04em 0em var(--main-white), -0.08em -0.08em 0em var(--letter-stage-four), -0.1em -0.1em 0em var(--letter-stage-five);
  }

  79% {
    color: transparent;
    text-shadow: -0.02em -0.02em 0em transparent, -0.04em -0.04em 0em transparent, -0.04em -0.04em 0em var(--main-white), -0.08em -0.08em 0em var(--letter-stage-four), -0.1em -0.1em 0em var(--letter-stage-five);
  }
  80% {
    color: transparent;
    text-shadow: -0.02em -0.02em 0em transparent, -0.04em -0.04em 0em transparent, -0.04em -0.04em 0em transparent, -0.08em -0.08em 0em var(--main-white), -0.1em -0.1em 0em var(--letter-stage-five);
  }

  99% {
    color: transparent;
    text-shadow: -0.02em -0.02em 0em transparent, -0.04em -0.04em 0em transparent, -0.04em -0.04em 0em transparent, -0.08em -0.08em 0em var(--main-white), -0.1em -0.1em 0em var(--letter-stage-five);
  }
  100% {
    color: transparent;
    text-shadow: -0.02em -0.02em 0em transparent, -0.04em -0.04em 0em transparent, -0.04em -0.04em 0em transparent, -0.08em -0.08em 0em transparent, -0.1em -0.1em 0em var(--main-white);
  }
}

@keyframes text-sprung-left-up {
  0% {
    color: transparent;
    text-shadow: -0.02em -0.02em 0em transparent, -0.04em -0.04em 0em transparent, -0.04em -0.06em 0em transparent, -0.08em -0.08em 0em transparent, -0.1em -0.1em 0em var(--main-white);
  }

  20% {
    color: transparent;
    text-shadow: -0.02em -0.02em 0em transparent, -0.04em -0.04em 0em transparent, -0.04em -0.06em 0em transparent, -0.08em -0.08em 0em var(--main-white), -0.1em -0.1em 0em var(--letter-stage-five);
  }

  40% {
    color: transparent;
    text-shadow: -0.02em -0.02em 0em transparent, -0.04em -0.04em 0em transparent, -0.04em -0.06em 0em var(--main-white), -0.08em -0.08em 0em var(--letter-stage-four), -0.1em -0.1em 0em var(--letter-stage-five);
  }

  60% {
    color: transparent;
    text-shadow: -0.02em -0.02em 0em transparent, -0.04em -0.04em 0em var(--main-white), -0.06em -0.06em 0em var(--letter-stage-three), -0.08em -0.08em 0em var(--letter-stage-four), -0.1em -0.1em 0em var(--letter-stage-five);
  }

  80% {
    color: transparent;
    text-shadow: -0.02em -0.02em 0em var(--main-white), -0.04em -0.04em 0em var(--letter-stage-two), -0.06em -0.06em 0em var(--letter-stage-three), -0.08em -0.08em 0em var(--letter-stage-four), -0.1em -0.1em 0em var(--letter-stage-five);
  }

  100% {
    color: var(--main-white);
    text-shadow: -0.02em -0.02em 0em var(--letter-stage-one), -0.04em -0.04em 0em var(--letter-stage-two), -0.06em -0.06em 0em var(--letter-stage-three), -0.08em -0.08em 0em var(--letter-stage-four), -0.1em -0.1em 0em var(--letter-stage-five);
  }
}

h1.name-intro.h1-off-screen, p.name-tag.nametag-off-screen {
  transform: translateY(-50vh);
}

.contact--header.contact--header-onscreen, .portfolio--header-onscreen {
  transform: translateY(0vh);
}


#portfolio-info {
  grid-row: 3/9;
  grid-column: 1/2;
  align-self: start;
  justify-self: start;
  flex-direction: column;
  opacity: 0;
  transition: ease-in-out 2222ms opacity;
}

::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar-track {
  display: none;
}

::-webkit-scrollbar-thumb {
  display: none;
}

.portfolio-accordion {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 2222ms ease-in-out;
  direction: rtl;
  overflow-y: hidden;
}

.portfolio-row {
  width: 100%;
  text-align: left;
  white-space: nowrap;
  letter-spacing: 0.05em;
  overflow-y: hidden;
  transition: opacity ease-in-out 222ms;
  text-shadow: -0.0125em 0.0125em 0em var(--letter-stage-one), -0.025em 0.025em 0em var(--letter-stage-two), -0.04em 0.04em 0em var(--letter-stage-three), -0.055em 0.055em 0em var(--letter-stage-four), -0.07em 0.07em 0em var(--letter-stage-five);
}

.portfolio-links { 
  border: 1px solid var(--main-white);
  border-left: none;
  border-right: none;
  transition: all ease-in-out 222ms;
  cursor: pointer;
}

.portfolio-links:hover {
  background-color: var(--main-white);
    border-left: 1px solid var(--main-white);
  border-right: 1px solid var(--main-white);
}

.portfolio-links a {
  display: block;
  padding: clamp(1.6rem, 1vw, 4rem);
  text-decoration: none;
  font-size: clamp(1.6rem, 1vw, 4rem);
  font-family: "GeistPixel", sans-serif;
  color: var(--main-white);
}

.portfolio-links a:focus-visible {
  outline-offset: -0.1rem;
}

.portfolio-links a:visited {
  color: var(--main-white);
}

#portfolio-info.portfolio-info--active {
  opacity: 1;
}

#portfolio-info.portfolio-info--active-display {
  display: block;
}

#portfolio-info.portfolio-info--active-display .portfolio-accordion {
  grid-template-rows: 1fr;
}

#portfolio-info.z-index-set {
  z-index: 1;
}


#contact-info {
  grid-row: 3/6;
  grid-column: 6/9;
  align-self: center;
  justify-self: center;
  text-align: center;
  transform: translateY(0rem) translateX(0rem);
  cursor: pointer;
  transition: ease-in-out all 2222ms;
  display: none;
  opacity: 0;
  z-index: -1;
  align-items: start;
  justify-content: end;
}

#contact-info-email {
  text-decoration: none;
  font-family: "GeistPixel", sans-serif;
  color: var(--main-white);
  font-size: clamp(2.4rem, 5vw, 6rem);
  white-space: nowrap;
  letter-spacing: 0.05em;
  text-shadow: -0.0125em 0.0125em 0em var(--letter-stage-one), -0.025em 0.025em 0em var(--letter-stage-two), -0.04em 0.04em 0em var(--letter-stage-three), -0.055em 0.055em 0em var(--letter-stage-four), -0.07em 0.07em 0em var(--letter-stage-five);
}

#contact-info.contact-info--active {
  opacity: 1;
}

#contact-info.contact-info--active-display {
  display: flex;
}

#contact-info.z-index-set {
  z-index: 1;
}

#contact-info > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: clamp(1.6rem, 1vw, 4rem);
  font-family: "GeistPixel", sans-serif;
  color: var(--main-white);
  height: 100%;
  position: relative;
}

#contact-info > div > a {
  outline-offset: 1rem;
}

.cloud-icons {
  width:100%;
  max-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 222ms transform;
}

.cloud-icons {
  width:100%;
  min-width: 4.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cloud-icons:hover {
  transform: scale(1.22)
}



button.section-button-text-portfolio, button.section-button-text-contact, button.section-button-text-fight {
  font-family: "GeistPixel", sans-serif;
  color: var(--main-white);
  white-space: nowrap;
  cursor: pointer;
  letter-spacing: 0.04em;
  -webkit-user-select: none;
  user-select: none;
  font-size: clamp(2.4rem, 5vw, 6rem);
}

button#fight {
  text-shadow: 0.02em -0.02em 0em var(--letter-stage-one), 0.04em -0.04em 0em var(--letter-stage-two), 0.06em -0.06em 0em var(--letter-stage-three), 0.08em -0.08em 0em var(--letter-stage-four), 0.1em -0.1em 0em var(--letter-stage-five);
  grid-row: 1/9;
  grid-column: 1/9;
  align-self: start;
  justify-self: end;
  white-space: nowrap;
  font-size: clamp(1.6em,2vw,3rem);
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em -0.025em 0em 0.05em transparent,
  0.05em -0.05em 0em 0.05em transparent,
  0.075em -0.075em 0em 0.05em transparent,
  0.1em -0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em -0.025em 0em 0.05em transparent,
  inset 0.05em -0.05em 0em 0.05em transparent,
  inset 0.075em -0.075em 0em 0.05em transparent,
  inset 0.1em -0.1em 0em 0.05em transparent;
  outline-offset: .5rem;
  padding: 1rem;
}

button#fight.animation-ready {
  animation-name: btn-spring-fight;
  animation-duration: 222ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

button#fight:focus, button#fight:focus-visible, button#fight:hover {
  animation-name: btn-sprung-fight;
  animation-duration: 222ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes btn-spring-fight {
  0% {
  box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em -0.025em 0em 0.05em var(--letter-stage-two),
  0.05em -0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em -0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em -0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em -0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em -0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em -0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em -0.1em 0em 0.05em var(--letter-stage-five);
  }
  20% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em -0.025em 0em 0.05em var(--letter-stage-two),
  0.05em -0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em -0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em -0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em -0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em -0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em -0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em -0.1em 0em 0.05em var(--letter-stage-five);
  }
  40% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em -0.025em 0em 0.05em transparent,
  0.05em -0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em -0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em -0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em -0.025em 0em 0.05em transparent,
  inset 0.05em -0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em -0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em -0.1em 0em 0.05em var(--letter-stage-five);
  }
  60% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em -0.025em 0em 0.05em transparent,
  0.05em -0.05em 0em 0.05em transparent, 
  0.075em -0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em -0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em -0.025em 0em 0.05em transparent,
  inset 0.05em -0.05em 0em 0.05em transparent, 
  inset 0.075em -0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em -0.1em 0em 0.05em var(--letter-stage-five);
  }
  80% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em -0.025em 0em 0.05em transparent,
  0.05em -0.05em 0em 0.05em transparent, 
  0.075em -0.075em 0em 0.05em transparent, 
  0.1em -0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em -0.025em 0em 0.05em transparent,
  inset 0.05em -0.05em 0em 0.05em transparent, 
  inset 0.075em -0.075em 0em 0.05em transparent, 
  inset 0.1em -0.1em 0em 0.05em var(--letter-stage-five);
  }
  100% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em -0.025em 0em 0.05em transparent,
  0.05em -0.05em 0em 0.05em transparent, 
  0.075em -0.075em 0em 0.05em transparent, 
  0.1em -0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em -0.025em 0em 0.05em transparent,
  inset 0.05em -0.05em 0em 0.05em transparent, 
  inset 0.075em -0.075em 0em 0.05em transparent, 
  inset 0.1em -0.1em 0em 0.05em transparent;
  }
}

@keyframes btn-sprung-fight {
  0% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em -0.025em 0em 0.05em transparent,
  0.05em -0.05em 0em 0.05em transparent, 
  0.075em -0.075em 0em 0.05em transparent, 
  0.1em -0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em -0.025em 0em 0.05em transparent,
  inset 0.05em -0.05em 0em 0.05em transparent, 
  inset 0.075em -0.075em 0em 0.05em transparent, 
  inset 0.1em -0.1em 0em 0.05em var(--letter-stage-five);
  }
  20% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em -0.025em 0em 0.05em transparent,
  0.05em -0.05em 0em 0.05em transparent, 
  0.075em -0.075em 0em 0.05em transparent, 
  0.1em -0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em -0.025em 0em 0.05em transparent,
  inset 0.05em -0.05em 0em 0.05em transparent, 
  inset 0.075em -0.075em 0em 0.05em transparent, 
  inset 0.1em -0.1em 0em 0.05em var(--letter-stage-five);
  }
  40% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em -0.025em 0em 0.05em transparent,
  0.05em -0.05em 0em 0.05em transparent, 
  0.075em -0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em -0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em -0.025em 0em 0.05em transparent,
  inset 0.05em -0.05em 0em 0.05em transparent, 
  inset 0.075em -0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em -0.1em 0em 0.05em var(--letter-stage-five);
  }
  60% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em -0.025em 0em 0.05em transparent,
  0.05em -0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em -0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em -0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em -0.025em 0em 0.05em transparent,
  inset 0.05em -0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em -0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em -0.1em 0em 0.05em var(--letter-stage-five);
  }
  80% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em -0.025em 0em 0.05em var(--letter-stage-two),
  0.05em -0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em -0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em -0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em -0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em -0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em -0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em -0.1em 0em 0.05em var(--letter-stage-five);
  }
  100% {
  box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em -0.025em 0em 0.05em var(--letter-stage-two),
  0.05em -0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em -0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em -0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em -0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em -0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em -0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em -0.1em 0em 0.05em var(--letter-stage-five);
  }
}

button#fight.fight-btn--active, button#fight.oz-defeated {
  animation-name: btn-active-fight;
  animation-duration: 2222ms;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes btn-active-fight {
  0% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em 0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  10% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
  20% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em transparent, 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em transparent, 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
  30% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em transparent, 
  0.075em 0.075em 0em 0.05em transparent, 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em transparent, 
  inset 0.075em 0.075em 0em 0.05em transparent, 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
  40% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em transparent,
  0.05em 0.05em 0em 0.05em transparent, 
  0.075em 0.075em 0em 0.05em transparent, 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em transparent,
  inset 0.05em 0.05em 0em 0.05em transparent, 
  inset 0.075em 0.075em 0em 0.05em transparent, 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
  50% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em transparent,
  0.05em 0.05em 0em 0.05em transparent, 
  0.075em 0.075em 0em 0.05em transparent, 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em transparent,
  inset 0.05em 0.05em 0em 0.05em transparent, 
  inset 0.075em 0.075em 0em 0.05em transparent, 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
  60% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em transparent,
  0.05em 0.05em 0em 0.05em transparent, 
  0.075em 0.075em 0em 0.05em transparent, 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em transparent,
  inset 0.05em 0.05em 0em 0.05em transparent, 
  inset 0.075em 0.075em 0em 0.05em transparent, 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
  70% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em transparent, 
  0.075em 0.075em 0em 0.05em transparent, 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em transparent, 
  inset 0.075em 0.075em 0em 0.05em transparent, 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
  80% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em transparent, 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em transparent, 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
  90% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
  100% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em 0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
}

button#portfolio {
  text-shadow: -0.02em 0.02em 0em var(--letter-stage-one), -0.04em 0.04em 0em var(--letter-stage-two), -0.06em 0.06em 0em var(--letter-stage-three), -0.08em 0.08em 0em var(--letter-stage-four), -0.1em 0.1em 0em var(--letter-stage-five);
  grid-row: 1/9;
  grid-column: 1/9;
  align-self: end;
  justify-self: start;
  box-shadow: 
  0em 0em 0em 0.0em transparent,
  -0.025em 0.025em 0em 0.0em transparent,
  -0.05em 0.05em 0em 0.0em transparent,
  -0.075em 0.075em 0em 0.0em transparent,
  -0.1em 0.1em 0em 0.0em transparent,
  inset 0em 0em 0em 0.0em transparent,
  inset -0.025em 0.025em 0em 0.0em transparent,
  inset -0.05em 0.05em 0em 0.0em transparent,
  inset -0.075em 0.075em 0em 0.0em transparent,
  inset -0.1em 0.1em 0em 0.0em transparent;
  outline-offset: .5rem;
  transform: translateY(0vh);
  transition: ease-in-out transform 2222ms;
    outline-offset: 0.1em;
}

button#portfolio.animation-ready {
  animation-name: btn-spring-portfolio;
  animation-duration: 222ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

button#portfolio:focus,  button#portfolio:focus-visible,  button#portfolio:hover {
  animation-name: btn-sprung-portfolio;
  animation-duration: 222ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes btn-spring-portfolio {
  0% {
    box-shadow: 
    -0em 0em 0em 0.05em var(--letter-stage-one),
    -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    -0.1em 0.1em 0em 0.05em var(--letter-stage-five),
    inset -0em 0em 0em 0.05em var(--letter-stage-one),
    inset -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    inset -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    inset -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    inset -0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  20% {
    box-shadow: 
    -0em 0em 0em 0.05em transparent,
    -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    -0.1em 0.1em 0em 0.05em var(--letter-stage-five),
    inset -0em 0em 0em 0.05em transparent,
    inset -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    inset -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    inset -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    inset -0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  40% {
    box-shadow: 
    -0em 0em 0em 0.05em transparent,
    -0.025em 0.025em 0em 0.05em transparent,
    -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    -0.1em 0.1em 0em 0.05em var(--letter-stage-five),
    inset -0em 0em 0em 0.05em transparent,
    inset -0.025em 0.025em 0em 0.05em transparent,
    inset -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    inset -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    inset -0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  60% {
    box-shadow: 
    -0em 0em 0em 0.05em transparent,
    -0.025em 0.025em 0em 0.05em transparent,
    -0.05em 0.05em 0em 0.05em transparent, 
    -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    -0.1em 0.1em 0em 0.05em var(--letter-stage-five),
    inset -0em 0em 0em 0.05em transparent,
    inset -0.025em 0.025em 0em 0.05em transparent,
    inset -0.05em 0.05em 0em 0.05em transparent, 
    inset -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    inset -0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  80% {
    box-shadow: 
    -0em 0em 0em 0.05em transparent,
    -0.025em 0.025em 0em 0.05em transparent,
    -0.05em 0.05em 0em 0.05em transparent, 
    -0.075em 0.075em 0em 0.05em transparent, 
    -0.1em 0.1em 0em 0.05em var(--letter-stage-five),
    inset -0em 0em 0em 0.05em transparent,
    inset -0.025em 0.025em 0em 0.05em transparent,
    inset -0.05em 0.05em 0em 0.05em transparent, 
    inset -0.075em 0.075em 0em 0.05em transparent, 
    inset -0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  100% {
    box-shadow: 
    -0em 0em 0em 0.05em transparent,
    -0.025em 0.025em 0em 0.05em transparent,
    -0.05em 0.05em 0em 0.05em transparent, 
    -0.075em 0.075em 0em 0.05em transparent, 
    -0.1em 0.1em 0em 0.05em transparent,
    inset -0em 0em 0em 0.05em transparent,
    inset -0.025em 0.025em 0em 0.05em transparent,
    inset -0.05em 0.05em 0em 0.05em transparent, 
    inset -0.075em 0.075em 0em 0.05em transparent, 
    inset -0.1em 0.1em 0em 0.05em transparent;
  }
}
@keyframes btn-sprung-portfolio {
  0% {
    box-shadow: 
    -0em 0em 0em 0.05em transparent,
    -0.025em 0.025em 0em 0.05em transparent,
    -0.05em 0.05em 0em 0.05em transparent, 
    -0.075em 0.075em 0em 0.05em transparent, 
    -0.1em 0.1em 0em 0.05em var(--letter-stage-five),
    inset -0em 0em 0em 0.05em transparent,
    inset -0.025em 0.025em 0em 0.05em transparent,
    inset -0.05em 0.05em 0em 0.05em transparent, 
    inset -0.075em 0.075em 0em 0.05em transparent, 
    inset -0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  20% {
    box-shadow: 
    -0em 0em 0em 0.05em transparent,
    -0.025em 0.025em 0em 0.05em transparent,
    -0.05em 0.05em 0em 0.05em transparent, 
    -0.075em 0.075em 0em 0.05em transparent, 
    -0.1em 0.1em 0em 0.05em var(--letter-stage-five),
    inset -0em 0em 0em 0.05em transparent,
    inset -0.025em 0.025em 0em 0.05em transparent,
    inset -0.05em 0.05em 0em 0.05em transparent, 
    inset -0.075em 0.075em 0em 0.05em transparent, 
    inset -0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  40% {
    box-shadow: 
    -0em 0em 0em 0.05em transparent,
    -0.025em 0.025em 0em 0.05em transparent,
    -0.05em 0.05em 0em 0.05em transparent, 
    -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    -0.1em 0.1em 0em 0.05em var(--letter-stage-five),
    inset -0em 0em 0em 0.05em transparent,
    inset -0.025em 0.025em 0em 0.05em transparent,
    inset -0.05em 0.05em 0em 0.05em transparent, 
    inset -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    inset -0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  60% {
    box-shadow: 
    -0em 0em 0em 0.05em transparent,
    -0.025em 0.025em 0em 0.05em transparent,
    -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    -0.1em 0.1em 0em 0.05em var(--letter-stage-five),
    inset -0em 0em 0em 0.05em transparent,
    inset -0.025em 0.025em 0em 0.05em transparent,
    inset -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    inset -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    inset -0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  80% {
    box-shadow: 
    -0em 0em 0em 0.05em transparent,
    -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    -0.1em 0.1em 0em 0.05em var(--letter-stage-five),
    inset -0em 0em 0em 0.05em transparent,
    inset -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    inset -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    inset -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    inset -0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  100% {
    box-shadow: 
    -0em 0em 0em 0.05em var(--letter-stage-one),
    -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    -0.1em 0.1em 0em 0.05em var(--letter-stage-five),
    inset -0em 0em 0em 0.05em var(--letter-stage-one),
    inset -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    inset -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    inset -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    inset -0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
}

button#portfolio.portfolio-btn--active {
  animation-name: btn-active-portfolio;
  animation-duration: 2222ms;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes btn-active-portfolio {
  0% {
    box-shadow: 
    -0em 0em 0em 0.05em var(--letter-stage-one),
    -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    -0.1em 0.1em 0em 0.05em var(--letter-stage-five),
    inset -0em 0em 0em 0.05em var(--letter-stage-one),
    inset -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    inset -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    inset -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    inset -0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  10% {
    box-shadow: 
    -0em 0em 0em 0.05em var(--letter-stage-one),
    -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    -0.1em 0.1em 0em 0.05em transparent,
    inset -0em 0em 0em 0.05em var(--letter-stage-one),
    inset -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    inset -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    inset -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    inset -0.1em 0.1em 0em 0.05em transparent;
  }
  20% {
    box-shadow: 
    -0em 0em 0em 0.05em var(--letter-stage-one),
    -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    -0.075em 0.075em 0em 0.05em transparent, 
    -0.1em 0.1em 0em 0.05em transparent,
    inset -0em 0em 0em 0.05em var(--letter-stage-one),
    inset -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    inset -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    inset -0.075em 0.075em 0em 0.05em transparent, 
    inset -0.1em 0.1em 0em 0.05em transparent;
  }
  30% {
    box-shadow: 
    -0em 0em 0em 0.05em var(--letter-stage-one),
    -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    -0.05em 0.05em 0em 0.05em transparent, 
    -0.075em 0.075em 0em 0.05em transparent, 
    -0.1em 0.1em 0em 0.05em transparent,
    inset -0em 0em 0em 0.05em var(--letter-stage-one),
    inset -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    inset -0.05em 0.05em 0em 0.05em transparent, 
    inset -0.075em 0.075em 0em 0.05em transparent, 
    inset -0.1em 0.1em 0em 0.05em transparent;
  }
  40% {
    box-shadow: 
    -0em 0em 0em 0.05em var(--letter-stage-one),
    -0.025em 0.025em 0em 0.05em transparent,
    -0.05em 0.05em 0em 0.05em transparent, 
    -0.075em 0.075em 0em 0.05em transparent, 
    -0.1em 0.1em 0em 0.05em transparent,
    inset -0em 0em 0em 0.05em var(--letter-stage-one),
    inset -0.025em 0.025em 0em 0.05em transparent,
    inset -0.05em 0.05em 0em 0.05em transparent, 
    inset -0.075em 0.075em 0em 0.05em transparent, 
    inset -0.1em 0.1em 0em 0.05em transparent;
  }
  50% {
    box-shadow: 
    -0em 0em 0em 0.05em var(--letter-stage-one),
    -0.025em 0.025em 0em 0.05em transparent,
    -0.05em 0.05em 0em 0.05em transparent, 
    -0.075em 0.075em 0em 0.05em transparent, 
    -0.1em 0.1em 0em 0.05em transparent,
    inset -0em 0em 0em 0.05em var(--letter-stage-one),
    inset -0.025em 0.025em 0em 0.05em transparent,
    inset -0.05em 0.05em 0em 0.05em transparent, 
    inset -0.075em 0.075em 0em 0.05em transparent, 
    inset -0.1em 0.1em 0em 0.05em transparent;
  }
  60% {
    box-shadow: 
    -0em 0em 0em 0.05em var(--letter-stage-one),
    -0.025em 0.025em 0em 0.05em transparent,
    -0.05em 0.05em 0em 0.05em transparent, 
    -0.075em 0.075em 0em 0.05em transparent, 
    -0.1em 0.1em 0em 0.05em transparent,
    inset -0em 0em 0em 0.05em var(--letter-stage-one),
    inset -0.025em 0.025em 0em 0.05em transparent,
    inset -0.05em 0.05em 0em 0.05em transparent, 
    inset -0.075em 0.075em 0em 0.05em transparent, 
    inset -0.1em 0.1em 0em 0.05em transparent;
  }
  70% {
    box-shadow: 
    -0em 0em 0em 0.05em var(--letter-stage-one),
    -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    -0.05em 0.05em 0em 0.05em transparent, 
    -0.075em 0.075em 0em 0.05em transparent, 
    -0.1em 0.1em 0em 0.05em transparent,
    inset -0em 0em 0em 0.05em var(--letter-stage-one),
    inset -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    inset -0.05em 0.05em 0em 0.05em transparent, 
    inset -0.075em 0.075em 0em 0.05em transparent, 
    inset -0.1em 0.1em 0em 0.05em transparent;
  }
  80% {
    box-shadow: 
    -0em 0em 0em 0.05em var(--letter-stage-one),
    -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    -0.075em 0.075em 0em 0.05em transparent, 
    -0.1em 0.1em 0em 0.05em transparent,
    inset -0em 0em 0em 0.05em var(--letter-stage-one),
    inset -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    inset -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    inset -0.075em 0.075em 0em 0.05em transparent, 
    inset -0.1em 0.1em 0em 0.05em transparent;
  }
  90% {
    box-shadow: 
    -0em 0em 0em 0.05em var(--letter-stage-one),
    -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    -0.1em 0.1em 0em 0.05em transparent,
    inset -0em 0em 0em 0.05em var(--letter-stage-one),
    inset -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    inset -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    inset -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    inset -0.1em 0.1em 0em 0.05em transparent;
  }
  100% {
    box-shadow: 
    -0em 0em 0em 0.05em var(--letter-stage-one),
    -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    -0.1em 0.1em 0em 0.05em var(--letter-stage-five),
    inset -0em 0em 0em 0.05em var(--letter-stage-one),
    inset -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    inset -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    inset -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    inset -0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
}

button#contact {
  text-shadow: 0.02em 0.02em 0em var(--letter-stage-one), 0.04em 0.04em 0em var(--letter-stage-two), 0.06em 0.06em 0em var(--letter-stage-three), 0.08em 0.08em 0em var(--letter-stage-four), 0.1em 0.1em 0em var(--letter-stage-five);
  grid-row: 1/9;
  grid-column: 1/9;
  align-self: end;
  justify-self: end;
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em 0.025em 0em 0.05em transparent,
  0.05em 0.05em 0em 0.05em transparent,
  0.075em 0.075em 0em 0.05em transparent,
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em 0.025em 0em 0.05em transparent,
  inset 0.05em 0.05em 0em 0.05em transparent,
  inset 0.075em 0.075em 0em 0.05em transparent,
  inset 0.1em 0.1em 0em 0.05em transparent;
  transform: translateY(0vh);
  transition: ease-in-out transform 2222ms;
  outline-offset: 0.1em;
}

button#contact.animation-ready {
  animation-name: btn-spring-contact;
  animation-duration: 222ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

button#contact:focus,  button#contact:focus-visible,  button#contact:hover {
  animation-name: btn-sprung-contact;
  animation-duration: 222ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes btn-spring-contact {
  0% {
  box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em 0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  20% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em 0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  40% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em 0.025em 0em 0.05em transparent,
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em 0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em 0.025em 0em 0.05em transparent,
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  60% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em 0.025em 0em 0.05em transparent,
  0.05em 0.05em 0em 0.05em transparent, 
  0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em 0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em 0.025em 0em 0.05em transparent,
  inset 0.05em 0.05em 0em 0.05em transparent, 
  inset 0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  80% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em 0.025em 0em 0.05em transparent,
  0.05em 0.05em 0em 0.05em transparent, 
  0.075em 0.075em 0em 0.05em transparent, 
  0.1em 0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em 0.025em 0em 0.05em transparent,
  inset 0.05em 0.05em 0em 0.05em transparent, 
  inset 0.075em 0.075em 0em 0.05em transparent, 
  inset 0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  100% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em 0.025em 0em 0.05em transparent,
  0.05em 0.05em 0em 0.05em transparent, 
  0.075em 0.075em 0em 0.05em transparent, 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em 0.025em 0em 0.05em transparent,
  inset 0.05em 0.05em 0em 0.05em transparent, 
  inset 0.075em 0.075em 0em 0.05em transparent, 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
}
@keyframes btn-sprung-contact {
  0% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em 0.025em 0em 0.05em transparent,
  0.05em 0.05em 0em 0.05em transparent, 
  0.075em 0.075em 0em 0.05em transparent, 
  0.1em 0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em 0.025em 0em 0.05em transparent,
  inset 0.05em 0.05em 0em 0.05em transparent, 
  inset 0.075em 0.075em 0em 0.05em transparent, 
  inset 0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  20% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em 0.025em 0em 0.05em transparent,
  0.05em 0.05em 0em 0.05em transparent, 
  0.075em 0.075em 0em 0.05em transparent, 
  0.1em 0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em 0.025em 0em 0.05em transparent,
  inset 0.05em 0.05em 0em 0.05em transparent, 
  inset 0.075em 0.075em 0em 0.05em transparent, 
  inset 0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  40% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em 0.025em 0em 0.05em transparent,
  0.05em 0.05em 0em 0.05em transparent, 
  0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em 0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em 0.025em 0em 0.05em transparent,
  inset 0.05em 0.05em 0em 0.05em transparent, 
  inset 0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  60% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em 0.025em 0em 0.05em transparent,
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em 0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em 0.025em 0em 0.05em transparent,
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  80% {
  box-shadow: 
  0em 0em 0em 0.05em transparent,
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em 0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em transparent,
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  100% {
  box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em 0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
}

button#contact.contact-btn--active {
  animation-name: btn-active-contact;
  animation-duration: 2222ms;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes btn-active-contact {
  0% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em 0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
  10% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
  20% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em transparent, 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em transparent, 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
  30% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em transparent, 
  0.075em 0.075em 0em 0.05em transparent, 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em transparent, 
  inset 0.075em 0.075em 0em 0.05em transparent, 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
  40% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em transparent,
  0.05em 0.05em 0em 0.05em transparent, 
  0.075em 0.075em 0em 0.05em transparent, 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em transparent,
  inset 0.05em 0.05em 0em 0.05em transparent, 
  inset 0.075em 0.075em 0em 0.05em transparent, 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
  50% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em transparent,
  0.05em 0.05em 0em 0.05em transparent, 
  0.075em 0.075em 0em 0.05em transparent, 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em transparent,
  inset 0.05em 0.05em 0em 0.05em transparent, 
  inset 0.075em 0.075em 0em 0.05em transparent, 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
  60% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em transparent,
  0.05em 0.05em 0em 0.05em transparent, 
  0.075em 0.075em 0em 0.05em transparent, 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em transparent,
  inset 0.05em 0.05em 0em 0.05em transparent, 
  inset 0.075em 0.075em 0em 0.05em transparent, 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
  70% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em transparent, 
  0.075em 0.075em 0em 0.05em transparent, 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em transparent, 
  inset 0.075em 0.075em 0em 0.05em transparent, 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
  80% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em transparent, 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em transparent, 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
  90% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em 0.1em 0em 0.05em transparent,
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em 0.1em 0em 0.05em transparent;
  }
  100% {
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em 0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }
}

button#portfolio.btn--fight, button#contact.btn--fight {
  transform: translateY(25vh);
}


.cloud-scene {
  z-index: 1;
  position: absolute;
  perspective: 5000px;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

.cloud-scene div {
  transform-style: preserve-3d;
}

.cloud-container {
  position: absolute;
  --layers-count: 10;
  --layer-offset: 12.5px;
  display: grid;
  align-items: center;
  justify-items: center;

}

#cloud-container-1 {
  grid-row: 3/5;
  grid-column: 6/9;
  transform: rotateX(0deg) rotateY(0deg) translateY(0);
  align-self: center;
  justify-self: center;
}

#cloud-container-2 {
  grid-row: 6/7;
  grid-column: 7/9;
  transform: rotateX(0deg) rotateY(0deg) translateX(0);
  align-self: center;
  justify-self: center;
}

#cloud-container-3 {
  grid-row: 3/4;
  grid-column: 1/3;
  transform: rotateX(0deg) rotateY(0deg) translateX(0);
  align-self: center;
  justify-self: center;
}

#cloud-container-4 {
  grid-row: 5/8;
  grid-column: 1/2;
  transform: rotateX(0deg) rotateY(0deg) translateY(0);
  align-self: center;
  justify-self: center;
}

.cloud-original {
  width: clamp(30rem, 30vw, 60rem);
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  justify-items: center;
}

.cloud-original img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: transparent;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  opacity: 0.444;
}

.cloud-layers, .cloud-layer {
  position: absolute;
  inset: 0;
}

.cloud-layer {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  transform: translateZ(calc(var(--i) * var(--layer-offset)));
}

.cloud-layer img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background-color: transparent;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  opacity: 0.444;
}


#original {
  width: 20%;
  height: 20%;
}

#original img {
  display: none;

}

.no-select--transition {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}



#spaceship {
  width: 150px;
  height: 100px;
  position: absolute;
  z-index: -1;
  /* background-image: url('../imgs/pixels/fighter-p38.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%; */
  opacity: 0;
  transition: opacity ease 2222ms;
  z-index: 1;
  perspective: 750px;
}

#spaceship div {
  transform-style: preserve-3d;
}

.fighter-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateX(0deg) rotateY(0deg);
  --layers-count: 20;
  --layer-offset: .22rem;
  display: grid;
  align-items: center;
  justify-items: center;
}

.fighter-original {
  position: relative;
  z-index: 1;
  transform: translateZ(calc((var(--layers-count) + 1) * var(--layer-offset)));
  width: 100%;
  display: grid;
  align-items: center;
  justify-items: center;
}

.fighter-original img {
  grid-area: 1 / 1;
  width: 90%;
  height: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.fighter-original .fighter-frame {
  animation: fighter-frame 100ms steps(1, end) infinite;
}

#spaceship.docked-fighter .fighter-frame {
  animation-play-state: paused;
}

@keyframes fighter-frame {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.fighter-layers, .fighter-layer {
  position: absolute;
  inset: 0;
}

.fighter-layer {
  display: grid;
  align-items: center;
  justify-items: center;
  padding-top: 1rem;
  width: 100%;
  height: 100%;
  transform: translateZ(calc(var(--i) * var(--layer-offset)));
}

.fighter-layer img {
  display: block;
  width: 90%;
  height: auto;
  background-color: transparent;
  opacity: 0.35;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

#showgirls {
  content: "";
  position: absolute;
  top: -149vh;
  left: 50%;
  transform: translateX(-50%);
  background-color: transparent;
  width: 4.9rem;
  height: 4.9rem;
  pointer-events: none;
}

#target {
  display: block;
  position: absolute;
  left: 50%;
  top: 100vh;
  transform: translate(-50%, 0%);
  width: 4.9rem;
  height: 4.9rem;
  /* background-color: red; */
}

#spaceship.launch-fighter, #spaceship.attacking-fighter {
  opacity: 1;
}

#spaceship.attacking-fighter {
  cursor: none;
}

.lasers {
  position: absolute;
  width: 0.49rem;
  height: 2rem;
  opacity: 0;
  background: linear-gradient(var(--main-black) 10%, var(--sun-red) 70%, var(--main-yellow));
  transition-property: opacity, height;
  transition: ease-in-out 222ms;
  animation-name: pulse;
  animation-duration: 222ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {
    filter:  blur(1.2px);
  }
  
  25% {
    filter:  blur(4.9px);
  }
  50% {
    filter:  blur(2.2px);
  }
  70% {
    filter:  blur(8.8px);
  }

  100% {
    filter:  blur(2.2px);
  }
}

.lasers--active {
  opacity: 1;
}

.spawn {
  opacity: 0;
}
.respawn {
  transition-duration: 222ms;
  opacity: 0;
}

.fireballs {
  position: absolute;
  width: 4.9rem;
  height: 4.9rem;
  opacity: 1;
  background: linear-gradient(var(--sun-red) 70%, var(--main-yellow));
  filter: blur(10px);
  border-radius: 100%;
  z-index: 2;
  opacity: 0;
  transition: opacity ease-in 222ms;
  animation-name: burn;
  animation-duration: 888ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes burn {

  0% {
    background: linear-gradient(var(--sun-red) 70%, var(--main-yellow));
    transform: rotate(0deg)
  }

  20% {
    background:linear-gradient(var(--sun-red) 10%, var(--main-yellow));
    transform: rotate(45deg)
  }

  40% {
    background: linear-gradient(var(--sun-red) 70%, var(--main-yellow));
    transform: rotate(90deg)
  }

  60% {
    background:linear-gradient(var(--sun-red) 10%, var(--main-yellow));
    transform: rotate(135deg)
  }

  80% {
    background: linear-gradient(var(--sun-red) 70%, var(--main-yellow));
    transform: rotate(190deg)
  }

  100% {
    background:linear-gradient(var(--sun-red) 10%, var(--main-yellow));
    transform: rotate(222deg)
  }

}

.fireballs.fireballs-active {
  opacity: 1;
}

.oz-hurt {
  animation-name: hurt;
  animation-duration: 2222ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes hurt {
  0% {
    filter: invert(100%);
    transform: translateX(0vw) translateY(-30vh);
  }

  20% {
    filter: invert(0%);
    transform: translateX(20vw) translateY(-30vh);
  }

  40% {
    filter: invert(100%);
    transform: translateX(-20vw) translateY(-30vh);
  }

  60% {
    filter: invert(0%);
    transform: translateX(20vw) translateY(-30vh);
  }

  80% {
    filter: invert(100%);
    transform: translateX(-20vw) translateY(-30vh);
  }

  100% {
    filter: invert(0%);
    transform: translateX(0vw) translateY(-30vh);
  }
}

.spaceship-hurt {
  animation-name: spaceshiphurt;
  animation-duration: 2222ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes spaceshiphurt {
  0% {
    filter: invert(100%);
  }

  20% {
    filter: invert(0%);
  }

  40% {
    filter: invert(100%);
  }

  60% {
    filter: invert(0%);
  }

  80% {
    filter: invert(100%);
  }

  100% {
    filter: invert(0%);
  }
}

#controller-movements-container {
  touch-action: none;
  grid-row: 1/9;
  grid-column: 1/2;
  align-self: end;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border-radius: 20px;
  margin-right: 10px;
  height: 180px;
  max-height: 180px;
  width: 100%;
  max-width: 180px;
  transform: translateX(-100vw);
  transition: ease-in-out transform 2222ms;
  font-size: clamp(2.4rem, 5vw, 6rem);
  z-index: 99;
}

#controller-movements-container.controller-movement--active {
  transform: translateX(0vw);
}

#controller-left, #controller-right, #controller-up, #controller-down {
  pointer-events: none;
  width: 49px;
  height: 49px;
  min-width: 49px;
  min-height: 49px;
  border-radius: 1.6rem;
  border: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 3.2rem;
  box-shadow: 
    -0em 0em 0em 0.05em var(--letter-stage-one),
    -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    -0.1em 0.1em 0em 0.05em var(--letter-stage-five),
    inset -0em 0em 0em 0.05em var(--letter-stage-one),
    inset -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    inset -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    inset -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    inset -0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  }

#controller-up {
  touch-action: none;
  align-self: center;
  justify-self: center;
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  z-index: 2;
  margin-top: 1.6rem;
  padding-bottom: 1rem;
}

#controller-down {
  touch-action: none;
  align-self: center;
  justify-self: center;
  grid-column: 1 / 4;
  grid-row: 3 / 4;
  z-index: 2;
  margin-bottom: 1.6rem;
  padding-bottom: 1rem;
}

#controller-right {
  touch-action: none;
  align-self: center;
  justify-self: center;
  grid-column: 3 / 4;
  grid-row: 1 / 4;
  z-index: 2;
  margin-right: 1.6rem;
}

#controller-left {
  margin-right: 2rem;
  touch-action: none;
  align-self: center;
  justify-self: center;
  grid-column: 1 / 2;
  grid-row: 1 / 4;
  z-index: 2;
  margin-left: 1.6rem;
}


#controller-fire-container {
  touch-action: none;
  text-shadow: 0.02em 0.02em 0em var(--letter-stage-one), 0.04em 0.04em 0em var(--letter-stage-two), 0.06em 0.06em 0em var(--letter-stage-three), 0.08em 0.08em 0em var(--letter-stage-four), 0.1em 0.1em 0em var(--letter-stage-five);
  grid-row: 1/9;
  grid-column: 8/9;
  align-self: end;
  justify-self: center;
  transform: translateX(100vw);
  transition: ease-in-out transform 2222ms;
  z-index: 99;
}

#controller-fire {
  padding: 2rem 4rem;
  border-radius: 20px;
  border: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: 2.4rem;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 5.5rem;
  font-family: "GeistPixel", sans-serif;
  color: var(--main-white);
  font-size: clamp(2.4rem, 5vw, 6rem);
  white-space: nowrap;
  letter-spacing: 0.05em;
    box-shadow: 
  0em 0em 0em 0.05em var(--letter-stage-one),
  0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  0.1em 0.1em 0em 0.05em var(--letter-stage-five),
  inset 0em 0em 0em 0.05em var(--letter-stage-one),
  inset 0.025em 0.025em 0em 0.05em var(--letter-stage-two),
  inset 0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
  inset 0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
  inset 0.1em 0.1em 0em 0.05em var(--letter-stage-five);
}

#controller-fire img {
  height: auto;
  width: 60px;
}

#controller-fire-container.controller-fire--active {
  transform: translateX(0vw);
}

#joystick {
  border-radius: 100%;
  cursor: pointer;
  height: 100%;
  user-select: none;
  width: 100%;
  align-self: center;
  justify-self: center;
  grid-row: 1 / 4;
  grid-column: 1 / 4;
  z-index: 1;
  box-shadow: 
    -0em 0em 0em 0.05em var(--letter-stage-one),
    -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    -0.1em 0.1em 0em 0.05em var(--letter-stage-five),
    inset -0em 0em 0em 0.05em var(--letter-stage-one),
    inset -0.025em 0.025em 0em 0.05em var(--letter-stage-two),
    inset -0.05em 0.05em 0em 0.05em var(--letter-stage-three), 
    inset -0.075em 0.075em 0em 0.05em var(--letter-stage-four), 
    inset -0.1em 0.1em 0em 0.05em var(--letter-stage-five);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
  overflow: hidden;
  transition: 220ms;
}

#heart-container {
  text-shadow: 0.02em -0.02em 0em var(--letter-stage-one), 0.04em -0.04em 0em var(--letter-stage-two), 0.06em -0.06em 0em var(--letter-stage-three), 0.08em -0.08em 0em var(--letter-stage-four), 0.1em -0.1em 0em var(--letter-stage-five);
  grid-row: 1/9;
  grid-column: 1/2;
  align-self: start;
  justify-self: start;
  white-space: nowrap;
  font-size: clamp(1.6em,2vw,3rem);
  transition: ease-in-out transform 2222ms;
  transform: translateY(-50vh);
}

#heart-container.fight--active {
  transform: translateY(0vh);
}

body.fight--active {
  /* background-color: var(--main-blue); */
  cursor: all-scroll;
}

.heart {
  width: 30px;
  height: 30px;
}

.oz.oz-dance {
  animation-name: dance;
  animation-duration: 2222ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

@keyframes dance {
    0% {
    transform: translateX(0vw) translateY(-30vh);
  }
    20% {
    transform: translateX(-20vw) translateY(-30vh);
  }
    40% {
    transform: translateX(20vw) translateY(-30vh);
  }
    60% {
    transform: translateX(-20vw) translateY(-30vh);
  }
    80% {
    transform: translateX(20vw) translateY(-30vh);
  }
    100% {
    transform: translateX(0vw) translateY(-30vh);
  }
}


.rain {
  width: 1vw;
  height: 1vw;
  min-width: 10px;
  min-height: 10px;
  border-radius: 49%;
  background-color: rgba(128, 176, 222, 0.5);
  position: absolute;
  opacity: 0;
  animation-name:rain;
  animation-duration: 222ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  filter: blur(4.9px)
}

@keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#controller-fire.action-button--active, #controller-up.direction-button--active, #controller-down.direction-button--active, #controller-left.direction-button--active, #controller-right.direction-button--active {
    box-shadow: 
    0em 0em 0em 0.05em var(--letter-stage-one),
    0.025em 0.025em 0em 0.05em transparent,
    0.05em 0.05em 0em 0.05em transparent, 
    0.075em 0.075em 0em 0.05em transparent, 
    0.1em 0.1em 0em 0.05em transparent,
    inset 0em 0em 0em 0.05em var(--letter-stage-one),
    inset 0.025em 0.025em 0em 0.05em transparent,
    inset 0.05em 0.05em 0em 0.05em transparent, 
    inset 0.075em 0.075em 0em 0.05em transparent, 
    inset 0.1em 0.1em 0em 0.05em transparent;
}

/* #lurker {
  background-color: var(--main-white);
  width: 149px;
  height: 149px;
  border-radius: 100%;
  position: absolute;
  top: 25vh;
  left: 83vw;
  filter: blur(49px);
  scale: 1;
  z-index: -1;
  opacity: 0;
  transition: all ease 2222ms;
}

body.fight--active #lurker {
  opacity: 0;
  top: 25vh;
  left: 83vw;
}

#lurker.lurker-surge {
  opacity: 0.3;
}

.spines {
  border: 4.9px solid var(--main-white);
  border-radius: 10%;
  position: absolute;
  width: 122%;
  height: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
}

#lurker > div:nth-of-type(1) {
  transform: translate(-20%, -50%) rotate(0deg);
  animation-name: spineone;
  animation-duration: 2222ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  background-color: rgba(236, 194, 57, 0.49);
  transition: background-color 222ms ease-in-out;
}

#lurker.lurker-surge > div:nth-of-type(1) {
  background-color: rgba(236, 194, 57, 0.7);
}

@keyframes spineone {
  0%{
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100%{
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
#lurker > div:nth-of-type(2) {
  transform: translate(-50%, -50%) rotate(0deg);
  animation-name: spinetwo;
  animation-duration: 2222ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  background-color: rgba(151, 248, 248, 0.22);
  transition: background-color 222ms ease-in-out;
}

#lurker.lurker-surge > div:nth-of-type(2) {
  background-color: rgba(151, 248, 248, 0.49);
}

@keyframes spinetwo {
  0%{
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100%{
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
#lurker > div:nth-of-type(3) {
  transform: translate(-50%, -50%) rotate(0deg);
  animation-name: spinethree;
  animation-duration: 2222ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  background-color: rgba(188, 122, 188, 0.1);
  transition: background-color 222ms ease-in-out;
}

#lurker.lurker-surge > div:nth-of-type(3) {
  background-color: rgba(188, 122, 188, 0.3);
}

@keyframes spinethree {
  0%{
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100%{
    transform: translate(-50%, -50%) rotate(180deg);
  }
}
#lurker > div:nth-of-type(4) {
  transform: translate(-50%, -50%) rotate(0deg);
  animation-name: spinefour;
  animation-duration: 2222ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  background-color: rgba(128, 176, 222, 0.22);
  transition: background-color 222ms ease-in-out;
}

#lurker.lurker-surge > div:nth-of-type(4) {
  background-color: rgba(128, 176, 222, 0.4);
}

@keyframes spinefour {
  0%{
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100%{
    transform: translate(-50%, -50%) rotate(-180deg);
  }
}

#lurker > div:nth-of-type(5) {
  transform: translate(-50%, -50%) rotate(-180deg);
  animation-name: spinefive;
  animation-duration: 4999ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  filter: blur(50px);
  background-color: var(--main-red);
  opacity: 0.2;
  transition: background-color 222ms ease-in-out;  
}

@keyframes spinefive {
  0%{
    transform: translate(-50%, -50%) rotate(-180deg);
  }
  100%{
    transform: translate(-50%, -50%) rotate(180deg);
  }
}

#lurker > div:nth-of-type(6) {
  transform: translate(-50%, -50%) rotate(0deg);
  animation-name: spinesix;
  animation-duration: 4999ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  height: 200%;
  width: 200%;
  filter: blur(30px);
  background-color: var(--main-yellow);
  opacity: 0.22;
  transition: background-color 222ms ease-in-out;  
}

@keyframes spinesix {
  0%{
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100%{
    transform: translate(-50%, -50%) rotate(360deg);
  }
} */

@media (max-width: 888px) {
  #contact-info {
    grid-row: 3/8;
    grid-column: 8/9;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    justify-self: end;
    transform: translateY(0rem) translateX(25rem);
  }

  #contact-info-email {
    text-decoration: none;
    font-family: "GeistPixel", sans-serif;
  }

  #contact-info.mobile--contact-active {
    transform: translateY(0rem) translateX(0rem);
  }

  button#fight {
    margin-top: -0.8rem;
    margin-right: -0.8rem;
  }
}

@media only screen and (max-width: 499px) {
  .oz.oz--fight {
    transform: translateY(-30vh);
  }
  .intro--container {
    grid-row: 1/9;
    align-self: start;
    margin-top: 2.2rem;
  }

  p.name-tag {
    white-space: normal;
  }

  #cloud-container-1 {
    grid-column: 9/9;
  }

  #cloud-container-2 {
    grid-row: 6/8;
    grid-column: 9/9;
  }

  #cloud-container-3 {
    grid-column: 1/2;
  }

  #cloud-container-4 {
    grid-column: 1/2;
  }

  #portfolio-info {
      margin-left: -2rem;
  }

  .portfolio-row {
    font-size: 1.6rem;
  }

  .portfolio--active #oz {
    transform: translateX(14.9vw);
  }

  .contact--active #oz {
    transform: translateX(-14.9vw);
  }


  #copy-email {
    padding-left: 0;
  }

  .cloud-icons {
    width:100%;
    min-width: 2.8rem;
  }

  .heart {
    width: 22px;
    height: 22px;
  }

  #spaceship {
    width: 75px;
    height: 50px;
    z-index: 2;
  }

  .fighter-container {
    --layer-offset: 1px;
  }

  #controller-left, #controller-right, #controller-up, #controller-down {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    font-size: 2.8rem;
    border-radius: 1.2rem;
  }

  #controller-up {
    margin-top: 2.8rem;
  }

  #controller-down {
    margin-bottom: 2.8rem;
  }

  #controller-right {
    margin-right: 2.8rem;
  }

  #controller-left {
    margin-left: 2.8rem;
  }

  #controller-fire {
    padding: 2.8rem;
    margin-bottom: 3rem;
  }

  #joystick {
    width: 80%;
    height: 80%;
  }

  #controller-movements-container {
    margin-bottom: -1rem;
  }
}


@media only screen and (max-width: 399px) {
  body {
    padding: 1rem;
  }
}