:root {
  --background: #ffffff;
  --foreground: #171717;
  --highlight: #fb0a0a;
  --ident-x: 75vw;
  --ident-y: 50vh;
  --offset-x: 0;
  --offset-y: 0;
  --ident-size: 30vw;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

html {
  font-size: 24px;
  overflow-y: visible;
}

body {
  color: var(--foreground);
  background: var(--background);
  overflow-x: hidden;
  overflow-y: visible;
}

main {
  display: flex;
  flex-direction: column;
  perspective: calc(var(--ident-size) * 1.2);
  perspective-origin: 60vw 25vh;
  overflow-y: visible;
}

@media screen and (min-width: 750px) {
  main {
    perspective: calc(var(--ident-size) * 1.6);
    perspective-origin: 75vw 75vh;
  }
}

.ident {
  position: relative;
  margin-bottom: calc(var(--ident-size) * -1);
  width: var(--ident-size);
  height: var(--ident-size);
  left: calc(var(--ident-x) - (var(--ident-size) / 2));
  top: calc(var(--ident-y) - (var(--ident-size) / 2));
  transform-origin: center;
  transform: rotate3d(1, 2, 1, 60deg);
  transform-style: preserve-3d;
  font-weight: 900;
  font-stretch: extra-expanded;
  font-size: var(--ident-size);
  text-transform: uppercase;
  user-select: none;
}

.ident span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--highlight);
  transform-origin: center;
  border-radius: calc(var(--ident-size) / 10);
  transition: transform 150ms ease-in-out;
  opacity: 0;
}

.ident .r {
  transform: rotateX(270deg) rotateZ(270deg) translateZ(calc(var(--ident-size) / -1.8));
  z-index: 2;
}

.ident .r:hover {
  transform: rotateX(270deg) rotateZ(270deg) translateZ(calc(var(--ident-size) / -1.7));
}

.ident .o {
  transform: translateZ(calc(var(--ident-size) / -1.8));
  z-index: 3;
}

.ident .o:hover {
  transform: translateZ(calc(var(--ident-size) / -1.7));
}

.ident .b {
  transform: rotateY(270deg) translateZ(calc(var(--ident-size) / -1.8));
  z-index: 1;
}

.ident .b:hover {
  transform: rotateY(270deg) translateZ(calc(var(--ident-size) / -1.7));
}

@media screen and (max-width: 750px) {
  .ident {
    top: calc((var(--ident-x) / 1.2) - var(--ident-size));
    left: calc(var(--ident-x) - (var(--ident-size) / 1.2));
  }
}

@media screen and (min-width: 750px) {
  .ident {
    position: sticky;
  }
}

section {
  padding-top: 10vh;
  padding-right: 5vw;
  padding-left: 5vw;
  padding-bottom: 2.5vh;
  border-bottom: 2px solid var(--foreground);
}

section:first-of-type {
  padding-top: 45vh;
}

section:last-of-type {
  padding-bottom: 300px;
  border-bottom: 0;
}

@media screen and (min-width: 750px) {
  section {
    padding-right: 65vw;
  }
}

h2 {
  font-stretch: expanded;
  font-weight: 700;
  transition: font-stretch 200ms ease-in-out, font-weight 250ms ease-in-out;
}

section:hover h2,
section:focus-within h2 {
  font-stretch: ultra-expanded;
  font-weight: 900;
}

ul {
  list-style: none;
}

a {
  text-decoration: underline;
  display: block;
  transition: text-decoration-color 150ms ease-in-out;
  color: inherit;
}

a:hover,
a:focus {
  text-decoration-color: var(--highlight);
}

/* Animations */

@keyframes identR {
  0% {
    opacity: 0;
    transform: rotateX(270deg) rotateZ(270deg) translateZ(calc(var(--ident-size) / -1.5));
  }
  70% {
    transform: rotateX(270deg) rotateZ(270deg) translateZ(calc(var(--ident-size) / -1.9));
  }
  100% {
    opacity: 1;
  }
}

@keyframes identO {
  0% {
    opacity: 0;
    transform: translateZ(calc(var(--ident-size) / -1.5));
  }
  70% {
    transform: translateZ(calc(var(--ident-size) / -1.9));
  }
  100% {
    opacity: 1;
  }
}

@keyframes identB {
  0% {
    opacity: 0;
    transform: rotateY(270deg) translateZ(calc(var(--ident-size) / -1.5));
  }
  70% {
    transform: rotateY(270deg) translateZ(calc(var(--ident-size) / -1.9));
  }
  100% {
    opacity: 1;
  }
}

.ident .r {
  animation: identR 300ms ease-in-out 150ms forwards;
}

.ident .o {
  animation: identO 300ms ease-in-out 300ms forwards;
}

.ident .b {
  animation: identB 300ms ease-in-out 450ms forwards;
}