/* Core variables and page-wide defaults */
@font-face{
  font-family:'ADanger';
  src:url('../assets/fonts/adanger-webfont.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Bitcraft';
  src:url('../assets/fonts/Bitcraft.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Cruel Icons';
  src:url('../assets/fonts/cruel-icons-full.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:block;
}
@font-face{
  font-family:'Digital';
  src:url('../assets/fonts/DIGITAL.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Kode Mono';
  src:url('../assets/fonts/KodeMono-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Poxast';
  src:url('../assets/fonts/Poxast-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Press Start 2P';
  src:url('../assets/fonts/PressStart2P-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Silkscreen';
  src:url('../assets/fonts/Silkscreen-400.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Space Mono';
  src:url('../assets/fonts/SpaceMono-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Space Mono';
  src:url('../assets/fonts/SpaceMono-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Space Mono';
  src:url('../assets/fonts/SpaceMono-Italic.ttf') format('truetype');
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Space Mono';
  src:url('../assets/fonts/SpaceMono-BoldItalic.ttf') format('truetype');
  font-weight:700;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Square Pixel 7';
  src:url('../assets/fonts/square_pixel-7.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'VCR';
  src:url('../assets/fonts/VCR.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'VT323';
  src:url('../assets/fonts/VT323-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'YouMurdererBB';
  src:url('../assets/fonts/YouMurdererBB.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --io-accent:#FF005D;
  --io-accent-bright:#FF3D84;
  --io-accent-dim:#A3003C;
  --io-purple:#9b3df0;
  --io-purple-dim:#5a1d8f;
  --bg:#050507;
  --bg-2:#0a0a0d;
  --line:rgba(255,0,93,0.18);
  --line-soft:rgba(255,255,255,0.06);
  --text:#f4f4f6;
  --text-dim:#8a8a93;
  --text-faint:#52525a;
  --ok:#5fd47d;
  --mono:'Space Mono', 'Kode Mono', ui-monospace, Menlo, monospace;
  --pixel:'Silkscreen', monospace;
  --term:'VT323', monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);color:var(--text);
  font-family:var(--mono);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body{
  background:
    radial-gradient(ellipse 1200px 700px at 80% -10%, rgba(255,0,93,0.18), transparent 60%),
    radial-gradient(ellipse 900px 500px at -10% 30%, rgba(155,61,240,0.12), transparent 60%),
    radial-gradient(ellipse 800px 500px at 60% 100%, rgba(255,0,93,0.10), transparent 60%),
    var(--bg);
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--io-accent);color:#000}

body::before{
  content:'';position:fixed;inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:48px 48px;
  pointer-events:none;z-index:0;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 90%);
}
body::after{
  content:'';position:fixed;inset:0;
  background:repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(255,0,93,0.012) 2px, rgba(255,0,93,0.012) 3px);
  pointer-events:none;z-index:1;mix-blend-mode:screen;
}

.wrap{max-width:1280px;margin:0 auto;padding:0 32px;position:relative;z-index:2}
