/* -------------------------------------------------
   Global defaults
------------------------------------------------- */
:root {
    /* Change this value to alter the rain colour (default green) */
    --rain-color: #00ff00;
}

/* -------------------------------------------------
   assets/css/style.css  (or any stylesheet you load)
   ------------------------------------------------- */
@font-face {
    /* The name you will use later in `font-family:` */
    font-family: HemiHead;

    /* --------------------------------------------------------------------
       1️⃣ IE9‑compatible .eot (must be first, otherwise older IE ignores it) */
    src: url(../fonts/hemi-head-bd-it.eot);

    /* --------------------------------------------------------------------
       2️⃣ All other browsers – a comma‑separated list of formats.
          Order matters: the browser picks the *first* format it understands. */
    src: url(../fonts/hemi-head-bd-it.eot?#iefix) format(embedded-opentype),   /* IE6‑IE8 */
         url(../fonts/hemi-head-bd-it.woff2)      format(woff2),               /* Modern browsers */
         url(../fonts/hemi-head-bd-it.woff)       format(woff),                /* Chrome, Firefox, Edge, Safari */
         url(../fonts/hemi-head-bd-it.ttf)        format(truetype),            /* Android < 4.4, older iOS */
         url(../fonts/hemi-head-bd-it.svg#hemi-head-bd-it) format(svg);          /* Legacy iOS ≤ 4 */

    font-weight: normal;      /* or 400, bold, etc. – match the actual file */
    font-style : normal;       /* or italic/oblique if you have that style   */
    font-display: swap;        /* optional – improves perceived loading time */
}

/* Reset & basic page style */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    overflow: hidden;
    background: #000;               /* black background */
    /*font-family: 'Courier New', Courier, monospace;*/
    font-family: 'HemiHead', Courier, monospace;
}

/* -------------------------------------------------
   Matrix rain container
------------------------------------------------- */
.matrix {
    position: fixed;
    inset: 0;                        /* top/right/bottom/left = 0 */
    color: var(--rain-color);
    font-size: 1.2rem;
    line-height: 1.2rem;
    pointer-events: none;           /* clicks go through */
    z-index: 1;
}

/* Individual falling column */
.column {
    position: absolute;
    top: -120%;                     /* start above the viewport */
    white-space: nowrap;
    animation-name: fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    /* Each column gets its own speed & delay via CSS custom properties
       (set in script.js) */
    animation-duration: var(--duration);
    animation-delay: var(--delay);
}

/* Falling animation – moves the whole column downwards */
@keyframes fall {
    0%   { transform: translateY(0); }
    100% { transform: translateY(200vh); } /* far enough to disappear */
}

/* -------------------------------------------------
   The “404” text
------------------------------------------------- */
.error-code {
    position: absolute;
    inset: 50% auto auto 50%;        /* centre horizontally & vertically */
    transform: translate(-50%, -50%);
    font-size: clamp(8rem, 20vw, 15rem);
    color: #fff;                    /* white */
    opacity: 0;
    z-index: 2;

    /* Fade‑in after a short pause (5 s) */
    animation: showCode 1.5s forwards;
    animation-delay: 10s;
}

/* Simple fade‑in */
@keyframes showCode {
    to { opacity: 0.5; }
}