/* ==================================================
   CHIBI HOMEPAGE
   BABY BLUE + PINK Y2K CHAOS
   ================================================== */


:root {

    --chibi-pink:
        #ffb7c5;

    --chibi-light-pink:
        #ffdbe3;

    --chibi-baby-blue:
        #b9ddff;

    --chibi-blue:
        #8fc9ff;

    --chibi-deep-blue:
        #669dca;

    --chibi-cream:
        #fff7e8;

    --chibi-black:
        #111111;

}



/* ==================================================
   MAIN HOMEPAGE COLORS

   REPLACE THE OLD GREEN WITH BABY BLUE
   ================================================== */

body {

    color:
        var(--chibi-deep-blue) !important;

}



/* MAIN WINDOW */

.window {

    border:
        3px solid
        var(--chibi-blue) !important;

    position:
        relative;

    z-index:
        10;

}



/* TOP LITTLE TILES */

.window::before {

    background:

        repeating-linear-gradient(
            90deg,

            var(--chibi-baby-blue) 0px,
            var(--chibi-baby-blue) 14px,

            var(--chibi-cream) 14px,
            var(--chibi-cream) 28px
        ) !important;

}



/* CHIBI'S ROOM BAR */

.window-bar {

    background:
        var(--chibi-baby-blue) !important;

    color:
        var(--chibi-black) !important;

}



/* TITLE */

h1 {

    color:
        var(--chibi-deep-blue) !important;

}



/* ==================================================
   CHIBI SYSTEM
   ================================================== */

.system-info {

    border-right:
        3px solid
        var(--chibi-blue) !important;

    border-bottom:
        3px solid
        var(--chibi-blue) !important;

}



.system-info::before {

    color:
        var(--chibi-deep-blue) !important;

}



.chibi-status.offline {

    color:
        var(--chibi-deep-blue) !important;

}



.status-message {

    border-top:
        1px dashed
        var(--chibi-blue) !important;

}



/* ==================================================
   MP3 PLAYER
   ================================================== */

.chibi-mp3 {

    border:
        2px solid
        var(--chibi-blue) !important;

}



.mp3-top {

    background:
        var(--chibi-baby-blue) !important;

    color:
        var(--chibi-black) !important;

}



.mp3-screen {

    border-color:
        var(--chibi-blue) !important;

}



.mp3-label {

    color:
        var(--chibi-blue) !important;

}



.mp3-scroll {

    color:
        #d8ecff !important;

}



.mp3-time-row {

    color:
        var(--chibi-blue) !important;

}



.mp3-progress {

    accent-color:
        var(--chibi-blue) !important;

}



.volume-symbol {

    color:
        var(--chibi-deep-blue) !important;

}



.mp3-button:hover {

    background:
        var(--chibi-baby-blue) !important;

    color:
        var(--chibi-black) !important;

}



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

.menu a {

    color:
        var(--chibi-deep-blue) !important;

}



.menu a:hover {

    color:
        var(--chibi-black) !important;

}



/* ==================================================
   BUTTONS ON HOMEPAGE
   ================================================== */

.window button {

    background-color:
        var(--chibi-baby-blue) !important;

    color:
        var(--chibi-black) !important;

}



.window button:hover {

    background-color:
        var(--chibi-blue) !important;

}



/* ==================================================
   SECRET DOOR
   ================================================== */

.secret-door a:hover {

    color:
        var(--chibi-blue) !important;

}



/* ==================================================
   ROOM CHAT
   ================================================== */

.room-chat {

    border-color:
        var(--chibi-blue) !important;

}



.room-chat-top {

    background:
        var(--chibi-baby-blue) !important;

    color:
        var(--chibi-black) !important;

}



.room-chat-live {

    color:
        var(--chibi-deep-blue) !important;

}



.room-chat-identity {

    color:
        var(--chibi-deep-blue) !important;

}



.room-chat-name-label {

    color:
        var(--chibi-deep-blue) !important;

}



.room-chat-time {

    color:
        var(--chibi-deep-blue) !important;

}



.room-chat-name,
.room-chat-input {

    border-color:
        var(--chibi-blue) !important;

}



.room-chat-send {

    background:
        var(--chibi-baby-blue) !important;

    color:
        var(--chibi-black) !important;

}



.room-chat-send:hover {

    background:
        var(--chibi-pink) !important;

}



.room-chat-bottom {

    color:
        var(--chibi-deep-blue) !important;

}



/* ==================================================
   CHAOS LAYER
   ================================================== */

#homepage-chaos {

    position:
        fixed;

    inset:
        0;

    width:
        100vw;

    height:
        100vh;

    overflow:
        hidden;

    pointer-events:
        none;

    z-index:
        20;

}



/* ==================================================
   GIFS
   ================================================== */

.homepage-gif {

    position:
        absolute;

    display:
        block;

    height:
        auto;

    max-width:
        180px;

    z-index:
        4;

    pointer-events:
        none;

}



/* ==================================================
   FALLING SAKURA
   ================================================== */

.falling-sakura {

    position:
        absolute;

    top:
        -40px;

    display:
        block;

    z-index:
        6;

    pointer-events:
        none;

    background:

        linear-gradient(
            135deg,

            #fff7fb 0%,

            #ffd2de 35%,

            #ff9fb8 100%
        );

    border-radius:

        80%
        15%
        80%
        15%;

    box-shadow:

        inset
        2px 1px 0
        rgba(
            255,
            255,
            255,
            0.65
        );

    opacity:
        0.95;

    animation-name:
        chibi-sakura-fall;

    animation-timing-function:
        linear;

    animation-iteration-count:
        infinite;

}



.falling-sakura::after {

    content:
        "";

    position:
        absolute;

    width:
        35%;

    height:
        35%;

    right:
        0;

    top:
        0;

    background:
        var(--chibi-pink);

    border-radius:
        50%;

}



@keyframes chibi-sakura-fall {

    0% {

        transform:

            translate(
                0,
                -50px
            )

            rotate(
                0deg
            );

    }


    30% {

        transform:

            translate(
                var(--sakura-drift),
                35vh
            )

            rotate(
                calc(
                    var(--sakura-spin) * 0.35
                )
            );

    }


    65% {

        transform:

            translate(
                calc(
                    var(--sakura-drift) * -0.35
                ),
                72vh
            )

            rotate(
                calc(
                    var(--sakura-spin) * 0.7
                )
            );

    }


    100% {

        transform:

            translate(
                var(--sakura-drift),
                115vh
            )

            rotate(
                var(--sakura-spin)
            );

    }

}



/* ==================================================
   PIXEL HEARTS
   ================================================== */

.falling-pixel-heart {

    position:
        absolute;

    top:
        -35px;

    width:
        18px;

    height:
        18px;

    display:
        block;

    z-index:
        5;

    pointer-events:
        none;

    background:
        #ff6f9f;

    clip-path:

        polygon(

            12% 12%,
            38% 12%,

            38% 0%,
            50% 0%,

            50% 12%,

            62% 0%,
            74% 0%,

            74% 12%,
            88% 12%,

            88% 25%,
            100% 25%,

            100% 50%,

            88% 50%,
            88% 62%,

            75% 62%,
            75% 74%,

            62% 74%,
            62% 87%,

            50% 87%,
            50% 100%,

            38% 87%,
            38% 74%,

            25% 74%,
            25% 62%,

            12% 62%,
            12% 50%,

            0% 50%,
            0% 25%,

            12% 25%

        );

    image-rendering:
        pixelated;

    filter:

        drop-shadow(
            2px 2px 0
            rgba(
                0,
                0,
                0,
                0.18
            )
        );

    animation-name:
        chibi-heart-fall;

    animation-timing-function:
        linear;

    animation-iteration-count:
        infinite;

}



.falling-pixel-heart.blue-heart {

    background:
        var(--chibi-blue);

}



@keyframes chibi-heart-fall {

    from {

        transform:

            translate(
                0,
                -50px
            )

            scale(
                var(--heart-scale)
            );

    }


    to {

        transform:

            translate(
                var(--heart-drift),
                115vh
            )

            scale(
                var(--heart-scale)
            );

    }

}



/* ==================================================
   ONLY POPUP
   ================================================== */

.cryptic-popup {

    position:
        absolute;

    width:
        165px;

    z-index:
        10;

    transform:
        translate(
            -50%,
            -50%
        );

    background:
        var(--chibi-cream);

    border:
        2px solid
        var(--chibi-blue);

    box-shadow:

        5px 5px 0
        var(--chibi-black);

    color:
        var(--chibi-black);

    font-family:
        "VT323",
        monospace;

    text-align:
        left;

}



.cryptic-popup-bar {

    display:
        flex;

    justify-content:
        space-between;

    padding:
        3px 6px;

    background:
        var(--chibi-baby-blue);

    color:
        var(--chibi-black);

    border-bottom:
        2px solid
        var(--chibi-black);

    font-size:
        16px;

    letter-spacing:
        2px;

}



.cryptic-popup-message {

    padding:
        10px;

    font-size:
        17px;

}



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

@media (
    max-width: 800px
) {

    .homepage-gif {

        max-width:
            75px;

    }


    .cryptic-popup {

        width:
            130px;

    }


    .falling-sakura {

        opacity:
            0.8;

    }


    .falling-pixel-heart {

        opacity:
            0.8;

    }

}



/* ==================================================
   REDUCED MOTION
   ================================================== */

@media (
    prefers-reduced-motion: reduce
) {

    .falling-sakura,
    .falling-pixel-heart {

        display:
            none;

    }

}