:root {
  --ctp-crust: #dce0e8;
  --ctp-mantle: #e6e9ef;
  --ctp-base: #eff1f5;
  --ctp-surface1: #bcc0cc;
  --ctp-subtext0: #6c6f85;
  --ctp-text: #4c4f69;
  --ctp-lavender: #7287fd;
  --ctp-sky: #04a5e5;
  --ctp-green: #40a02b;
  --ctp-yellow: #df8e1d;
  --ctp-peach: #fe640b;
  --ctp-maroon: #e64553;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ctp-crust: #11111b;
    --ctp-mantle: #181825;
    --ctp-base: #1e1e2e;
    --ctp-surface1: #45475a;
    --ctp-subtext0: #a6adc8;
    --ctp-text: #cdd6f4;
    --ctp-lavender: #b4befe;
    --ctp-sky: #89dceb;
    --ctp-green: #a6e3a1;
    --ctp-yellow: #f9e2af;
    --ctp-peach: #fab387;
    --ctp-maroon: #eba0ac;
  }
}

:root {
  --bg: var(--ctp-base);
  --bg-darker: var(--ctp-mantle);
  --bg-darkest: var(--ctp-crust);

  --card: var(--ctp-surface1);

  --text: var(--ctp-text);
  --text-muted: var(--ctp-subtext0);

  --accent: var(--ctp-peach);
  --accent-hover: var(--ctp-maroon);

  --rainbow-red: var(--ctp-maroon);
  --rainbow-orange: var(--ctp-peach);
  --rainbow-yellow: var(--ctp-yellow);
  --rainbow-green: var(--ctp-green);
  --rainbow-blue: var(--ctp-sky);
  --rainbow-purple: var(--ctp-lavender);
}

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-variable.ttf");
}

html {
  background: var(--bg);
  font-family: "Geist";
  color: var(--text);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.4s;
  position: relative;
  width: fit-content;
}
a:hover {
  color: var(--accent-hover);
}

a.underline {
  white-space: nowrap;
}
a.underline::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 0%;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateX(-50%);
  transition:
    width 0.4s,
    background 0.4s;
}
a.underline:hover::after {
  background: var(--accent-hover);
  width: calc(100% - 0.4rem);
}

a.arrow {
  white-space: nowrap;
}
a.arrow::after {
  content: "";
  position: absolute;
  top: 0;
  right: -2lh;
  background: var(--accent);
  mask: url("/icons/arrow-right.svg");
  mask-size: cover;
  width: 1lh;
  height: 1lh;
  transition:
    background 0.4s,
    right 0.4s,
    opacity 0.4s;
  opacity: 0;
}
a.arrow:hover::after {
  right: -1.2lh;
  background: var(--accent-hover);
  opacity: 1;
}

a.external-audio {
  background-image: linear-gradient(135deg, var(--accent), var(--accent-hover));
  background-color: var(--accent);
  transition:
    background-size 0.4s,
    background-position 0.4s;
  border-radius: 1.2rem;
  display: flex;
  width: 24vw;
  aspect-ratio: 600/200;
  position: relative;
  mask: url("/img/audio-preview.svg");
  mask-size: cover;
  animation: none;
}

@keyframes squeeze {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(0.9);
  }
  0% {
    transform: scaleX(1);
  }
}

.squeezable {
  display: inline-block;
  animation: none;
  transform: scaleX(1);
}
.squeezable:hover {
  animation: 0.6s ease-out 0.4s 2 squeeze;
}

span.rainbow {
  background-image: linear-gradient(
    90deg,
    var(--rainbow-red),
    var(--rainbow-orange),
    var(--rainbow-yellow),
    var(--rainbow-green),
    var(--rainbow-blue),
    var(--rainbow-purple)
  );
  background-color: var(--text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}