body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  --offset-lighter: #868686;
  --offset: #464646;
  --primary: #232323;
  --el-colour: var(--offset);
  --background: #f5f5f5;
  --bg-offset: #d5d5d5;
  font-family: "Nova Mono", sans-serif, monospace;
  /* background-color: var(--background); */
  background-image: linear-gradient(
    to bottom,
    rgba(255, 127, 127, 0.25) 0%,
    rgba(255, 179, 127, 0.25) 10%,
    rgba(232, 227, 129, 0.25) 20%,
    rgba(167, 220, 154, 0.25) 30%,
    rgba(159, 218, 216, 0.25) 40%,
    rgba(151, 201, 226, 0.25) 50%,
    rgba(142, 182, 238, 0.25) 60%,
    rgba(168, 137, 242, 0.25) 70%,
    rgba(221, 109, 248, 0.25) 80%,
    rgba(254, 112, 217, 0.25) 90%,
    rgba(255, 127, 127, 0.25) 100%
  );
}

article {
  padding: 2rem 1rem;
  width: min(600px, 100vw);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* background-color: transparent; */
  background-color: #f5f5f5;
  border-width: 8px;
  transition: all 200ms ease;
  border-style: solid;
  border-top: none;
  border-bottom: none;
  border-image: linear-gradient(
      to bottom,
      rgba(255, 127, 127, 1) 0%,
      rgba(255, 179, 127, 1) 10%,
      rgba(232, 227, 129, 1) 20%,
      rgba(167, 220, 154, 1) 30%,
      rgba(159, 218, 216, 1) 40%,
      rgba(151, 201, 226, 1) 50%,
      rgba(142, 182, 238, 1) 60%,
      rgba(168, 137, 242, 1) 70%,
      rgba(221, 109, 248, 1) 80%,
      rgba(254, 112, 217, 1) 90%,
      rgba(255, 127, 127, 1) 100%
    )
    1;
}

/* article.landed {
  border-width: 8px;
  background-color: #f5f5f5dd;
} */

#hero {
  height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.page-title {
  overflow: visible;
  width: 100%;
  justify-content: center;
  position: relative;
  h1 {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    font-size: 3.5rem;
  }
  .skeleton {
    position: relative;
    opacity: 0;
  }
}

.page-description {
  align-self: center;
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
}

.subheading {
  width: 100%;
  text-align: center;
  color: var(--offset);
  font-size: 0.75rem;
}

.phantom {
  opacity: 0;
  filter: blur(25px);
}

.phantom.phasing {
  /* --bezier: ease; */
  --bezier: cubic-bezier(0.81, 0.61, 0.07, 0.83);
  transition:
    all 3.5s var(--bezier),
    filter 2s var(--bezier);
  opacity: 1;
  filter: blur(0px);
}

.phantom.phaseover {
  transition: all 250ms ease;
  opacity: 1;
  filter: blur(0px);
}

.phantom.phaseover:active {
  scale: 0.9;
}

.corporeal {
  opacity: 0;
  transition: all 1s ease;
  z-index: 20;
  cursor: pointer;
  user-select: none;
}

.corporeal.onstage {
  transition: all 250ms ease;
}

.corporeal.onstage:active {
  scale: 0.9;
}

#scroll-prompt {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  display: flex;
  justify-content: center;
  font-size: 4rem;
  padding: 1rem;
  opacity: 0;
  a {
    color: var(--primary);
    text-decoration: none;
  }
}

.blink {
  animation: blink 1.5s ease-in 0s infinite forwards;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

tile {
  position: relative;
  transition: all 100ms ease;
}

tile > a {
  border: 2px solid var(--el-colour);
  border-radius: 4px;
  text-decoration: none;
  color: var(--primary);
  display: flex;
  align-items: center;
  height: 75px;
  overflow: hidden;
  background-color: var(--background);
}

tile > a img,
tile > a svg {
  width: 50%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  background-color: var(--background);
  color: var(--el-colour);
  fill: var(--el-colour);
}

tile > a svg {
  height: 400%;
}

tile > a .about {
  width: 50%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 0.5rem;
  font-size: 1.5rem;
  color: var(--el-colour);
  .description {
    font-size: 0.75rem;
    color: var(--offset-lighter);
    letter-spacing: -1px;
  }
}

tile:hover,
tile:focus-within {
  translate: -2px -2px;
  box-shadow: 1px 1px 4px var(--bg-offset);
  /* filter: grayscale(0); */
}

.hero-img-wrapper {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fade-in 2s ease 2.5s forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero-img-wrapper > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

h1 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 0.25rem;
}

h2 {
  text-align: center;
  font-size: 1.5rem;
  position: relative;
  text-shadow: 0px 0px 5px var(--background);
  margin-top: 1rem;
}

h2::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% + 1px);
  width: 100%;
  border-bottom: 1px solid var(--offset-lighter);
  z-index: 0;
  opacity: inherit;
}

.heading-internal {
  position: relative;
  background-color: var(--background);
  padding: 0.25rem;
  border-radius: 4px;
  z-index: 1;
}

.quick-links {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.quick-links a {
  color: var(--primary);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  padding: 1rem;
  text-decoration: none;
}

.quick-links a i,
.quick-links a svg {
  font-size: 2rem;
}

.quick-links a:visited {
  color: var(--primary);
}

canvas {
  overflow-x: hidden;
}

.effect-canvas {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 500ms ease;
}

.effect-canvas.visible {
  opacity: 1;
}

.paralax-canvas {
  position: fixed;
  /* transition: all 100ms ease; */
}

.reverse {
  background-color: var(--primary);
  color: var(--background);
}

.quick-links .email-contact {
  padding: 0.25rem 0.5rem;
  height: fit-content;
}

.floating-key {
  position: fixed;
  font-size: 2rem;
  font-weight: bold;
  --x-delta: 10px;
  --y-delta: 10px;
  left: var(--x);
  top: var(--y);
  animation: floatAway 1s ease 0s 1 forwards;
  z-index: 100;
}

@keyframes floatAway {
  from {
    left: var(--x);
    top: var(--y);
    opacity: 1;
  }
  to {
    left: calc(var(--x) - var(--x-delta));
    top: calc(var(--y) - var(--y-delta));
    opacity: 0;
  }
}

.miku {
  color: #00ddc0;
}

#pre-intro-content {
  font-size: 1.5rem;
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  height: 100%;
  width: min(100vw, 600px);
  z-index: var(--pre-intro-z);
  justify-content: flex-end;
  align-items: flex-end;
  padding: 1rem;
  gap: 0.5rem;
  pointer-events: none;
  /* opacity: 0.5; */
}

.pre-intro-links {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pre-intro-links a {
  padding: 0 0.5rem;
  pointer-events: all;
}

.pre-intro-links a i {
  color: var(--primary);
}

sublinks {
  color: var(--primary);
  position: absolute;
  right: 0.25rem;
  bottom: 0.1rem;
  display: flex;
  gap: 0.1rem;
}
sublinks a {
  color: var(--primary);
}

@media (min-width: 600px) {
  #pre-intro-content {
    margin: 0 calc((100vw - 600px) / 2);
  }
}