/* =========================
   BASIC SETUP
   ========================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Chakra Petch", sans-serif;
    color: white;

    background:
        radial-gradient(
            circle at 50% 40%,
            #344b82 0%,
            #17234d 38%,
            #070914 78%,
            #020208 100%
        );

    overflow-x: hidden;
}


/* =========================
   MAIN WEBSITE
   ========================= */

.site {
    position: relative;
    z-index: 4;

    width: 35%;
    min-height: 95vh;
    margin: 2vh auto;
    padding: 15px;

    background: rgba(5, 14, 22, 0.90);

     border: 3px solid rgba(67, 194, 179, 0.65);
    border-radius: 26px;

    box-shadow:
        0 0 20px rgba(76, 166, 155, 0.3),
        inset 0 2px 6px rgba(140, 210, 200, 0.25),
        inset -4px -4px 10px rgba(76, 166, 155, 0.15);
}


/* =========================
   LAYERED CRT BORDER
   ========================= */

.site::before {
    content: "";

    position: absolute;
    inset: -8px;

    border: 1px solid rgba(67, 194, 179, 0.5);
    border-radius: 32px;

    pointer-events: none;
}

.site::after {
    content: "";

    position: absolute;
    inset: -16px;

    border: 1px solid rgba(11, 197, 175, 0.2);
    border-radius: 38px;

    pointer-events: none;
}



/* =========================
   CONTENT BOXES
   ========================= */

.box,
.intro {
    position: relative;
    padding: 20px;
    margin-bottom: 20px;
    font-family: "Chakra Petch", sans-serif;

    background:
        linear-gradient(
            135deg,
            rgba(170, 219, 235, 0.3),
            rgba(226, 161, 197, 0.22),
            rgba(205,230,250,0.28),
            rgba(215,245,225,0.20),
            rgba(245,235,200,0.18),
            rgba(220,210,240,0.24)
        );

    border: 2px dashed #ff9ee4;
    border-radius: 4px;

    box-shadow:
        0 0 12px rgba(220,235,240,0.2),
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 0 20px rgba(210,220,230,0.12);

    animation: introBorderCycle 3s steps(1) infinite;
}

.intro::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px dashed #9ee4ff;
    border-radius: 2px;
    pointer-events: none;
    animation: introBorderCycle2 3s steps(1) infinite;
}

@keyframes introBorderCycle {
    0%, 24%   { border-color: #ff9ee4; }
    25%, 49%  { border-color: #a8ffcf; }
    50%, 74%  { border-color: #fff59e; }
    75%, 100% { border-color: #d9b3ff; }
}

@keyframes introBorderCycle2 {
    0%, 24%   { border-color: #9ee4ff; }
    25%, 49%  { border-color: #ff9ee4; }
    50%, 74%  { border-color: #d9b3ff; }
    75%, 100% { border-color: #fff59e; }
}




.username {
    font-style: italic;
}


/* =========================
   CONTENT COLORS
   ========================= */

h1,
h2 {
    color: #eafaff;

    text-shadow:
        0 0 6px rgba(210, 245, 255, 0.6),
        0 0 14px rgba(150, 220, 235, 0.25);
}

p {
    color: #dce9e6;
}


/* IRIDESCENT WELCOME */
.welcome {
    height: 40px;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            105deg,
            rgba(210, 220, 225, 0.8),
            rgba(255, 210, 225, 0.65),
            rgba(210, 235, 255, 0.75),
            rgba(220, 255, 235, 0.65),
            rgba(255, 240, 190, 0.6),
            rgba(220, 210, 245, 0.7),
            rgba(215, 225, 230, 0.8)
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        0 0 10px rgba(255,255,255,0.4),
        inset 0 1px 0 white,
        inset 0 -3px 6px rgba(80,90,100,0.15);

    color: #26323a;
    font-weight: bold;
    letter-spacing: 2px;

    text-shadow: 0 1px 1px rgba(255,255,255,0.9);
}


/* HEADER */

header {
    position: relative;
    min-height: 260px;
    padding: 25px 20px;
    text-align: initial;
}

#siteTitle {
    position: absolute;
    top: 10px;
    right: 20px;
    text-align: right;
    line-height: 0.95;
    margin: 0;
    font-size: 90px;
    letter-spacing: 2px;
}



#siteTitle span {
    font-family: 'Matemasie', sans-serif;
}

.corner-quote {
    position: absolute;
    bottom: 10px;
    left: 20px;
    text-align: left;
    margin: 0;
}

/* IRIDESCENT WINDOWS-STYLE BUTTONS */
nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    width: 100%;
    margin: 0 auto;
}

nav a {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 90px;
    height: 38px;
    padding: 0 18px;

    background:
        linear-gradient(
            120deg,
            rgba(205,215,220,0.9),
            rgba(245,215,225,0.72),
            rgba(205,225,245,0.8),
            rgba(215,240,225,0.72),
            rgba(245,235,200,0.7),
            rgba(220,210,240,0.75),
            rgba(205,215,220,0.9)
        );

    border: 1px solid white;
    border-radius: 10px;

    color: #27343c;
    text-decoration: none;
    font-weight: bold;

    box-shadow:
        0 1px 5px rgba(0,0,0,0.3),
        inset 0 1px 0 white,
        inset 0 -2px 4px rgba(100,110,120,0.15);

    text-shadow: 0 1px 1px rgba(255,255,255,0.8);

    transition: 0.15s ease;
}

nav a:hover {
    background:
        linear-gradient(
            110deg,
            rgba(240,210,225,0.9),
            rgba(205,230,250,0.95),
            rgba(215,245,225,0.9),
            rgba(250,235,195,0.9),
            rgba(220,210,245,0.9)
        );

    color: #18242b;
    border-color: white;

    box-shadow:
        0 0 12px rgba(235,240,255,0.7),
        inset 0 1px 0 white;

    transform: translateY(-2px);
}



/* IRIDESCENT GLASS INTRO */
.intro {
    padding: 20px;
    margin-bottom: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(205,220,230,0.30),
            rgba(250,215,225,0.22),
            rgba(205,230,250,0.28),
            rgba(215,245,225,0.20),
            rgba(245,235,200,0.18),
            rgba(220,210,240,0.24)
        );

    border: 1px solid rgba(245,250,250,0.85);

    box-shadow:
        0 0 12px rgba(220,235,240,0.2),
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 0 20px rgba(210,220,230,0.12);
}


/* CONTENT */

.content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    align-items: start;
}

/* HELLO */
.intro {
    grid-column: 1;
    grid-row: 1;
    min-height: 150px;
}

/* CLOCK + CHATBOX */
.right-column {
    grid-column: 2;
    grid-row: 1 / 3;
}

/* NOW PLAYING + PLAYLIST */
.left-column {
    grid-column: 1;
    grid-row: 2;
}

/* RANDOM STUFF */
.center {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-start;
}

.intro {
    min-height: 150px;
}

.right-column .box {
    min-height: 70px;
}

/* IRIDESCENT CONTENT BOXES */
.box {
    min-height: 120px;
    margin-bottom: 15px;
    padding: 18px;

    background:
        linear-gradient(
            125deg,
            rgba(185,200,210,0.25),
            rgba(240,205,220,0.18),
            rgba(190,220,245,0.24),
            rgba(205,235,215,0.17),
            rgba(245,230,195,0.16),
            rgba(215,205,240,0.20)
        );

    border: 1px solid rgba(235,242,242,0.8);

    box-shadow:
        0 0 9px rgba(220,230,235,0.16),
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 0 18px rgba(200,210,220,0.1);
}

.box h2 {
    margin-top: 0;
    font-size: 18px;
}

.big-box {
    min-height: 450px;
}


/* FOOTER */

footer {
    margin-top: 20px;
    padding: 20px;

    text-align: center;

    background: rgba(85, 120, 110, 0.35);

    border: 1px solid rgba(205, 235, 232, 0.7);

    color: #e8f7f7;

    box-shadow:
        0 0 8px rgba(180, 225, 225, 0.12),
        inset 0 0 14px rgba(120, 170, 155, 0.06);
}


/* =========================
   STAR FIELD
   ========================= */

.stars {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    pointer-events: none;
    z-index: 0;
}


/* STAR ANIMATION */

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}


/* LARGE STARS */

.star {
    position: absolute;

    color: white;
    font-size: 18px;

    animation: twinkle 3s infinite ease-in-out;
}

.star1  { top: 12%; left: 15%; font-size: 22px; animation-delay: 0s; }
.star2  { top: 20%; left: 35%; font-size: 9px;  animation-delay: 1s; }
.star3  { top: 15%; left: 72%; font-size: 15px; animation-delay: 2s; }
.star4  { top: 30%; left: 85%; font-size: 25px; animation-delay: 0.5s; }
.star5  { top: 42%; left: 10%; font-size: 7px;  animation-delay: 1.7s; }
.star6  { top: 38%; left: 63%; font-size: 12px; animation-delay: 2.5s; }
.star7  { top: 55%; left: 90%; font-size: 19px; animation-delay: 1s; }
.star8  { top: 65%; left: 18%; font-size: 6px;  animation-delay: 2.2s; }
.star9  { top: 72%; left: 76%; font-size: 14px; animation-delay: 0.3s; }
.star10 { top: 85%; left: 45%; font-size: 21px; animation-delay: 1.5s; }

.star11 { top: 8%;  left: 52%; font-size: 13px; animation-delay: 1.2s; }
.star12 { top: 27%; left: 27%; font-size: 8px;  animation-delay: 2.7s; }
.star13 { top: 34%; left: 76%; font-size: 11px; animation-delay: 0.8s; }
.star14 { top: 47%; left: 48%; font-size: 16px; animation-delay: 1.9s; }
.star15 { top: 61%; left: 7%;  font-size: 10px; animation-delay: 0.4s; }
.star16 { top: 79%; left: 64%; font-size: 12px; animation-delay: 2.8s; }

.star17 { top: 6%;  left: 18%; font-size: 11px; animation-delay: 1.4s; }
.star18 { top: 18%; left: 44%; font-size: 17px; animation-delay: 0.6s; }
.star19 { top: 24%; left: 74%; font-size: 9px;  animation-delay: 2.1s; }
.star20 { top: 31%; left: 31%; font-size: 14px; animation-delay: 1.1s; }
.star21 { top: 35%; left: 68%; font-size: 20px; animation-delay: 2.9s; }
.star22 { top: 43%; left: 52%; font-size: 8px;  animation-delay: 0.2s; }
.star23 { top: 48%; left: 91%; font-size: 13px; animation-delay: 1.8s; }
.star24 { top: 54%; left: 14%; font-size: 16px; animation-delay: 2.4s; }
.star25 { top: 57%; left: 47%; font-size: 10px; animation-delay: 0.9s; }
.star26 { top: 64%; left: 73%; font-size: 12px; animation-delay: 2.6s; }

.star27 { top: 67%; left: 26%; font-size: 19px; animation-delay: 1.3s; }
.star28 { top: 70%; left: 88%; font-size: 9px;  animation-delay: 0.5s; }
.star29 { top: 75%; left: 51%; font-size: 15px; animation-delay: 2s; }
.star30 { top: 80%; left: 17%; font-size: 12px; animation-delay: 1.6s; }
.star31 { top: 82%; left: 82%; font-size: 16px; animation-delay: 0.7s; }
.star32 { top: 88%; left: 39%; font-size: 9px;  animation-delay: 2.3s; }
.star33 { top: 90%; left: 69%; font-size: 13px; animation-delay: 1s; }
.star34 { top: 93%; left: 29%; font-size: 18px; animation-delay: 2.8s; }
.star35 { top: 96%; left: 76%; font-size: 10px; animation-delay: 0.4s; }
.star36 { top: 98%; left: 57%; font-size: 14px; animation-delay: 1.9s; }


/* TINY ROUND STARS */

.dot {
    position: absolute;

    color: white;

    animation: twinkle 4s infinite ease-in-out;
}

.dot1  { top: 5%;  left: 8%;  font-size: 5px; }
.dot2  { top: 9%;  left: 29%; font-size: 3px; }
.dot3  { top: 13%; left: 91%; font-size: 4px; }
.dot4  { top: 23%; left: 8%;  font-size: 3px; }
.dot5  { top: 25%; left: 61%; font-size: 5px; }
.dot6  { top: 33%; left: 43%; font-size: 3px; }
.dot7  { top: 36%; left: 94%; font-size: 4px; }
.dot8  { top: 44%; left: 25%; font-size: 3px; }
.dot9  { top: 49%; left: 72%; font-size: 5px; }
.dot10 { top: 53%; left: 37%; font-size: 3px; }

.dot11 { top: 58%; left: 83%; font-size: 4px; }
.dot12 { top: 63%; left: 32%; font-size: 3px; }
.dot13 { top: 68%; left: 55%; font-size: 5px; }
.dot14 { top: 71%; left: 92%; font-size: 3px; }
.dot15 { top: 76%; left: 12%; font-size: 4px; }
.dot16 { top: 81%; left: 27%; font-size: 3px; }
.dot17 { top: 87%; left: 71%; font-size: 5px; }
.dot18 { top: 91%; left: 18%; font-size: 3px; }
.dot19 { top: 94%; left: 52%; font-size: 4px; }
.dot20 { top: 97%; left: 88%; font-size: 3px; }

.dot21 { top: 3%;  left: 42%; font-size: 3px; }
.dot22 { top: 7%;  left: 67%; font-size: 4px; }
.dot23 { top: 11%; left: 23%; font-size: 2px; }
.dot24 { top: 17%; left: 48%; font-size: 3px; }
.dot25 { top: 19%; left: 81%; font-size: 2px; }
.dot26 { top: 29%; left: 15%; font-size: 4px; }
.dot27 { top: 32%; left: 58%; font-size: 2px; }
.dot28 { top: 39%; left: 35%; font-size: 4px; }
.dot29 { top: 41%; left: 88%; font-size: 2px; }
.dot30 { top: 46%; left: 6%;  font-size: 3px; }

.dot31 { top: 51%; left: 57%; font-size: 2px; }
.dot32 { top: 56%; left: 23%; font-size: 4px; }
.dot33 { top: 59%; left: 70%; font-size: 3px; }
.dot34 { top: 66%; left: 5%;  font-size: 2px; }
.dot35 { top: 69%; left: 43%; font-size: 3px; }
.dot36 { top: 74%; left: 84%; font-size: 2px; }
.dot37 { top: 78%; left: 38%; font-size: 4px; }
.dot38 { top: 83%; left: 8%;  font-size: 3px; }
.dot39 { top: 86%; left: 57%; font-size: 2px; }
.dot40 { top: 89%; left: 79%; font-size: 4px; }

.dot41 { top: 92%; left: 34%; font-size: 2px; }
.dot42 { top: 95%; left: 63%; font-size: 3px; }
.dot43 { top: 14%; left: 57%; font-size: 2px; }
.dot44 { top: 28%; left: 93%; font-size: 3px; }
.dot45 { top: 37%; left: 4%;  font-size: 2px; }
.dot46 { top: 52%; left: 79%; font-size: 3px; }
.dot47 { top: 62%; left: 96%; font-size: 2px; }
.dot48 { top: 73%; left: 61%; font-size: 3px; }
.dot49 { top: 84%; left: 47%; font-size: 2px; }
.dot50 { top: 96%; left: 14%; font-size: 3px; }


/* =========================
   SHOOTING STARS
   ========================= */

.shooting-star {
    position: fixed;

    width: 90px;
    height: 2px;

    background: white;
    border-radius: 50%;

    box-shadow:
        0 0 8px white,
        0 0 18px white;

    transform: rotate(-35deg);
    animation: shoot 1.2s linear forwards;

    z-index: 0;
    pointer-events: none;
}

@keyframes shoot {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(-35deg);
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-250px, 250px) rotate(-35deg);
    }
}


/* =========================
   COMETS
   ========================= */

.comet {
    position: fixed;

    width: 12px;
    height: 12px;

    border-radius: 50%;
    background: white;

    box-shadow:
        0 0 8px white,
        0 0 20px white,
        0 0 35px rgba(255, 255, 255, 0.7);

    z-index: 0;
    isolation: isolate;
    pointer-events: none;

    animation: cometMove 5s linear forwards;
}

.comet::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 4px;

    left: 5px;
    top: 4px;

    background:
        linear-gradient(
            to right,
            rgba(255, 255, 255, 0.7),
            transparent
        );

    filter: blur(2px);
    z-index: -1;
}

@keyframes cometMove {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(-35deg);
    }

    10% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-350px, 350px) rotate(-35deg);
    }
}


/* =========================
   CONSTELLATIONS
   ========================= */

.constellation {
    position: fixed;

    width: 180px;
    height: 180px;

    opacity: 0.5;

    z-index: 0;
    pointer-events: none;
}

.constellation svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.constellation line {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 1;
}

.constellation circle {
    fill: white;
    filter: drop-shadow(0 0 5px white);
}


/* ORION */

.orion {
    bottom: 8%;
    right: 10%;
}

.orion circle:nth-of-type(1) { cx: 42;  cy: 25;  r: 3; }
.orion circle:nth-of-type(2) { cx: 105; cy: 32;  r: 3; }
.orion circle:nth-of-type(3) { cx: 52;  cy: 75;  r: 3; }
.orion circle:nth-of-type(4) { cx: 76;  cy: 78;  r: 2.5; }
.orion circle:nth-of-type(5) { cx: 101; cy: 74;  r: 3; }
.orion circle:nth-of-type(6) { cx: 35;  cy: 125; r: 3; }
.orion circle:nth-of-type(7) { cx: 112; cy: 128; r: 3; }


/* CASSIOPEIA */

.cassiopeia {
    top: 20%;
    right: 8%;
}

.cassiopeia circle:nth-of-type(1) { cx: 20;  cy: 90; r: 3; }
.cassiopeia circle:nth-of-type(2) { cx: 52;  cy: 48; r: 3; }
.cassiopeia circle:nth-of-type(3) { cx: 88;  cy: 80; r: 3; }
.cassiopeia circle:nth-of-type(4) { cx: 123; cy: 42; r: 3; }
.cassiopeia circle:nth-of-type(5) { cx: 160; cy: 82; r: 3; }


/* GEMINI */

.gemini {
    top: 15%;
    left: 7%;
}

.gemini circle:nth-of-type(1) { cx: 48;  cy: 25;  r: 3; }
.gemini circle:nth-of-type(2) { cx: 42;  cy: 60;  r: 2.5; }
.gemini circle:nth-of-type(3) { cx: 35;  cy: 95;  r: 2.5; }
.gemini circle:nth-of-type(4) { cx: 108; cy: 30;  r: 3; }
.gemini circle:nth-of-type(5) { cx: 112; cy: 65;  r: 2.5; }
.gemini circle:nth-of-type(6) { cx: 118; cy: 100; r: 2.5; }


/* =========================
   GALAXIES
   ========================= */

.galaxies {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.galaxy {
    position: absolute;

    width: 150px;
    height: 70px;

    border-radius: 50%;
    opacity: 0.38;
    filter: blur(5px);

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(190, 140, 255, 0.7) 18%,
            rgba(90, 130, 255, 0.5) 40%,
            rgba(255, 100, 190, 0.25) 58%,
            transparent 75%
        );

    box-shadow:
        0 0 20px rgba(170, 130, 255, 0.5),
        0 0 45px rgba(90, 140, 255, 0.25);
}

.galaxy1 {
    top: 72%;
    left: 7%;
    transform: rotate(-25deg);
}

.galaxy2 {
    top: 58%;
    right: 10%;

    width: 180px;
    height: 75px;

    transform: rotate(30deg);
}

.galaxy3 {
    top: 38%;
    left: 72%;

    width: 110px;
    height: 50px;

    transform: rotate(-10deg);
}


/* =========================
   NEBULAE
   ========================= */

.nebulae {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.nebula {
    position: absolute;

    border-radius: 50%;
    filter: blur(18px);
    opacity: 0.22;
    mix-blend-mode: screen;
}


/* PURPLE + BLUE */

.nebula1 {
    width: 280px;
    height: 150px;

    top: 12%;
    left: 25%;

    background:
        radial-gradient(
            ellipse,
            rgba(180, 90, 255, 0.8),
            rgba(70, 100, 255, 0.4),
            transparent 70%
        );

    transform: rotate(-20deg);
}


/* PINK + PURPLE */

.nebula2 {
    width: 240px;
    height: 130px;

    top: 48%;
    left: 8%;

    background:
        radial-gradient(
            ellipse,
            rgba(255, 80, 190, 0.7),
            rgba(150, 70, 255, 0.4),
            transparent 70%
        );

    transform: rotate(25deg);
}


/* BLUE + CYAN */

.nebula3 {
    width: 300px;
    height: 160px;

    bottom: 10%;
    right: 20%;

    background:
        radial-gradient(
            ellipse,
            rgba(80, 180, 255, 0.7),
            rgba(100, 80, 255, 0.4),
            transparent 70%
        );

    transform: rotate(-15deg);
}


/* =========================
   PLANETS
   ========================= */

.planets {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.planet {
    position: absolute;

    border-radius: 50%;

    box-shadow:
        0 0 12px rgba(255, 255, 255, 0.25),
        0 0 30px rgba(120, 150, 255, 0.2);
}


/* MARS-LIKE PLANET */

.planet1 {
    width: 55px;
    height: 55px;

    top: 18%;
    right: 20%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #925a2d,
            #7a3620 30%,
            #491a13 60%,
            #30141f 100%
        );

    box-shadow:
        0 0 12px rgba(255, 180, 140, 0.2),
        0 0 30px rgba(190, 80, 60, 0.15);
}


/* DARK BLUE PLANET */

.planet2 {
    width: 25px;
    height: 25px;

    top: 55%;
    left: 5%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #9eb9d8,
            #3d648f 35%,
            #172f55 70%,
            #07101f 100%
        );

    box-shadow:
        0 0 10px rgba(80, 130, 190, 0.25),
        0 0 20px rgba(40, 80, 150, 0.15);
}


/* RINGED PLANET */

.planet3 {
    width: 48px;
    height: 48px;

    bottom: 17%;
    right: 22%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #fff0d0,
            #d58f9f 35%,
            #754c70 70%,
            #21152d 100%
        );
}


/* PLANET RING - BACK */

.planet3::before {
    content: "";

    position: absolute;

    width: 85px;
    height: 22px;

    top: 13px;
    left: -19px;

    border: 3px solid rgba(240, 210, 255, 0.55);
    border-radius: 50%;

    transform: rotate(-18deg);
    z-index: -1;
}


/* PLANET RING - FRONT */

.planet3::after {
    content: "";

    position: absolute;

    width: 85px;
    height: 22px;

    top: 13px;
    left: -19px;

    border: 3px solid rgba(240, 210, 255, 0.55);
    border-radius: 50%;

    transform: rotate(-18deg);

    clip-path: inset(50% 0 0 0);
}


/* =========================
   BLACK HOLES
   ========================= */

.black-holes {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.black-hole {
    position: absolute;

    width: 75px;
    height: 75px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #000 0%,
            #000 38%,
            rgba(40, 15, 70, 0.9) 45%,
            rgba(160, 70, 255, 0.6) 55%,
            rgba(60, 100, 255, 0.25) 68%,
            transparent 75%
        );

    filter: blur(1px);

    box-shadow:
        0 0 15px rgba(150, 80, 255, 0.4),
        0 0 35px rgba(80, 100, 255, 0.2);
}


/* BLACK HOLE 1 */

.black-hole1 {
    top: 15%;
    left: 20%;

    transform: rotate(-15deg);
}


/* BLACK HOLE 2 */

.black-hole2 {
    bottom: 18%;
    right: 4%;

    width: 55px;
    height: 55px;
}


/* ACCRETION DISK */

.black-hole::before {
    content: "";

    position: absolute;

    width: 125px;
    height: 42px;

    top: 17px;
    left: -25px;

    border: 5px solid rgba(120, 70, 170, 0.45);
    border-radius: 50%;

    box-shadow:
    0 0 8px rgba(160, 110, 200, 0.55),
    0 0 18px rgba(100, 80, 180, 0.45),
    0 0 35px rgba(60, 80, 140, 0.2);

    transform: rotate(-15deg);

    animation: blackHoleGlow 6s ease-in-out infinite;
}


/* INNER LIGHT */

.black-hole::after {
    content: "";

    position: absolute;

    width: 95px;
    height: 25px;

    top: 25px;
    left: -10px;

border: 3px solid rgba(190, 150, 210, 0.45);
    border-radius: 50%;

    box-shadow:
    0 0 8px rgba(190, 140, 210, 0.5),
    0 0 18px rgba(120, 90, 170, 0.35);

    transform: rotate(-15deg);

    animation: blackHoleGlow 3s ease-in-out infinite reverse;
}


/* SMALLER DISK FOR BLACK HOLE 2 */

.black-hole2::before {
    width: 95px;
    height: 32px;

    top: 12px;
    left: -20px;
}

.black-hole2::after {
    width: 72px;
    height: 20px;

    top: 17px;
    left: -8px;
}


/* BLACK HOLE GLOW */

@keyframes blackHoleGlow {
    0%, 100% {
        opacity: 0.55;
        filter: brightness(0.8);
    }

    50% {
        opacity: 1;
        filter: brightness(1.3);
    }
}


/* =========================
   SATELLITES
   ========================= */

.satellites {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.satellite {
    position: absolute;

    width: 70px;
    height: 45px;

    transform: rotate(-18deg);
}


/* SPACECRAFT BODY */

.satellite-body {
    position: absolute;

    width: 24px;
    height: 18px;

    top: 13px;
    left: 23px;

    background:
        linear-gradient(
            135deg,
            #d9d9e5,
            #77788c,
            #292b3d
        );

    border: 1px solid rgba(255, 255, 255, 0.5);

    box-shadow:
        0 0 8px rgba(200, 210, 255, 0.25);
}


/* SOLAR PANELS */

.satellite-panel {
    position: absolute;

    width: 22px;
    height: 14px;

    top: 15px;

    background:
        repeating-linear-gradient(
            90deg,
            #263d70 0px,
            #263d70 4px,
            #5270a8 5px,
            #263d70 6px
        );

    border: 1px solid rgba(180, 200, 255, 0.5);
}

.left-panel {
    left: 0;
}

.right-panel {
    right: 0;
}


/* ANTENNA */

.satellite-antenna {
    position: absolute;

    width: 1px;
    height: 18px;

    left: 34px;
    top: -5px;

    background: rgba(255, 255, 255, 0.7);

    transform: rotate(25deg);
}


/* SATELLITE POSITIONS */

.satellite1 {
    top: 38%;
    left: 90%;
}

.satellite2 {
    top: 68%;
    left: 20%;

    transform: rotate(25deg) scale(0.7);
}


/* =========================
   PIXEL CLOUDS
   ========================= */

.clouds {
    position: fixed;
    inset: 0;

    overflow: hidden;
    pointer-events: none;

    z-index: 0;
}


/* The moving cloud bank */

.cloud-track {
    position: absolute;

    display: flex;
    width: max-content;

    will-change: transform;
}


/* One repeated section */

.cloud-row {
    display: flex;

    flex-shrink: 0;

    width: max-content;
}


/* Individual clouds */

.cloud {
    display: block;

    height: auto;

    flex-shrink: 0;

    margin-right: -300px;

    filter:
        brightness(0.7)
        contrast(1.15);

    opacity: 0.9;
}


/* =========================
   TOP CLOUDS
   ========================= */

.cloud-track.top {
    top: -200px;

    animation:
        cloudTopLoop 180s linear infinite;
}

.cloud-track.top .cloud {
    transform: scaleY(-1);
}


/* =========================
   BOTTOM CLOUDS
   ========================= */

.cloud-track.bottom {
    bottom: -200px;

    animation:
        cloudBottomLoop 200s linear infinite;
}


/* =========================
   SEAMLESS LOOPS
   ========================= */

@keyframes cloudTopLoop {

    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes cloudBottomLoop {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* =========================
   ANGEL WINGS
   ========================= */

.wings {
    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 1;
}

.wing {
    position: absolute;

    width: 32vw;
    height: auto;

    opacity: 0.85;

    filter:
        drop-shadow(0 0 8px rgba(255,255,255,0.35))
        drop-shadow(0 0 20px rgba(190,170,255,0.4))
        drop-shadow(0 0 45px rgba(150,120,255,0.25));

    animation: wingGlow 5s ease-in-out infinite;
}

@keyframes wingGlow {

    0%, 100% {
        filter:
            drop-shadow(0 0 10px rgba(255,255,255,0.7))
            drop-shadow(0 0 24px rgba(255,255,255,0.6))
            drop-shadow(0 0 45px rgba(190,225,255,0.2));
    }

    50% {
        filter:
            drop-shadow(0 0 12px rgba(255,255,255,0.95))
            drop-shadow(0 0 32px rgba(255,255,255,0.85))
            drop-shadow(0 0 60px rgba(190,225,255,0.3));
    }
}

.left-wing {
    left: 5vw;
    top: 8%;

    transform-origin: right center;

    animation: leftWingFlap 7s ease-in-out infinite;
}

.right-wing {
    right: 5vw;
    top: 8%;

    transform-origin: left center;

    animation: rightWingFlap 7s ease-in-out infinite;
}


@keyframes leftWingFlap {

    0%, 100% {
        transform: rotate(8deg);
    }

    50% {
        transform: rotate(-5deg);
    }
}


@keyframes rightWingFlap {

    0%, 100% {
        transform: rotate(-8deg);
    }

    50% {
        transform: rotate(5deg);
    }
}


/* =========================
   LIGHTNING FLASH
   ========================= */

.lightning {
    position: fixed;
    inset: 0;

    background:
        radial-gradient(
            ellipse at 50% 45%,
            rgba(255,255,255,0.65),
            rgba(180,200,255,0.3) 35%,
            rgba(80,100,180,0.15) 65%,
            transparent 85%
        );

    opacity: 0;

    pointer-events: none;

    z-index: 1;

    mix-blend-mode: screen;
}

@keyframes lightningFlash {

    0% {
        opacity: 0;
    }

    8% {
        opacity: 0.9;
    }

    12% {
        opacity: 0.15;
    }

    17% {
        opacity: 0.65;
    }

    23% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


/* =========================
   LIGHTNING BOLT
   ========================= */

.lightning-bolt {
    position: absolute;

    top: 0;
    left: 42%;

    width: 220px;
    height: 65vh;

    background: white;

    clip-path: polygon(
        48% 0%,
        62% 0%,
        55% 16%,
        72% 16%,
        52% 34%,
        68% 34%,
        38% 58%,
        50% 58%,
        20% 100%,
        31% 62%,
        15% 62%,
        43% 38%,
        28% 38%,
        48% 20%,
        35% 20%
    );

    filter:
        drop-shadow(0 0 6px white)
        drop-shadow(0 0 18px rgba(180,200,255,1));

    opacity: 0;

    z-index: 2;
}

@keyframes lightningBolt {

    0% {
        opacity: 0;
    }

    8% {
        opacity: 0.95;
    }

    12% {
        opacity: 0;
    }

    17% {
        opacity: 0.8;
    }

    22% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


/* =========================
   ANALOG GLITCH OVERLAY
   ========================= */

/* =========================
   ANALOG TV GLITCH
   ========================= */

/* =========================
   ANALOG TV GLITCH
   ========================= */

.glitch-overlay {
    position: fixed;
    inset: 0;

    pointer-events: none;
    z-index: 3;

    opacity: 0.65;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.20) 0px,
            rgba(255,255,255,0.20) 1px,
            transparent 1px,
            transparent 4px
        );

    mix-blend-mode: screen;

    animation:
        tvScanlines 5s linear infinite;
}


/* MOVING SCANLINES */

@keyframes tvScanlines {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 160px;
    }
}


/* RANDOM SCREEN BRIGHTNESS */

@keyframes screenFlicker {
    0%, 92%, 96%, 100% {
        opacity: 0.65;
    }

    93% {
        opacity: 0.6;
    }

    95% {
        opacity: 0.55;
    }
}

/* =========================
   RGB COLOR DISTORTION
   ========================= */

.glitch-overlay::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,0,70,0.18) 0px,
            transparent 2px,
            rgba(0,200,255,0.18) 4px,
            transparent 6px
        );

    animation: rgbGlitch 5s steps(1) infinite;
}

@keyframes rgbGlitch {
    0%, 85%, 100% {
        transform: translateX(0);
        opacity: 0;
    }

    86% {
        transform: translateX(-10px);
        opacity: 0.5;
    }

    87% {
        transform: translateX(12px);
        opacity: 0.4;
    }

    88% {
        transform: translateX(-6px);
        opacity: 0.55;
    }

    89% {
        transform: translateX(4px);
        opacity: 0.3;
    }

    90% {
        transform: translateX(0);
        opacity: 0;
    }
}

.glitch-blocks {
    position: fixed;
    inset: 0;

    pointer-events: none;
    z-index: 3;

    opacity: 0.5;
    mix-blend-mode: screen;

    background:
        repeating-linear-gradient(
            35deg,
            rgba(255,0,120,0.15) 0px,
            rgba(255,0,120,0.15) 2px,
            transparent 2px,
            transparent 9px
        ),
        repeating-linear-gradient(
            -50deg,
            rgba(0,255,200,0.15) 0px,
            rgba(0,255,200,0.15) 2px,
            transparent 2px,
            transparent 11px
        ),
        repeating-linear-gradient(
            110deg,
            rgba(255,230,0,0.12) 0px,
            rgba(255,230,0,0.12) 2px,
            transparent 2px,
            transparent 13px
        );

    background-size: 180px 180px, 220px 220px, 260px 260px;

    animation:
        glitchLayer1 3s steps(6) infinite,
        glitchLayer2 4s steps(8) infinite reverse,
        glitchLayer3 5s steps(5) infinite;
}

@keyframes glitchLayer1 {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 180px 90px, 0 0, 0 0; }
}

@keyframes glitchLayer2 {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 0 0, -220px 110px, 0 0; }
}

@keyframes glitchLayer3 {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 0 0, 0 0, 130px -260px; }
}

/* =========================
   HORIZONTAL TV TEARING
   ========================= */

.glitch-overlay::after {
    content: "";

    position: absolute;
    left: 0;
    width: 100%;
    height: 14px;

    top: 35%;

    background:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(255,255,255,0.15) 20%,
            rgba(255,0,100,0.18) 45%,
            rgba(0,200,255,0.18) 65%,
            transparent 100%
        );

    opacity: 0;

    animation: screenTear 4.5s steps(1) infinite;
}


@keyframes screenTear {

    0%, 67%, 100% {
        opacity: 0;
        transform: translateX(0);
    }

    68% {
        opacity: 0.8;
        transform: translateX(-30px);
    }

    69% {
        opacity: 0.5;
        transform: translateX(45px);
    }

    70% {
        opacity: 0.9;
        transform: translateX(-15px);
    }

    71% {
        opacity: 0;
        transform: translateX(0);
    }
}


.glitch-skip {
    position: fixed;
    inset: 0;

    pointer-events: none;
    z-index: 3;

    opacity: 0.35;
    mix-blend-mode: screen;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,0,120,0.14) 0px,
            rgba(255,0,120,0.14) 4px,
            transparent 4px,
            transparent 16px,
            rgba(0,255,200,0.14) 16px,
            rgba(0,255,200,0.14) 19px,
            transparent 19px,
            transparent 34px
        );

    background-size: 100% 200px;

    animation: glitchSkipMove 1.8s steps(9) infinite;
}

@keyframes glitchSkipMove {
    0% {
        background-position: 0 0;
    }

    20% {
        background-position: 0 140px;
    }

    35% {
        background-position: 0 40px;
    }

    50% {
        background-position: 0 300px;
    }

    68% {
        background-position: 0 90px;
    }

    82% {
        background-position: 0 260px;
    }

    100% {
        background-position: 0 200px;
    }
}


/* CD PLAYER */

.cd-player {
    position: relative;
    margin-top: 15px;
    padding: 20px;
    width: 220px;

    background:
        linear-gradient(
            135deg,
            rgba(220, 225, 230, 0.85),
            rgba(245, 220, 230, 0.75),
            rgba(215, 230, 245, 0.85),
            rgba(220, 240, 225, 0.75),
            rgba(245, 235, 205, 0.75),
            rgba(220, 215, 240, 0.8)
        );

    border: 2px solid rgba(255,255,255,0.95);
    border-radius: 14px;

    box-shadow:
        0 3px 12px rgba(0,0,0,0.35),
        inset 0 2px 0 rgba(255,255,255,0.9),
        inset 0 -5px 10px rgba(80,90,100,0.15);
}

.cd-screen {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 8px;
    margin-bottom: 15px;

    background: #18201f;
    border: 2px inset #bfc8c5;

    color: #dce9df;

    font-family: monospace;
}

.cd-label {
    font-size: 10px;
    letter-spacing: 2px;
}


.cd-disc {
    width: 150px;
    height: 150px;
    margin: 15px auto;

    border-radius: 50%;

    background:
        conic-gradient(
            #d9d9d9,
            #f4dce8,
            #d7e8f5,
            #d9f0df,
            #f2e7c9,
            #ddd6ee,
            #d9d9d9
        );

    border: 3px solid rgba(255,255,255,0.9);

    box-shadow:
        0 0 10px rgba(255,255,255,0.5),
        inset 0 0 15px rgba(80,80,90,0.25);
}

.cd-center {
    position: relative;
    top: 57px;
    left: 57px;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #d8dde0;
    border: 2px solid #ffffff;

    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.2);
}

.cd-controls {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.cd-volume {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.volume-icon {
    font-size: 12px;
}

#volumeSlider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #303938;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

#volumeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e5e8ea, #dceafa, #eee5ce);
    border: 1px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    cursor: pointer;
}

#volumeSlider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e5e8ea, #dceafa, #eee5ce);
    border: 1px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    cursor: pointer;
}

.cd-button {
    width: 42px;
    height: 32px;

    border: 1px solid white;
    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #e5e8ea,
            #f2dfe8,
            #dceafa,
            #e1f0e4,
            #eee5ce
        );

    color: #27343c;
    font-weight: bold;

    box-shadow:
        0 2px 5px rgba(0,0,0,0.3),
        inset 0 1px white;

    cursor: pointer;
}

.cd-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 0 10px rgba(255,255,255,0.7),
        inset 0 1px white;
}

.cd-progress {
    height: 8px;
    margin-top: 15px;

    background: #303938;
    border: 1px inset #cbd3d0;
}

.cd-progress-fill {
    width: 25%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #cddce5,
            #efd9e6,
            #d8e9ef,
            #dcebdd
        );
}


/* OLD TV */

.tv-player {
    position: relative;
    margin-top: 15px;
    padding: 14px 14px 14px;
    max-width: 300px;
    width: 100%;

    background: #0a0a0a;

    border: 1px solid rgba(200,205,210,0.35);
    border-radius: 18px;

    box-shadow:
        0 4px 14px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -10px 20px rgba(0,0,0,0.4);
}




/* TV BODY */

.tv-body {
    padding: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(90,95,100,0.5),
            rgba(50,54,58,0.6)
        );

    border: 2px solid rgba(180,185,190,0.3);
    border-radius: 15px;

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.15),
        inset 0 -5px 10px rgba(0,0,0,0.3);
}

.tv-title {
    text-align: center;
    margin-bottom: 12px;
    color: #dfe3e6;
    font-weight: bold;
    letter-spacing: 2px;
}


/* SCREEN + CONTROLS */

.tv-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tv-screen {
    position: relative;

    height: 150px;

    background: #10151a;

    border: 7px solid #707879;
    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        inset 0 0 25px rgba(0,0,0,0.95),
        0 2px 5px rgba(0,0,0,0.4);
}

.tv-show {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #dce9df;

    font-family: monospace;
    font-size: 18px;
    letter-spacing: 2px;
}

.tv-static {
    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.08) 0px,
            rgba(255,255,255,0.08) 1px,
            transparent 1px,
            transparent 4px
        );

    opacity: 0.7;
}

.tv-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
}

.tv-static {
    opacity: 0.15;
}


/* TV BUTTON PANEL */

.tv-controls {
    width: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 4px;
}


/* ACTUAL TV-STYLE KNOBS */

.tv-knob {
    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(200,205,210,0.6),
            rgba(80,85,90,0.6) 100%
        );

    border: 2px solid rgba(180,185,190,0.4);

    box-shadow:
        2px 3px 4px rgba(0,0,0,0.4),
        inset 2px 2px 3px rgba(255,255,255,0.2);

    color: #dfe3e6;
    cursor: pointer;
}

.tv-knob span {
    font-size: 10px;
}

/* CHANNEL DISPLAY */

.tv-channel {
    width: 40px;
    padding: 3px;
    text-align: center;

    background: rgba(10,10,12,0.7);
    border: 2px solid rgba(180,185,190,0.3);

    color: #d9e7dd;
    font-family: monospace;
    font-size: 7px;
    letter-spacing: 1px;
}

.tv-channel span {
    font-size: 11px;
}


/* SHOW INFO */

.tv-info {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(180,185,190,0.25);
    color: #dfe3e6;
    font-size: 11px;
}



.clock-box {
    position: relative;

    background:
        linear-gradient(
            135deg,
            rgba(120,125,130,0.35),
            rgba(60,65,70,0.45),
            rgba(30,32,35,0.6)
        );

    backdrop-filter: blur(6px);

    border: 1px solid rgba(200,205,210,0.35);
    border-radius: 16px;

    padding: 18px 15px 22px;
    text-align: center;

    box-shadow:
        0 4px 14px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -10px 20px rgba(0,0,0,0.25);
}

.clock-buttons {
    position: absolute;
    top: 10px;
    right: 12px;

    display: flex;
    gap: 6px;
}

.clock-box h2 {
    color: #dfe3e6;
    font-size: 12px;
    letter-spacing: 3px;
    margin-bottom: 10px;
    text-shadow: 0 0 4px rgba(255,255,255,0.3);
}

.clock-btn {
    background: rgba(180,185,190,0.4);
    border: 1px solid rgba(255,255,255,0.3);
    cursor: pointer;
    transition: 0.15s ease;
}

.clock-btn:hover {
    background: rgba(220,225,230,0.6);
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
}

#clock.rainbow-off {
    animation: none !important;
    color: #39ff14 !important;
    text-shadow: 0 0 5px #39ff14, 0 0 15px #39ff14, 0 0 30px #39ff14 !important;
}



/* the recessed screen */
#clock {
    font-family: 'VT323', monospace;
    font-size: 40px;
    letter-spacing: 6px;

    background: #0a0006;
    border: 2px solid #000;
    border-radius: 4px;

    padding: 10px 6px;
    margin: 0;

    box-shadow:
        inset 0 0 10px rgba(0,0,0,0.9),
        inset 0 2px 4px rgba(0,0,0,0.8);

    animation: rainbowCycle 4s linear infinite;
}

@keyframes rainbowCycle {
    0%   { color: #ff3b30; text-shadow: 0 0 5px #ff3b30, 0 0 15px #ff3b30, 0 0 30px #ff3b30; }
    16%  { color: #ff9500; text-shadow: 0 0 5px #ff9500, 0 0 15px #ff9500, 0 0 30px #ff9500; }
    33%  { color: #ffee00; text-shadow: 0 0 5px #ffee00, 0 0 15px #ffee00, 0 0 30px #ffee00; }
    50%  { color: #39ff14; text-shadow: 0 0 5px #39ff14, 0 0 15px #39ff14, 0 0 30px #39ff14; }
    66%  { color: #00e5ff; text-shadow: 0 0 5px #00e5ff, 0 0 15px #00e5ff, 0 0 30px #00e5ff; }
    83%  { color: #b967ff; text-shadow: 0 0 5px #b967ff, 0 0 15px #b967ff, 0 0 30px #b967ff; }
    100% { color: #ff3b30; text-shadow: 0 0 5px #ff3b30, 0 0 15px #ff3b30, 0 0 30px #ff3b30; }
}

/* little brand label under the screen, like real clocks have */
.clock-brand {
    margin-top: 8px;
    font-size: 8px;
    letter-spacing: 2px;
    color: #6a6a70;
}

.clock-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.clock-btn {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;

    background: rgba(180,185,190,0.4);
    border: 1px solid rgba(255,255,255,0.3);
    cursor: pointer;
    transition: 0.15s ease;
}

.clock-btn:hover {
    background: rgba(220,225,230,0.6);
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
}


.astronauts {
    position: fixed;

    top: 75%;
    left: 8%;

    width: 220px;
    height: auto;

    opacity: 0.9;
    pointer-events: none;

    z-index: 1;

    animation: floatAstronauts 10s ease-in-out infinite;
}

@keyframes floatAstronauts {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(3deg);
    }
}


.cd-disc {
    animation: spinDisc 4s linear infinite;
    animation-play-state: paused;
}

@keyframes spinDisc {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.cd-time {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-family: monospace;
    font-size: 10px;
    color: #4a4a4a;
}

.cd-screen {
    width: 100%;
}

.cd-song {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 4px;
    font-size: 14px;
}

.cd-song span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 8s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}


.nav-glitch {
    position: relative;
}

.nav-glitch-text {
    display: inline-block;
    font-family: monospace;
    letter-spacing: 1px;
}


h1 {
    font-family: 'Audiowide', sans-serif;
    letter-spacing: 4px;
}

h2 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}

body, p {
    font-family: 'Quicksand', sans-serif;
}

nav a, .nav-glitch-text {
    font-family: 'Share Tech Mono', monospace;
}

.welcome {
    font-family: 'Tangerine', cursive;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 1px;
}

header p {
    font-family: 'Fleur De Leah', cursive;
    font-size: 28px;
}

.intro h2 {
    font-family: 'Silkscreen', monospace;
}


.title-line {
    display: inline-block;
    color: #ff6ec7;
    animation: holoShift 4s linear infinite;
}

.title-line .letter {
    display: inline-block;
    animation: letterFloat 3s ease-in-out infinite;
}

@keyframes holoShift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes letterFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}


.nav-section {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 0 20px;
    padding: 4px 12px;

    background:
        linear-gradient(
            135deg,
            rgba(76, 166, 155, 0.12),
            rgba(60, 65, 70, 0.25)
        );

    border-top: 1px solid rgba(76, 166, 155, 0.4);
    border-bottom: 1px solid rgba(76, 166, 155, 0.4);
}



.nav-section {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 0 20px;
    padding: 4px 12px;

    background-color: rgba(30, 32, 35, 0.4);

    background-image:
        radial-gradient(circle, #ffb6d9 3px, transparent 3px),
        radial-gradient(circle, #8fe3c0 3px, transparent 3px);

    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;

    background-repeat: repeat;

    animation: polkaDotScroll 8s linear infinite;

    border-top: 1px solid rgba(76, 166, 155, 0.4);
    border-bottom: 1px solid rgba(76, 166, 155, 0.4);
}

@keyframes polkaDotScroll {
    0% {
        background-position: 0 0, 20px 20px;
    }
    100% {
        background-position: 240px -240px, 260px -220px;
    }
}



.cursor-glitter {
    position: fixed;
    pointer-events: none;
    font-size: 14px;
    z-index: 9999;
    animation: glitterFade 0.7s ease-out forwards;
}

@keyframes glitterFade {
    0% { opacity: 1; transform: scale(1) translateY(0); }
    100% { opacity: 0; transform: scale(0.3) translateY(-20px); }
}




.button-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.btn-88x31 {
    width: 88px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: bold;
    color: #1a1a1a;
    text-align: center;
    text-decoration: none;
    border: 1px solid #000;
}




.marquee-banner {
    overflow: hidden;
    white-space: nowrap;
    background: #000;
    color: #6effb8;
    font-family: 'Share Tech Mono', monospace;
    padding: 6px 0;
}

.marquee-banner span {
    display: inline-block;
    padding-left: 100%;
    animation: marqueeScroll 15s linear infinite;
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}




.best-viewed-badge {
    display: inline-block;
    background: #000;
    color: #6ecfff;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    text-align: center;
    padding: 8px;
    border: 2px solid #6ecfff;
    margin-top: 10px;
}




.blinkie-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.blinkie-img {
    height: 20px;
    image-rendering: pixelated;
}

.blinkie {
    width: 150px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Silkscreen', monospace;
    font-size: 9px;
    color: #fff;
    text-align: center;
    border: 1px solid #000;
    image-rendering: pixelated;
    animation: blinkieFlash 1s steps(1) infinite;
}

@keyframes blinkieFlash {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.75; }
}




.pfp-frame {
    position: absolute;
    top: -50px;
    left: 20px;

    width: 320px;
    height: 320px;

    display: flex;
    align-items: center;
    justify-content: center;

    animation: pfpPulse 3s ease-in-out infinite;
}

.pfp-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes pfpPulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(76, 166, 155, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 16px rgba(76, 166, 155, 0.6));
    }
}


.pfp-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}


.intro p {
    font-size: 13px;
}





.realm-hopper {
    font-family: "Sarpanch", sans-serif;
}

.intro-subtext ~ p {
    font-family: "Iosevka Charon", monospace;
}


.intro-subtext {
    font-family: "Chakra Petch", sans-serif;
    font-style: italic;
    font-size: 12px;
    margin-top: -8px;
}