:root {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", monospace;
  color-scheme: light dark;

  --blood-orange: oklch(0.5 0.15 30);
  --navy: oklch(0.3 0.01 270);
  --scrub: oklch(0.8 0.03 80);

  --cloud: oklch(0.70 0.0234 347.65);
  --evening: oklch(0.18 0.0364 256.91);
  --stormy: oklch(0.50 0.0484 276.6);

  --color-background: var(--scrub);
  --color-text-low: var(--navy);
  --color-text-high: var(--blood-orange);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--evening);
    --color-text-low: var(--stormy);
    --color-text-high: var(--cloud);
  }
}

body {
  background-color: var(--color-background);
  color: var(--color-text-low);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  min-height: 100%;
}

a {
  text-decoration: none;
  color: var(--color-text-low);
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    margin: 0;
  }
}

.services,
.links {
  font-family: ui-sans-serif, "SF Pro Text", "Cascadia", sans-serif;
  font-size: 1.1rem;
  transition: var(--slow-transition);
}

.link a {
  display: block;
  padding: 0.6rem 0;
}

.service {
  padding: 0.8rem 0;
}

.email-link {
  font-size: 1.8rem;
  font-weight: normal;
}

.email-at,
.email-tld {
  color: var(--color-text-low);
  font-weight: lighter;
}

.email-hello,
.email-domain {
  color: var(--color-text-high);
}

@media (max-width: 764px) {
  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
  }
  .services {
    text-align: center;
    width: 100%;
  }

  .email-link {
    padding: 2rem;
  }
}

@media (min-width: 765px) {

  .services,
  .links {
    font-family: ui-sans-serif, "SF Pro Display", "Cascadia", sans-serif;
    font-size: 1.5rem;
    position: absolute;
    transition: var(--slow-transition);
  }

  .services {
    left: 50%;
    top: calc(50% - 16rem);
    opacity: var(--opacity-low);
  }

  .email-link {
    font-size: 4rem;
    padding: 3rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;

    white-space: nowrap;
  }

  .links {
    left: calc(50% - 1rem);
    top: calc(50% + 6rem);
  }
}

@media (any-hover: hover) {
  :root {
    --slow-transition: 0.5s ease;

    --opacity-low: 0.5;
    --opacity-high: 1;
  }

  .email-link {

    .email-at,
    .email-hello {
      color: var(--color-text-low);
      opacity: var(--opacity-low);
      transition: var(--slow-transition);
    }

    &:hover {

      .email-at,
      .email-hello {
        opacity: var(--opacity-high);
      }

      .email-hello {
        color: var(--color-text-high);
      }
    }
  }

  .services,
  .links {
    a {
      opacity: var(--opacity-low);

      &:hover {
        opacity: var(--opacity-high);
      }
    }
  }
  .link:hover .emphasis {
    color: var(--color-text-high);
  }

  .services {
    opacity: var(--opacity-low);

    &:hover {
      opacity: var(--opacity-high);
    }
  }
}

/* Start Chrome background rendering bugs (split and flicker) */
@supports selector(::-internal-media-controls-overlay-cast-button) {
  html {
    height: 100%;
    backface-visibility: hidden;
    perspective: 1000;
  }

  body {
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .services,
  .links {
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .email-link {
    backface-visibility: hidden;
  }

  * {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  @media (min-width: 765px) {
    .email-link {
      transform: translate(-50%, -50%) translateZ(0);
    }
  }
}

/* End Chrome background rendering bug */