/* ==============================================================
   GLOBAL RESET & BASIC SETTINGS
   ============================================================== */
*,
*::before,
*::after { box-sizing:border-box; margin:0; padding:0; }

html, body { height:100%; overflow:hidden; background:#111;
             font-family:"Courier New",Courier,monospace; color: #0c0;}
button { background:#0a0; color:#111; border:none; padding:.4rem .8rem;
          cursor:pointer; font-weight:bold; border-radius:.2rem;
          transition:background .2s; }
button:hover { background:#0c0; }

/* ==============================================================
   STAGE – monitor, chassis, floppy emoji
   ============================================================== */
#stage {
    position:relative;
    width:100%; height:100%;
    display:flex; flex-direction:column; align-items:center;
}

/* ------------------- MONITOR (4:3) -------------------------- */
#monitor {
    width:320px;
    height:calc(320px * 3 / 4);      /* 4:3 aspect */
    background:#222;
    border:4px solid #555;
    border-radius:6px 6px 0 0;
    display:flex; align-items:center; justify-content:center;
}
#monitor .screen {
    width:92%; height:84%;
    background:#000;
    box-shadow: inset 0 0 8px rgba(0,255,0,.2);
}

/* ------------------- CHASSIS (16:9, half‑height) ------------ */
#chassis {
    width:320px;
    height:calc(320px * 9 / 16 / 2);   /* 16:9 but half the height */
    background:#777;
    border:4px solid #555;
    border-radius:0 0 6px 6px;
    position:relative;
    margin-top:-2px;                    /* slight overlap with monitor */
}

/* Slot – visual only (kept for reference) */
#chassis .slot {
    width:33%;                         /* ~1/3 of chassis width */
    height:4px;
    background:#444;
    position:absolute;
    right:5%;                          /* right‑aligned */
    top:50%;
    transform:translateY(-50%);
}

/* ------------------- DRAGGABLE FLOPPY EMOJI ---------------- */
#floppy-emoji {
    font-size:2.5rem;
    cursor:grab;
    position:absolute;
    bottom:30px; right:30px;
    user-select:none;
}

/* Hint that monitor & chassis are drop targets */
.droppable { cursor:pointer; }

/* ==============================================================
   ZOOM TO FULL‑SCREEN (triggered after drop)
   ============================================================== */
.zoomed #stage {
    /* Scale the whole stage so that the monitor + chassis fill the viewport */
    transform-origin: top center;
    animation: enlarge 2s forwards ease-in-out;
}

/* Enlarge animation – compute a large enough scale (≈3) */
@keyframes enlarge {
    to { transform: scale(10) translateY(-100px); }
}

/* When zoom is finished, hide the stage and show the inner site */
/* .zoomed #stage { visibility:hidden; } */
.zoomed #innerSite { visibility:visible; opacity:1; }

/* --------------------------------------------------------------
   FULL‑SCREEN TYPEWRITER (innerSite)
   -------------------------------------------------------------- */
#innerSite {
    position:absolute; inset:0;
    top: 10px;
    left: 10px;
    background:#000;               /* black screen */
    color:#0f0;                    /* classic green text */
    display:flex; align-items:left; justify-content:left;
    padding:2rem;
    visibility:hidden;             /* shown only after zoom */
    opacity:0;
    transition:opacity 10s;
}

/* Preformatted text keeps the line breaks */
#typewriter { white-space:pre-wrap; font-size:1.1rem; line-height:1.4; }

/* --------------------------------------------------------------
   KEYFRAMES (none needed for rotation any more)
   -------------------------------------------------------------- */



/* -------------------------- Weird Footer ----------------------*/
footer {
        position: absolute;
        bottom:0;
        background: #FFF;
        text-align: center;
        clear: both;
        display: block;
        padding:10px;
        border: 2px dashed red;
        z-index: 20;
    }
footer a:hover {
    display: inline-block;
    animation: 0.2s infinite alternate linear wiggle;

    background: linear-gradient(in hsl longer hue 45deg, hsl(0deg, 75%, var(--lightness)) 10%, hsl(0deg, 75%, var(--lightness)) 90%);
    background-clip: text;
    color: transparent;
}
    @keyframes wiggle {
        from {
            transform: skewX(-8deg);
        }
        to {
            transform: skewX(8deg);
        }
    }