/* =========================================================
   GHOSTLIB
   FRUTIGER AERO // WEB 1.0 // CLUNKY MODE
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Nunito:wght@400;600;700;800;900&display=swap');


/* =========================================================
   VARIABLES
========================================================= */

:root {
    --blue: #009ee5;
    --blue-dark: #005b91;
    --cyan: #51e7ff;

    --green: #46c72e;
    --green-dark: #167d20;

    --yellow: #fff35a;
    --pink: #ff4fa3;
    --orange: #ff9d27;

    --window: #eafaff;
    --window-dark: #b7e8f4;

    --ink: #06364c;
    --muted: #497786;

    --pixel-shadow:
        3px 3px 0 rgba(0,70,100,.55);
}


/* =========================================================
   FONT
========================================================= */

@font-face {
    font-family: "abduction2002";
    src: url("fonts/abduction2002.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    min-height: 100vh;

    color: var(--ink);

    font-family:
        Tahoma,
        Verdana,
        Arial,
        sans-serif;

    font-size: 13px;

    user-select: none;

    overflow-x: hidden;

    /*
     * NO CLEAN GRADIENT.
     * We want noisy old-web energy.
     */
    background-color: #62dfff;

    background-image:

        /* tiny dots */
        radial-gradient(
            rgba(255,255,255,.45) 1px,
            transparent 1px
        ),

        /* sky */
        linear-gradient(
            to bottom,
            #08b9ef 0px,
            #64e3ff 250px,
            #c9f7ff 520px,
            #8ce77b 650px,
            #3dbb36 100%
        );

    background-size:
        7px 7px,
        100% 100%;

    background-attachment: fixed;
}


/* =========================================================
   FAKE SUN
========================================================= */

body::before {

    content: "";

    position: fixed;

    z-index: -2;

    width: 270px;
    height: 270px;

    top: 30px;
    right: 7%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #fff,
            #fff98b 15%,
            #ffe044 45%,
            #ffbd1c 70%,
            rgba(255,150,0,.15) 72%,
            transparent 73%
        );

    filter:
        drop-shadow(
            0 0 35px
            rgba(255,240,80,.7)
        );

    opacity: .9;
}


/* =========================================================
   OCEAN / GRASS HORIZON
========================================================= */

body::after {

    content: "";

    position: fixed;

    z-index: -3;

    left: 0;
    right: 0;

    bottom: 0;

    height: 37vh;

    background:

        repeating-linear-gradient(
            170deg,
            rgba(255,255,255,.15) 0px,
            rgba(255,255,255,.15) 2px,
            transparent 2px,
            transparent 15px
        ),

        linear-gradient(
            to bottom,
            #67e6ef,
            #29b9d4 30%,
            #1598b6 55%,
            #1f9e34 56%,
            #49c82e 70%,
            #188d27 100%
        );

    clip-path:
        polygon(
            0 15%,
            10% 12%,
            18% 18%,
            27% 10%,
            38% 16%,
            49% 8%,
            60% 15%,
            70% 7%,
            82% 15%,
            91% 9%,
            100% 14%,
            100% 100%,
            0 100%
        );
}


/* =========================================================
   CRT
========================================================= */

.scanlines {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 99999;

    opacity: .14;

    background:

        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 2px,
            rgba(0,0,0,.13) 3px,
            transparent 4px
        );

    mix-blend-mode: multiply;
}


/* =========================================================
   SITE
========================================================= */

.site {

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding: 8px;

    display: grid;

    grid-template-columns:
        260px
        minmax(400px, 1fr)
        260px;

    grid-template-areas:
        "left main right"
        "footer footer footer";

    gap: 7px;

    align-items: start;
}


/* =========================================================
   CLUNKY WINDOW SYSTEM
========================================================= */

.widget,
.main-box,
.main-header,
.footer,
.logo-card {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            #ffffff,
            #dff7fc 8%,
            #c2edf5 48%,
            #eafcff 100%
        );

    /*
     * THE IMPORTANT PART:
     * ugly chunky borders.
     */

    border:
        2px solid #064e6c;

    outline:
        2px solid rgba(255,255,255,.85);

    box-shadow:
        3px 4px 0 #064e6c,
        6px 7px 0 rgba(0,80,100,.25);

    border-radius: 8px;

    transition:
        transform .12s steps(2),
        filter .12s;
}

.widget:hover,
.main-box:hover {

    transform:
        translate(-1px,-1px);

    filter:
        brightness(1.04);
}


/* =========================================================
   WINDOWS TITLE BAR
========================================================= */

.widget-header,
.box-header {

    min-height: 28px;

    padding: 4px 7px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:

        linear-gradient(
            to bottom,
            #9ef3ff 0%,
            #28c7e7 42%,
            #008ec4 46%,
            #006da1 100%
        );

    border-bottom:
        2px solid #034c6a;

    color: white;

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 1px;

    text-shadow:
        1px 1px 0 #005071;

    box-shadow:
        inset 0 2px rgba(255,255,255,.9);
}

.box-header {

    justify-content: flex-start;
}


/* =========================================================
   WINDOW BUTTON
========================================================= */

.widget-close {

    width: 19px;
    height: 19px;

    padding: 0;

    border:
        2px solid #fff;

    border-radius: 3px;

    background:
        linear-gradient(
            #ff80bd,
            #e60069
        );

    color: white;

    font-family: Arial;

    font-weight: bold;

    font-size: 12px;

    line-height: 13px;

    cursor: pointer;

    box-shadow:
        1px 1px 0 #6d0034;

    transition: none;
}

.widget-close:hover {

    background:
        linear-gradient(
            #ffb3d4,
            #ff2385
        );

    transform:
        translate(-1px,-1px);
}

.widget-close:active {

    transform:
        translate(1px,1px);

    box-shadow: none;
}


/* =========================================================
   SIDEBARS
========================================================= */

.sidebar {

    display: flex;

    flex-direction: column;

    gap: 8px;

    min-width: 0;
}

.sidebar-left {
    grid-area: left;
}

.sidebar-right {
    grid-area: right;
}


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

.main {

    grid-area: main;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 8px;
}


/* =========================================================
   LOGO
========================================================= */

.logo-card {

    width:
        calc(100% - 16px);

    max-width: 1500px;

    min-height: 76px;

    margin: 8px auto 5px;

    padding: 8px 14px;

    display: flex;

    align-items: center;

    gap: 12px;

    /*
     * deliberately excessive
     */

    background:

        linear-gradient(
            #ffffff 0%,
            #ffffff 9%,
            #9cefff 10%,
            #27c7eb 45%,
            #008ac1 48%,
            #dffaff 49%,
            #ffffff 100%
        );

    border:
        3px solid #004b69;

    outline:
        3px double white;

    box-shadow:
        4px 5px 0 #004b69,
        8px 9px 0 rgba(0,80,100,.2);

    border-radius: 11px;
}


/* =========================================================
   LOGO BUBBLE
========================================================= */

.logo-bubble {

    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: flex;

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

    border:
        3px solid white;

    border-radius: 50%;

    background:

        radial-gradient(
            circle at 28% 20%,
            white 0 7%,
            #b9f8ff 9%,
            #28d4ee 38%,
            #0085be 75%,
            #005579 100%
        );

    box-shadow:
        inset -7px -8px 0 rgba(0,80,120,.2),
        inset 4px 4px 0 rgba(255,255,255,.65),
        3px 4px 0 #005372;

    font-size: 27px;
}

.logo-card strong {

    display: block;

    color: #005e91;

    font-family:
        "Courier New",
        monospace;

    font-size: 23px;

    letter-spacing: 4px;

    font-weight: 900;

    text-shadow:
        2px 2px 0 white,
        3px 3px 0 rgba(0,80,120,.2);
}

.logo-card span {

    display: block;

    color: #168a2c;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 5px;
}



/* =========================================================
   WIDGET BODY
========================================================= */

.widget-body {

    padding: 12px;

    /*
     * subtle old-school texture
     */

    background:
        radial-gradient(
            rgba(0,120,150,.07) 1px,
            transparent 1px
        );

    background-size: 5px 5px;
}


/* =========================================================
   PROFILE
========================================================= */

.profile {
    text-align: center;
}

.avatar {

    width: 78px;
    height: 78px;

    margin: 3px auto 10px;

    display: flex;

    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family:
        "Courier New",
        monospace;

    font-size: 36px;
}

.profile h3 {

    margin: 8px 0;

    color: #006c9f;

    font-family:
        "Courier New",
        monospace;

    letter-spacing: 2px;

    background:
        linear-gradient(
            to bottom,
            #fff,
            #c9f4fa
        );

    border:
        1px solid #62aabc;

    padding: 4px;
}

.small-text {

    margin: 8px 0;

    color: #4b7784;

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================================
   ONLINE
========================================================= */

.status {

    margin-top: 10px;

    color: #118c2a;

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;

    font-weight: bold;

    background:
        #dcffd8;

    border:
        1px solid #58b956;

    padding: 5px;
}

.status-dot {

    display: inline-block;

    width: 9px;
    height: 9px;

    margin-right: 4px;

    border-radius: 50%;

    background:
        #32e342;

    border:
        1px solid #087b19;

    box-shadow:
        0 0 7px #20e833;

    animation:
        pulse 1.4s steps(2) infinite;
}

@keyframes pulse {

    50% {
        opacity: .3;
    }
}


/* =========================================================
   NAVIGATION
========================================================= */

.side-nav {

    display: flex;

    flex-direction: column;

    gap: 4px;
}

.side-nav button {

    width: 100%;

    padding: 7px 8px;

    border:
        2px outset #d5f7ff;

    border-radius: 3px;

    background:

        linear-gradient(
            #ffffff,
            #bcecf5
        );

    color: #075b7d;

    text-align: left;

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;

    font-weight: bold;

    cursor: pointer;

    box-shadow:
        1px 1px 0 #4c8a9a;

    transition: none;
}

.side-nav button:hover {

    background:
        linear-gradient(
            #9af3ff,
            #1fc3e4
        );

    color: white;

    text-shadow:
        1px 1px #00658a;
}

.side-nav button:active {

    border-style: inset;

    transform:
        translate(1px,1px);

    box-shadow: none;
}

.side-nav button.active {

    background:

        linear-gradient(
            #9dff79,
            #36bd32
        );

    color: white;

    border-color:
        #197b23;

    text-shadow:
        1px 1px #23701f;
}


/* =========================================================
   STATUS LINES
========================================================= */

.status-line {

    display: flex;

    justify-content: space-between;

    padding: 6px 2px;

    border-bottom:
        1px dotted #70aeba;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;
}

.status-line strong {
    color: #006b9d;
}


/* =========================================================
   CLOCK
========================================================= */

.clock-widget {
    text-align: center;

    font-family:
        "Courier New",
        monospace;
}

#clock {

    display: inline-block;

    padding: 5px 8px;

    color: #27ff72;

    background:
        #06313a;

    border:
        3px inset #77aab2;

    font-size: 22px;

    font-weight: bold;

    letter-spacing: 2px;

    text-shadow:
        0 0 5px #22ff75;
}

#date {

    margin-top: 7px;

    color: #527586;

    font-size: 9px;
}


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

.box-content {

    padding: 18px;

    line-height: 1.6;
}

.box-content h1 {

    margin-top: 0;

    color: #0071a7;

    font-size: 28px;

    text-shadow:
        2px 2px 0 white;
}

.box-content h2 {

    margin-top: 0;

    color: #006a9d;

    font-family:
        "Courier New",
        monospace;

    letter-spacing: 1px;
}


/* =========================================================
   TERMINAL
========================================================= */

.terminal {

    margin-top: 20px;

    padding: 14px;

    background:
        repeating-linear-gradient(
            0deg,
            #031b20,
            #031b20 2px,
            #06262a 3px
        );

    color: #00ff68;

    border:
        4px ridge #61949b;

    font-family:
        "Courier New",
        monospace;

    font-size: 12px;

    line-height: 1.8;

    box-shadow:
        inset 0 0 20px rgba(0,255,90,.15),
        4px 4px 0 rgba(0,60,70,.3);

    text-shadow:
        0 0 5px #00ff55;
}

.terminal-success {

    color: white;

    animation:
        terminalBlink .8s steps(2) infinite;
}

@keyframes terminalBlink {

    50% {
        opacity: .3;
    }
}



/* =========================================================
   BUTTONS
========================================================= */

.retro-button {

    padding: 7px 14px;

    border:
        3px outset #cfffff;

    border-radius: 3px;

    background:

        linear-gradient(
            #b5f7ff,
            #21bfdf 45%,
            #0083b7
        );

    color: white;

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;

    font-weight: bold;

    cursor: pointer;

    text-shadow:
        1px 1px #005678;

    box-shadow:
        2px 2px 0 #005475;
}

.retro-button:hover {

    background:
        linear-gradient(
            #fffda0,
            #ffe32e
        );

    color: #8d4d00;

    text-shadow: none;
}

.retro-button:active {

    border-style: inset;

    transform:
        translate(2px,2px);

    box-shadow: none;
}


/* =========================================================
   UPDATES
========================================================= */

.update {

    display: grid;

    grid-template-columns:
        90px 1fr;

    padding: 8px 0;

    border-bottom:
        1px dotted #76aeb9;

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;
}

.update-date {
    color: #397888;
}


/* =========================================================
   WEATHER
========================================================= */

.weather {

    display: flex;

    align-items: center;

    gap: 12px;
}

.weather-icon {

    width: 60px;
    height: 60px;

    display: flex;

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

    border:
        3px outset #fff;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 32% 25%,
            white,
            #fff77b 15%,
            #ffd323 55%,
            #ff9e00 100%
        );

    box-shadow:
        2px 3px 0 #9c7a13;

    font-size: 31px;
}

.weather-city {

    color: #527786;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 1px;
}

.weather-temp {

    margin: 2px 0;

    color: #0074ad;

    font-size: 22px;

    font-weight: bold;
}

.weather-status {

    color: #258d31;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    font-weight: bold;
}



/* =========================================================
   WEBRING
========================================================= */

.webring {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 5px;

    text-align: center;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;
}

.webring a {

    padding: 4px;

    color: #006d9e;

    text-decoration: none;

    border:
        1px solid transparent;
}

.webring a:hover {

    color: white;

    background:
        #009fc8;

    border-color:
        #005b77;
}


/* =========================================================
   MESSAGE
========================================================= */

.message-box {

    padding: 12px;

    background:
        repeating-linear-gradient(
            -45deg,
            #dffaff,
            #dffaff 5px,
            #c8f0f6 5px,
            #c8f0f6 10px
        );

    border:
        2px dashed #4e9aaa;

    color: #2f6677;

    font-family:
        Georgia,
        serif;

    font-size: 13px;

    font-style: italic;

    text-align: center;

    box-shadow:
        inset 0 0 10px rgba(0,100,140,.1);
}

.small-link {

    display: block;

    margin-top: 10px;

    text-align: center;

    color: #006da0;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    text-decoration: underline;
}

.small-link:hover {
    color: #ff3f9a;
}


/* =========================================================
   STATS
========================================================= */

.stats > div {

    display: flex;

    justify-content: space-between;

    padding: 5px 0;

    border-bottom:
        1px dotted #76aeb9;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;
}

.stats > div:last-child {
    border-bottom: none;
}

.stats strong {
    color: #006d9e;
}

.green {
    color: #168e29 !important;
}


/* =========================================================
   GAMES
========================================================= */

.game-grid {

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 8px;
}

.game-card {

    min-height: 105px;

    padding: 10px;

    border:
        3px outset #d8fbff;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #c9f4fb
        );

    color: #006b9e;

    cursor: pointer;

    font-family:
        "Courier New",
        monospace;

    box-shadow:
        3px 3px 0 #4b8998;

    transition:
        transform .1s steps(2);
}

.game-card:hover {

    background:
        linear-gradient(
            135deg,
            #fffda1,
            #ffd52c
        );

    color: #6b4d00;

    transform:
        translate(-2px,-3px)
        rotate(-1deg);
}

.game-card span {

    display: block;

    margin-bottom: 8px;

    font-size: 28px;
}




/* =========================================================
   NOTICE
========================================================= */

.notice {

    margin-top: 20px;

    padding: 13px;

    background:
        repeating-linear-gradient(
            45deg,
            #073846,
            #073846 5px,
            #0a4655 5px,
            #0a4655 10px
        );

    color: #62fff0;

    border:
        3px double #46e4d6;

    text-align: center;

    font-family:
        "Courier New",
        monospace;

    box-shadow:
        4px 4px 0 rgba(0,60,70,.35);
}


/* =========================================================
   PAGES
========================================================= */

.page {
    display: none;
}

.page.active {

    display: flex;

    flex-direction: column;

    gap: 8px;

    animation:
        pageIn .18s steps(3);
}

@keyframes pageIn {

    from {
        opacity: 0;
        transform:
            translate(8px,4px);
    }

    to {
        opacity: 1;
        transform:
            translate(0,0);
    }
}


/* =========================================================
   CLOSED
========================================================= */

.widget.closed {
    display: none;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    grid-area: footer;

    min-height: 65px;

    padding: 12px;
}

.footer-line {

    border-top:
        2px dotted #54a8b8;

    margin-bottom: 10px;
}

.footer-content {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 10px;

    color: #477584;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;
}


/* =========================================================
   CLUNKY DECORATION
========================================================= */

/*
 * These create random-feeling visual artifacts
 * without modifying the HTML.
 */

.main-box::before {

    content: "★";

    position: absolute;

    top: 3px;
    right: 9px;

    color:
        rgba(0,150,200,.16);

    font-size: 22px;

    pointer-events: none;
}

.widget::after {

    content: "";

    position: absolute;

    width: 16px;
    height: 16px;

    right: 9px;
    bottom: 8px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            white 0 10%,
            rgba(255,255,255,.6) 12%,
            rgba(0,180,230,.12) 60%,
            transparent 70%
        );

    border:
        1px solid rgba(255,255,255,.6);

    opacity: .7;

    pointer-events: none;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .site {

        grid-template-columns:
            210px
            minmax(300px,1fr)
            210px;
    }

    .featured-grid {

        grid-template-columns:
            1fr;
    }
}


@media (max-width: 760px) {

    .site {

        grid-template-columns:
            1fr;

        grid-template-areas:
            "main"
            "left"
            "right"
            "footer";
    }

    .main-header {

        flex-direction: column;

        align-items: flex-start;
    }

    .sidebar {

        display: grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}


@media (max-width: 500px) {

    .logo-card {

        width:
            calc(100% - 10px);

        margin-top: 5px;
    }

    .site {

        padding: 5px;

        gap: 7px;
    }

    .sidebar {
        display: flex;
    }


    .subtitle {

        font-size: 8px;

        letter-spacing: 1px;
    }

    .box-content {
        padding: 13px;
    }

    .game-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        flex-direction: column;
    }
}

.guestbook-frame {
            width: 100%;
            height: 500px;
            border: none;
            margin-top: 15px;
            background: white;
        }

/* =========================================================
   TOP CONTENT
   MISMO ANCHO QUE EL SITIO
========================================================= */

.top-content {

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding:
        8px 8px 0;
}


/* =========================================================
   BLINKIE ROW
========================================================= */

.blinkie-row {
    width: calc(100% - 16px);
    max-width: 1500px;
    margin: 12px auto;
    padding: 6px 0;
    overflow: hidden;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,.85),
        rgba(205,245,255,.85)
    );

    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #005b91;

    box-shadow: 0 2px 0 rgba(255,255,255,.7);
}



/* =========================================================
   MOVING TRACK
========================================================= */

.blinkie-track {

    display: flex;

    width: max-content;

    align-items: center;

    gap: 6px;

    animation:
        blinkie-scroll 25s linear infinite;

    will-change:
        transform;
}


/* =========================================================
   BLINKIES
========================================================= */

.blinkie-track img {

    display: block;

    width: auto;

    height: 20px;

    flex-shrink: 0;

    image-rendering: auto;

    border: 0;

    box-shadow:
        1px 1px 0 rgba(0,91,145,.25);
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes blinkie-scroll {

    from {
        transform:
            translateX(0);
    }

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


/* =========================================================
   PAUSE
========================================================= */

.blinkie-row:hover .blinkie-track {

    animation-play-state:
        paused;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 500px) {

    .top-content {

        padding:
            5px 5px 0;
    }

    .blinkie-row {

        margin-bottom: 7px;

        padding: 5px 0;

        border-radius: 6px;
    }

    .blinkie-track img {

        height: 18px;
    }
}

/* =========================================================
   GHOSTLIB HEADER
   WEB 1.0 / FRUTIGER AERO / Y2K
   ========================================================= */

   
/* =========================================================
   MAIN HEADER
========================================================= */

.main-header {
    padding-top: 20px;
    overflow: visible;
}


.ascii-title {
    position: relative;

    display: block;
    width: fit-content;
    margin: 0 auto;

    font-family: "Abduction2002", sans-serif !important;
    font-size: 60px;
    font-weight: normal;
    letter-spacing: 5px;
    line-height: 1;

    color: #ff9a16 !important;

    text-shadow:
        0 -2px 0 #fffbd0,
        0 -1px 0 #fff3a0,
        1px 1px 0 #ffd45a,
        2px 2px 0 #f58a08,
        3px 3px 0 #df6500,
        4px 4px 0 #bd4700,
        5px 5px 0 #8c2b00,
        6px 6px 0 #521300;

    transform: skewX(-3deg);

    user-select: none;
}


/* ✨ ESTRELLITAS LATERALES */

.ascii-title::before,
.ascii-title::after {
    position: absolute;
    top: 50%;

    color: #fff4a8;
    font-family: Arial, sans-serif;
    font-size: 28px;
    font-weight: normal;
    letter-spacing: 2px;

    text-shadow:
        1px 1px 0 #d87800,
        0 0 4px #fff7b0;

    white-space: nowrap;
    z-index: 5;
}

.ascii-title::before {
    content: "⋆˚✰ ݁˖⭑";

    right: calc(100% + 18px);
    transform: translateY(-50%);
}

.ascii-title::after {
    content: "⭑˖݁ ✰˚⋆";

    left: calc(100% + 18px);
    transform: translateY(-50%);
}


/* =========================================================
   GHOSTLIB — OLA DE SALTITOS
========================================================= */

.ascii-title span {
    display: inline-block;

    animation:
        ghostlibWave 1.8s steps(1) infinite;
}


/* Cada letra salta un poquito después de la anterior */

.ascii-title span:nth-child(1) {
    animation-delay: 0s;
}

.ascii-title span:nth-child(2) {
    animation-delay: .08s;
}

.ascii-title span:nth-child(3) {
    animation-delay: .16s;
}

.ascii-title span:nth-child(4) {
    animation-delay: .24s;
}

.ascii-title span:nth-child(5) {
    animation-delay: .32s;
}

.ascii-title span:nth-child(6) {
    animation-delay: .40s;
}

.ascii-title span:nth-child(7) {
    animation-delay: .48s;
}

.ascii-title span:nth-child(8) {
    animation-delay: .56s;
}


@keyframes ghostlibWave {

    0%, 65%, 100% {
        transform: translateY(0);
    }

    68% {
        transform: translateY(-5px);
    }

    71% {
        transform: translateY(0);
    }

    74% {
        transform: translateY(-2px);
    }

    77% {
        transform: translateY(0);
    }
}


/* =========================================================
   PIXEL JITTER
========================================================= */

@keyframes ghostlibPixelJitter {

    0%, 88%, 100% {
        transform: skewX(-3deg) translate(0, 0);
    }

    89% {
        transform: skewX(-3deg) translate(-1px, 1px);
    }

    90% {
        transform: skewX(-3deg) translate(2px, -1px);
    }

    91% {
        transform: skewX(-3deg) translate(-2px, 0);
    }

    92% {
        transform: skewX(-3deg) translate(1px, 1px);
    }

    93% {
        transform: skewX(-3deg) translate(0, -1px);
    }

    94% {
        transform: skewX(-3deg) translate(0, 0);
    }
}

/* =========================================================
   SUBTITLE
========================================================= */

.subtitle {
    margin-top: 8px;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;
    font-weight: bold;
    letter-spacing: 3px;
    padding-bottom: 20px;

    color: #174d59;


}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .ascii-title {
        font-size: 30px;
    }

    .ascii-title::before,
    .ascii-title::after {
        font-size: 16px;
    }

    .ascii-title::before {
        margin-right: 8px;
    }

    .ascii-title::after {
        margin-left: 8px;
    }
}

@media (max-width: 500px) {

    .ascii-title {
        font-size: 25px;
        letter-spacing: 3px;
    }

    .subtitle {
        font-size: 8px;
        letter-spacing: 2px;
    }

}

/* =========================================================
   FRUTIGER AERO BUBBLES
========================================================= */

.bubbles {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

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

.bubbles span {
    position: absolute;
    bottom: -80px;

    display: block;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255,255,255,.95) 0 8%,
            rgba(255,255,255,.55) 12%,
            rgba(255,255,255,.18) 35%,
            rgba(255,255,255,.08) 65%,
            transparent 72%
        );

    border: 1px solid rgba(255,255,255,.65);

    box-shadow:
        inset 2px 2px 3px rgba(255,255,255,.7),
        0 0 5px rgba(255,255,255,.35);

    opacity: .7;

    animation:
        bubbleFloat linear infinite,
        bubbleWobble ease-in-out infinite;
}


/* INDIVIDUAL BUBBLES */

.bubbles span:nth-child(1) {
    left: 5%;
    width: 18px;
    height: 18px;
    animation-duration: 12s, 2.5s;
    animation-delay: 0s, 0s;
}

.bubbles span:nth-child(2) {
    left: 12%;
    width: 32px;
    height: 32px;
    animation-duration: 17s, 3s;
    animation-delay: 3s, .5s;
}

.bubbles span:nth-child(3) {
    left: 21%;
    width: 12px;
    height: 12px;
    animation-duration: 10s, 2s;
    animation-delay: 1s, 1s;
}

.bubbles span:nth-child(4) {
    left: 29%;
    width: 25px;
    height: 25px;
    animation-duration: 15s, 2.8s;
    animation-delay: 5s, .2s;
}

.bubbles span:nth-child(5) {
    left: 38%;
    width: 15px;
    height: 15px;
    animation-duration: 11s, 2.2s;
    animation-delay: 2s, .8s;
}

.bubbles span:nth-child(6) {
    left: 46%;
    width: 38px;
    height: 38px;
    animation-duration: 20s, 3.5s;
    animation-delay: 7s, .4s;
}

.bubbles span:nth-child(7) {
    left: 55%;
    width: 20px;
    height: 20px;
    animation-duration: 13s, 2.5s;
    animation-delay: 4s, .7s;
}

.bubbles span:nth-child(8) {
    left: 63%;
    width: 11px;
    height: 11px;
    animation-duration: 9s, 1.8s;
    animation-delay: 1s, .3s;
}

.bubbles span:nth-child(9) {
    left: 70%;
    width: 30px;
    height: 30px;
    animation-duration: 16s, 3s;
    animation-delay: 6s, 1s;
}

.bubbles span:nth-child(10) {
    left: 78%;
    width: 17px;
    height: 17px;
    animation-duration: 12s, 2.3s;
    animation-delay: 2s, .2s;
}

.bubbles span:nth-child(11) {
    left: 85%;
    width: 35px;
    height: 35px;
    animation-duration: 19s, 3.2s;
    animation-delay: 8s, .5s;
}

.bubbles span:nth-child(12) {
    left: 92%;
    width: 13px;
    height: 13px;
    animation-duration: 10s, 2s;
    animation-delay: 3s, .9s;
}

.bubbles span:nth-child(13) {
    left: 16%;
    width: 9px;
    height: 9px;
    animation-duration: 8s, 1.7s;
    animation-delay: 6s, .4s;
}

.bubbles span:nth-child(14) {
    left: 52%;
    width: 28px;
    height: 28px;
    animation-duration: 18s, 3s;
    animation-delay: 10s, .6s;
}

.bubbles span:nth-child(15) {
    left: 74%;
    width: 14px;
    height: 14px;
    animation-duration: 11s, 2s;
    animation-delay: 5s, .3s;
}


/* SUBIDA */

@keyframes bubbleFloat {

    0% {
        transform: translateY(0) scale(.8);
        opacity: 0;
    }

    8% {
        opacity: .65;
    }

    50% {
        opacity: .7;
    }

    85% {
        opacity: .45;
    }

    100% {
        transform: translateY(-115vh) scale(1.15);
        opacity: 0;
    }
}


/* PEQUEÑO MOVIMIENTO LATERAL */

@keyframes bubbleWobble {

    0%, 100% {
        margin-left: 0;
    }

    50% {
        margin-left: 18px;
    }
}


/* ASEGURA QUE EL CONTENIDO QUEDE ENCIMA */

.site {
    position: relative;
    z-index: 2;
}

.blinkie-row,
.scanlines,
.page-frame {
    z-index: 3;
}

/* =========================================================
   TOOLS / GHOSTLIB TOOLBOX
========================================================= */

.tools-content {
    padding: 18px;
}


/* INTRO */

.tools-intro {
    position: relative;

    margin-bottom: 22px;
    padding: 16px;

    background:
        linear-gradient(
            to bottom,
            #f7ffff 0%,
            #d9f7fb 55%,
            #b5e8f0 100%
        );

    border: 2px solid #08708e;
    box-shadow:
        inset 0 0 0 1px #ffffff,
        3px 3px 0 rgba(0, 80, 110, .3);

    text-align: center;
}

.tools-intro h2 {
    margin: 7px 0 4px;

    color: #075b78;

    text-shadow:
        1px 1px 0 #ffffff,
        2px 2px 0 rgba(0, 80, 110, .2);
}

.tools-intro p {
    margin: 4px 0 12px;
    color: #285866;
}

.tools-terminal {
    display: inline-block;

    padding: 4px 9px;

    background: #063b45;
    color: #8dfff0;

    border: 1px solid #021e25;

    font-family: "Courier New", monospace;
    font-size: 11px;

    box-shadow:
        inset 0 0 8px rgba(0,255,255,.15),
        2px 2px 0 rgba(0,0,0,.25);
}


/* STATUS */

.tools-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 3px 8px;

    background: #eaffdf;

    border: 1px solid #4d9c35;

    color: #327126;

    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;

    box-shadow: 1px 1px 0 rgba(0,80,0,.2);
}

.tools-status .status-dot {
    width: 7px;
    height: 7px;

    background: #58d62f;

    border: 1px solid #287719;

    border-radius: 50%;

    box-shadow: 0 0 5px rgba(50,220,30,.8);
}


/* CATEGORIES */

.tool-category {
    margin-top: 20px;
}

.tool-category-title {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 9px;
    padding: 6px 9px;

    background:
        linear-gradient(
            to bottom,
            #fffef0,
            #ffe7a4
        );

    border: 1px solid #c58214;

    color: #754100;

    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;

    text-shadow:
        1px 1px 0 #ffffff;

    box-shadow:
        2px 2px 0 rgba(100,60,0,.2);
}


/* GRID */

.tools-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));

    gap: 10px;
}


/* TOOL CARD */

.tool-card {
    position: relative;

    min-height: 105px;

    display: flex;
    flex-direction: column;

    padding: 12px;

    box-sizing: border-box;

    text-decoration: none;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #e9fbff 45%,
            #c5edf5 100%
        );

    border: 2px solid #08718d;

    outline: 1px solid rgba(255,255,255,.9);

    box-shadow:
        3px 3px 0 #07526b,
        5px 5px 0 rgba(0,70,90,.18);

    color: #075b78;

    transition:
        transform .12s steps(2),
        filter .12s,
        box-shadow .12s;
}


/* TOP SHINE */

.tool-card::before {
    content: "";

    position: absolute;

    top: 2px;
    left: 2px;
    right: 2px;

    height: 35%;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.8),
            rgba(255,255,255,0)
        );

    pointer-events: none;
}


/* ICON */

.tool-icon {
    position: relative;

    width: 38px;
    height: 32px;

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

    margin-bottom: 7px;

    background:
        linear-gradient(
            to bottom,
            #eaffff,
            #8cdbed
        );

    border: 1px solid #08718d;

    box-shadow:
        1px 1px 0 #ffffff,
        2px 2px 0 rgba(0,70,90,.25);

    color: #075b78;

    font-family: "Courier New", monospace;
    font-size: 13px;
    font-weight: bold;
}


/* TITLE */

.tool-card strong {
    position: relative;

    font-size: 13px;

    color: #064e6c;

    text-shadow:
        1px 1px 0 #ffffff;
}


/* DESCRIPTION */

.tool-card small {
    position: relative;

    margin-top: 4px;

    max-width: 90%;

    color: #47727d;

    font-size: 10px;
    line-height: 1.35;
}


/* ARROW */

.tool-arrow {
    position: absolute;

    right: 8px;
    bottom: 7px;

    font-size: 14px;
    font-weight: bold;

    color: #0b7795;

    opacity: .6;
}


/* HOVER */

.tool-card:hover {
    transform: translate(-2px, -2px);

    filter:
        brightness(1.06)
        saturate(1.15);

    box-shadow:
        5px 5px 0 #07526b,
        8px 8px 0 rgba(0,70,90,.2);
}

.tool-card:hover .tool-arrow {
    opacity: 1;

    transform: translate(2px, -2px);
}


/* CLICK */

.tool-card:active {
    transform: translate(2px, 2px);

    box-shadow:
        1px 1px 0 #07526b;
}


/* KEYBOARD FOCUS */

.tool-card:focus-visible {
    outline: 3px dashed #ff9b18;
    outline-offset: 3px;
}


/* FOOTER */

.tools-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 22px;
    padding: 7px 10px;

    background: #073d49;

    border: 2px solid #032831;

    color: #8deff0;

    font-family: "Courier New", monospace;
    font-size: 10px;
    letter-spacing: 1px;

    box-shadow:
        inset 0 0 8px rgba(0,255,255,.12),
        2px 2px 0 rgba(0,0,0,.3);
}


/* MOBILE */

@media (max-width: 600px) {

    .tools-content {
        padding: 10px;
    }

    .tools-grid {
        grid-template-columns: 1fr;
    }

    .tool-card {
        min-height: 90px;
    }

    .tools-footer {
        flex-direction: column;
        gap: 5px;
    }

}

/* =========================================================
   GOLDFISH OF THE DAY
========================================================= */

.fish-card {
    margin: 24px auto 8px;
    max-width: 560px;

    background:
        linear-gradient(
            to bottom,
            #f9ffff 0%,
            #dff8ff 45%,
            #a9e5f2 100%
        );

    border: 2px solid #075b78;
    outline: 2px solid rgba(255,255,255,.9);

    box-shadow:
        3px 4px 0 #075b78,
        6px 7px 0 rgba(0,80,100,.25);

    border-radius: 7px;

    overflow: hidden;
}


/* HEADER */

.fish-card-header {
    padding: 6px 10px;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #bcefff 45%,
            #6ed0e8 100%
        );

    border-bottom: 2px solid #075b78;

    color: #07506b;

    font-family:
        Tahoma,
        Verdana,
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: bold;

    letter-spacing: 2px;
    text-align: center;

    text-shadow:
        1px 1px 0 #ffffff;
}


/* BODY */

.fish-card-body {
    display: flex;
    align-items: center;
    gap: 20px;

    padding: 16px;
}


/* FISH IMAGE */

.fish-image {
    flex: 0 0 180px;

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

    min-height: 140px;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.95),
            rgba(255,255,255,.2) 35%,
            transparent 70%
        );

    border: 2px inset #8acddd;
    border-radius: 5px;
}

.fish-image img {
    display: block;

    max-width: 180px;
    height: auto;

    image-rendering: auto;

    filter:
        drop-shadow(2px 3px 0 rgba(0,70,90,.25));
}


/* TEXT */

.fish-info {
    flex: 1;
}

.fish-info strong {
    display: block;

    margin-bottom: 7px;

    color: #075b78;

    font-family:
        Tahoma,
        Verdana,
        Arial,
        sans-serif;

    font-size: 16px;

    text-shadow:
        1px 1px 0 #ffffff;
}

.fish-info p {
    margin: 0 0 12px;

    color: #164f61;

    font-size: 12px;
    line-height: 1.5;
}


/* LITTLE STATS */

.fish-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;

    padding: 7px 9px;

    background: rgba(255,255,255,.55);

    border: 1px dashed #23819b;

    color: #075b78;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;
    font-weight: bold;
}


/* FOOTER */

.fish-card-footer {
    padding: 5px 10px;

    background: rgba(255,255,255,.55);

    border-top: 1px dotted #23819b;

    color: #27748a;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;
    font-style: italic;

    text-align: center;
}


/* MOBILE */

@media (max-width: 600px) {

    .fish-card-body {
        flex-direction: column;
        text-align: center;
    }

    .fish-image {
        width: 100%;
        flex-basis: auto;
    }

    .fish-info {
        width: 100%;
    }

    .fish-stats {
        text-align: left;
    }

}