@import url("https://stevec.dev/css/reset.css");

@font-face {
  font-family: "clip";
  src: url("https://www.stevec.dev/c/files/clip.eot") format("woff2"),
    url("https://www.stevec.dev/c/files/clip.woff2") format("woff2"),
}

@font-face {
  font-family: "tschichold";
  src: url("https://stevec.dev/c/files/tschichold.ttf") format("truetype") url("https://stevec.dev/c/files/tschichold.eot") format("eot"),
    url("https://stevec.dev/c/files/tschichold.woff") format("woff") url("https://stevec.dev/c/files/tschichold.woff2") format("woff2");
}

:root {
  --neon: 70% 0.3 228.36;
  --font: "tschichold", sans-serif;
  --bla: 18% 0.005 248.12;
  --whi: 97% 0.01 0;
  --blu: 69% 0.127 227.92;
  --eblu: 51% 0.199 271;
  --red: 61% 0.212 31.5;
  --ora: 63% 0.221 33.24;
  --pea: 73% 0.163 21.9;
  --yel: 81% 0.168 81;
  --gre: 70% 0.15 158;
  --pin: 65% 0.261 356;
  --pur: 44% 0.15 284.69;
  --tea: 51% 0.09 188.7;
  --tur: 81% 0.131 183;
  --dark: 23% 0.008 274;
  --ow: 94% 0.016 95.23;
}

html {
  color-scheme: dark light;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

::selection {
  background: oklch(var(--ora));
  color: oklch(var(--blu));
}

body {
  background: oklch(var(--bla));
  height: 100dvh;
  place-items: center;
  display: grid;
}

h1 {
  font-family: "clip", sans-serif;
  font-size: 13dvw;
  text-align: center;
  color: oklch(var(--whi) /0.97);
  text-shadow: 0 0 2vmin oklch(var(--neon)), 0 0 3vmin oklch(var(--neon)), 0 0 2.7vmin oklch(var(--whi)), 0 0 5vmin oklch(var(--neon)), 0 0 1.5vmin oklch(var(--whi)), 0 0 2.7vmin oklch(var(--neon)), 0 0 7vmin oklch(var(--whi));
  animation: flicker 5s infinite;
}

dialog {
  animation: dialog-fade 0.75s ease-in-out;
  border-radius: 10px;
}

dialog::backdrop {
  background: oklch(var(--whi) / 0.5);
  backdrop-filter: blur(20px);
}

form,
input,
textarea,
button {
  font-family: var(--font);
  font-size: 3vmin;
}

input,
textarea {
  padding: 1ch 0.5ch;
}

form {
  display: grid;
  padding: 3vmin 5vmin;
  border-radius: 10px;
}

input,
textarea {
  margin: 0 0 1ch 0;
  width: 41vw;
}



@media (prefers-reduced-motion) {

  /* styles to apply if a user's device settings are set to reduced motion */
  h1 {
    animation-name: flicker;
    animation-duration: 0.7s;
    animation-iteration-count: 1;
  }
}

@keyframes flicker {

  20%,
  24%,
  55% {
    opacity: 1;
  }

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    opacity: 0.9;
    opacity: 0.85;
  }
}

@keyframes dialog-fade {
  from {
    opacity: 0;
    motion-offset: 0%;
    offset-distance: 100%;
  }

  to {
    opacity: 1;
  }
}