/* RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
:target { scroll-margin-block: 5ex; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3 { overflow-wrap: break-word; }
body { min-height: 100vh; }
input, button, textarea, select { font: inherit; color: inherit; }

/** Fonts **/

@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url("InterVariable.woff2?v=4.0") format("woff2-variations"),
       url("InterVariable.woff2?v=4.0") format("woff2");
  src: url("InterVariable.woff2?v=4.0") format("woff2") tech("variations");
}
@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  src: url("InterVariable-Italic.woff2?v=4.0") format("woff2-variations"),
       url("InterVariable-Italic.woff2?v=4.0") format("woff2");
  src: url("InterVariable-Italic.woff2?v=4.0") format("woff2") tech("variations");
}

/** CSS **/
:root {
  --gap: 1rem;
  --radius: 0.25rem;
  --text: #FFF;
  --bg: #111;
  --width: 40rem;
  --bg-dark: oklch(from var(--bg) calc(l - 0.075) c h);
  --accent: oklch(0.6 0.2 280);
}

.noselect { user-select: none; -webkit-user-select: none; cursor: pointer; }

html { background: #221830; }
body { background: radial-gradient(circle at top, #221830, #111); color: var(--text); font: 16px/1.6 Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; font-variation-settings: 'opsz' 16; }
main { display: flex; flex-direction: column; align-items: center; font-size: 1.125rem; font-weight: 450; gap: 1rem; padding: 9rem 0 5rem 0; }
main > * { width: calc(min(96vw, var(--width))); }

h1 { font-weight: 800; line-height: 1; }
.index h1 { font-size: 8rem; font-variation-settings: 'opsz' 28; filter: drop-shadow(0 0.5rem #3228AD); margin: 0 0 1rem 0; }
.index h1 + p { font-size: 1.75rem; line-height: 1.25; }

.blog h1 { filter: drop-shadow(0 0.25rem #3228AD); }
.blog h1 + p { margin: 0 0 1rem 0; color: rgba(255, 255, 255, 0.25); }

h2 { margin-top: 2rem; color: oklch(0.8 0.2 280); }
h3 { margin-top: 1rem; }
li { margin-left: 2rem; }
strong { color: oklch(0.8 0.2 280); }
a { color: oklch(0.8 0.2 280); text-decoration-color: oklch(0.8 0.2 280 / 0.3); } 
a:hover { text-decoration: underline; }
img, video { width: 50rem; margin: 2rem 0; }



.key_to_eye { width: 96vw; height: 150px; display: flex; margin: -1rem 0; }
.key_to_eye > div { background-size: auto 150px; }
.key_to_eye .left { width: 110px; background-image: url(key_to_eye_left.png); }
.key_to_eye .mid { flex-grow: 1; background-image: url(key_to_eye_mid.png); }
.key_to_eye .right { width: 160px; background-image: url(key_to_eye_right.png); }

.gamer { background-clip: text; -webkit-background-clip: text; background-image: linear-gradient(45deg, #FF0000 25%, #00FF00 50%, #0000FF 75%); color: transparent; }

.columns { width: calc(min(100vw, 48rem)); display: flex; gap: 1rem; align-items: flex-start; }
.columns img { margin: 0; max-width: min(300px, 96vw); }
.columns > div { display: flex; flex-direction: column; gap: 1rem; }

form { background: #3B3A53; padding: 4rem 0 3rem 0; width: calc(min(100vw, 48rem)); border-radius: 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem; margin: 2rem 0; }
form > div { width: calc(min(96vw, var(--width))); display: flex; gap: 1rem; }
form > p { width: calc(min(96vw, var(--width))); font-size: 1rem; color: rgba(255, 255, 255, 0.25); }
input[type=email] { height: 3rem; width: 50%; flex-grow: 1; background-color: rgba(0, 0, 0, 0.3); border: none; border-radius: 0.5rem; padding: 0 1rem; outline: none; }
input[type=email]:focus { background-color: rgba(0, 0, 0, 0.4); }

input[type=submit] { height: 3rem; background-color: var(--accent); border: none; border-radius: 0.5rem; padding: 0 1.5rem; outline: none; }
input[type=submit]:hover { background-color: oklch(0.65 0.2 280); position: relative; top: -1px; }
input[type=submit]:active { background-color: oklch(0.55 0.2 280); position: relative; top: 1px; }

.footer { width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.25); padding: 2rem; font-size: 1rem; color: rgba(255, 255, 255, 0.25); }

@media screen and (max-width: 599px) {
  main { padding-top: 2rem; }
  .columns { flex-direction: column; align-items: center; }
  .columns > div { width: calc(min(96vw, var(--width))); }
  form { padding: 3rem 0 2rem; margin: 1rem 0 3rem; border-radius: 0; }
  .footer { padding: 2rem 2vw; }
}