@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');


/* ==================================================
   CHIBI'S ROOM
   ================================================== */

body {
    background-color: #ffb7c5;

    color: #526B52;

    text-align: center;

    font-family:
        "VT323",
        monospace;

    margin: 0;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;
}


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

.window {
    width: 700px;

    max-width: 85%;

    background-color:
        #fff7e8;

    border:
        3px solid #526B52;

    box-shadow:
        8px 8px 0 black;

    position: relative;
}


.window::before {
    content: "";

    display: block;

    height: 14px;

    background:

        repeating-linear-gradient(
            90deg,
            #526B52 0px,
            #526B52 14px,
            #fff7e8 14px,
            #fff7e8 28px
        );
}


.window-bar {
    background-color:
        #526B52;

    color:
        #ffb7c5;

    display: flex;

    justify-content:
        space-between;

    padding:
        6px 10px;

    font-size:
        20px;

    border-bottom:
        3px solid black;
}


.window-content {
    padding:
        40px 30px;
}


/* ==================================================
   TITLE
   ================================================== */

h1 {
    font-size:
        52px;

    letter-spacing:
        4px;

    margin-top:
        0;

    color:
        #526B52;
}


h1::before {
    content:
        "♠ ";

    color:
        black;
}


h1::after {
    content:
        " ♡";

    color:
        #ffb7c5;

    -webkit-text-stroke:
        1px black;
}


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

.system-info {
    width:
        260px;

    margin:
        25px auto;

    padding:
        12px 15px;

    background-color:
        #ffb7c5;

    border-top:
        3px solid black;

    border-left:
        3px solid black;

    border-right:
        3px solid #526B52;

    border-bottom:
        3px solid #526B52;

    color:
        black;

    text-align:
        left;

    font-size:
        18px;
}


.system-info::before {
    content:
        "♠ CHIBI SYSTEM ♠";

    display:
        block;

    text-align:
        center;

    color:
        #526B52;

    border-bottom:
        1px dashed black;

    padding-bottom:
        5px;

    margin-bottom:
        8px;
}


.system-info p {
    margin:
        5px 0;
}


.chibi-status {
    font-size:
        20px;

    letter-spacing:
        1px;
}


.chibi-status.offline {
    color:
        #526B52;
}


.chibi-status.online {
    color:
        black;
}


.status-message {
    font-size:
        15px;

    color:
        black;

    border-top:
        1px dashed #526B52;

    padding-top:
        7px;

    margin-top:
        8px !important;
}


/* ==================================================
   HOMEPAGE Y2K MP3 PLAYER
   ================================================== */

.chibi-mp3 {
    width:
        370px;

    max-width:
        88%;

    margin:
        28px auto 32px;

    background:
        #efe8df;

    border:
        2px solid #526b52;

    box-shadow:
        5px 5px 0 #222222;

    color:
        #252525;
}


.mp3-top {
    display:
        flex;

    justify-content:
        space-between;

    padding:
        5px 8px;

    background:
        #526b52;

    color:
        #ffcad4;

    border-bottom:
        2px solid black;

    letter-spacing:
        2px;

    font-size:
        17px;
}


/* ==================================================
   PLAYER SCREEN
   ================================================== */

.mp3-screen {
    margin:
        10px;

    padding:
        8px 9px;

    background:
        #171d18;

    border:
        2px inset #9ca693;

    color:
        #b9d5a4;

    text-align:
        left;

    box-shadow:
        inset 0 0 12px #050705;
}


.mp3-label {
    color:
        #70836c;

    font-size:
        13px;

    letter-spacing:
        3px;
}


/* ==================================================
   SCROLLING SONG TITLE
   ================================================== */

.mp3-scroll {
    overflow:
        hidden;

    white-space:
        nowrap;

    margin:
        5px 0 6px;

    color:
        #cde8b5;

    font-size:
        19px;

    letter-spacing:
        1px;
}


.mp3-scroll span {
    display:
        inline-block;

    min-width:
        100%;

    padding-left:
        100%;

    animation:
        mp3-scroll
        14s
        linear
        infinite;
}


@keyframes mp3-scroll {

    from {
        transform:
            translateX(0);
    }

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

}


/* ==================================================
   TIME
   ================================================== */

.mp3-time-row {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    color:
        #849a7e;

    font-size:
        14px;
}


.mp3-heart {
    color:
        #ff9eb2;

    animation:
        mp3-heart
        1.6s
        steps(2)
        infinite;
}


@keyframes mp3-heart {

    50% {
        opacity:
            0.35;
    }

}


/* ==================================================
   PROGRESS
   ================================================== */

.mp3-progress-wrap {
    padding:
        0 10px;
}


.mp3-progress {
    width:
        100%;

    accent-color:
        #526b52;

    cursor:
        pointer;
}


/* ==================================================
   CONTROLS
   ================================================== */

.mp3-controls {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        6px;

    padding:
        7px 10px 4px;
}


.mp3-button {
    width:
        42px;

    padding:
        4px;

    background:
        #ffb7c5;

    color:
        #263226;

    border:
        2px outset #ffffff;

    box-shadow:
        none;

    font-family:
        "VT323",
        monospace;

    font-size:
        18px;

    cursor:
        pointer;
}


.mp3-button:hover {
    background:
        #526b52;

    color:
        #ffced8;

    transform:
        none;
}


.volume-symbol {
    margin-left:
        7px;

    color:
        #526b52;

    font-size:
        14px;
}


.volume-control {
    width:
        85px;

    accent-color:
        #ff9eb2;
}


/* ==================================================
   PLAYER STATUS
   ================================================== */

.music-status {
    margin:
        3px 0 8px;

    color:
        #8b6370;

    font-size:
        13px;

    letter-spacing:
        2px;
}


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

.menu {
    margin:
        30px 0;
}


.menu a {
    color:
        #526B52;

    font-size:
        24px;

    text-decoration:
        none;

    margin:
        0 14px;
}


.menu a:hover {
    color:
        black;

    text-decoration:
        underline;
}


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

button {
    background-color:
        #526B52;

    color:
        #ffb7c5;

    font-family:
        "VT323",
        monospace;

    font-size:
        22px;

    border:
        2px solid black;

    padding:
        8px 24px;

    cursor:
        pointer;
}


button:hover {
    background-color:
        black;

    transform:
        rotate(-1deg);
}


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

.secret-door {
    margin-top:
        30px;
}


.secret-door a {
    font-size:
        38px;

    color:
        black;

    text-decoration:
        none;
}


.secret-door a:hover {
    color:
        #526B52;

    transform:
        rotate(8deg);

    display:
        inline-block;
}


.secret-door p {
    font-size:
        14px;

    margin-top:
        2px;

    color:
        black;
}


/* ==================================================
   RABBIT HOLE
   ================================================== */

.rabbit-page {
    background-color:
        #dbe9f4;

    color:
        #111111;

    width:
        100vw;

    min-height:
        100vh;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    position:
        fixed;

    top:
        0;

    left:
        0;
}


.rabbit-window {
    width:
        620px;

    max-width:
        85%;

    background-color:
        #fff7e8;

    border:
        3px solid black;

    box-shadow:

        10px 10px 0 #526B52,

        14px 14px 0 black;
}


.rabbit-checkers {
    height:
        24px;

    background-color:
        #fff7e8;

    background-image:

        linear-gradient(
            45deg,
            #111 25%,
            transparent 25%
        ),

        linear-gradient(
            -45deg,
            #111 25%,
            transparent 25%
        ),

        linear-gradient(
            45deg,
            transparent 75%,
            #111 75%
        ),

        linear-gradient(
            -45deg,
            transparent 75%,
            #111 75%
        );

    background-size:
        24px 24px;

    background-position:
        0 0,
        0 12px,
        12px -12px,
        -12px 0;
}


.rabbit-bar {
    background-color:
        #526B52;

    color:
        #dbe9f4;

    display:
        flex;

    justify-content:
        space-between;

    padding:
        6px 10px;

    border-top:
        3px solid black;

    border-bottom:
        3px solid black;

    font-size:
        20px;
}


.rabbit-content {
    padding:
        35px;
}


.rabbit-number {
    font-size:
        15px;

    letter-spacing:
        3px;

    margin-top:
        0;

    color:
        #526B52;
}


.rabbit-title {
    color:
        black;

    font-size:
        42px;

    letter-spacing:
        3px;

    margin-bottom:
        5px;
}


.rabbit-title::before,
.rabbit-title::after {
    content:
        "";
}


.rabbit-message {
    font-size:
        20px;

    margin-bottom:
        30px;
}


.rabbit-note {
    width:
        65%;

    margin:
        25px auto;

    padding:
        10px;

    background-color:
        #dbe9f4;

    border:
        2px dashed #526B52;

    text-align:
        left;

    font-size:
        18px;
}


.rabbit-note p {
    margin:
        3px;
}


.rabbit-spade {
    font-size:
        65px;

    margin:
        20px;

    color:
        black;
}


.rabbit-warning {
    font-size:
        20px;

    letter-spacing:
        2px;

    margin-bottom:
        35px;
}


.rabbit-back {
    color:
        #526B52;

    font-size:
        19px;

    text-decoration:
        none;

    border-bottom:
        1px dashed #526B52;
}


.rabbit-back:hover {
    color:
        black;
}


/* ==================================================
   GUESTBOOK BASE
   ================================================== */

.guestbook-page {
    width:
        100vw;

    min-height:
        100vh;

    position:
        fixed;

    inset:
        0;

    overflow:
        hidden;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;
}


.guestbook-window {
    width:
        680px;

    max-width:
        90%;

    max-height:
        90vh;

    overflow-y:
        auto;

    position:
        relative;

    z-index:
        2;
}


.guestbook-bar {
    display:
        flex;

    justify-content:
        space-between;

    padding:
        8px 12px;

    font-size:
        20px;
}


.guestbook-content {
    padding:
        34px;
}


/* ==================================================
   GUESTBOOK — SURVIVAL HORROR
   ================================================== */

.horror-guestbook {
    background:

        repeating-linear-gradient(
            0deg,
            rgba(135, 170, 115, 0.025) 0px,
            rgba(135, 170, 115, 0.025) 1px,
            transparent 1px,
            transparent 4px
        ),

        radial-gradient(
            circle at center,
            #101510 0%,
            #080b08 60%,
            #020302 100%
        );

    color:
        #9bbf87;
}


.horror-guestbook::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:

        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2px,
            rgba(0, 0, 0, 0.18) 3px,
            rgba(0, 0, 0, 0.18) 4px
        );

    pointer-events:
        none;

    z-index:
        10;
}


.horror-window {
    background:
        rgba(5, 9, 6, 0.97);

    border:
        1px solid #68835d;

    box-shadow:

        0 0 0 1px #172018,

        0 0 25px
        rgba(118, 158, 99, 0.12);

    color:
        #9bbf87;
}


.horror-bar {
    background:
        #0b100c;

    color:
        #a8c997;

    border-bottom:
        1px solid #68835d;

    text-shadow:
        0 0 5px
        rgba(155, 191, 135, 0.45);

    letter-spacing:
        2px;
}


.horror-content {
    background:

        linear-gradient(
            rgba(5, 9, 6, 0.97),
            rgba(3, 6, 4, 0.98)
        );

    color:
        #9bbf87;
}


.horror-content,
.horror-content p,
.horror-content h2,
.horror-content h3,
.horror-content label,
.horror-content span,
.horror-content a {
    color:
        #9bbf87;
}


.horror-content h2 {
    color:
        #b4d39f;

    font-size:
        36px;

    font-weight:
        normal;

    letter-spacing:
        3px;

    text-shadow:
        0 0 6px
        rgba(155, 191, 135, 0.4);

    border-bottom:
        1px solid #3f543b;

    padding-bottom:
        15px;
}


.horror-content .guestbook-small {
    color:
        #5f7957;

    text-align:
        left;

    letter-spacing:
        2px;
}


.horror-content .guestbook-intro {
    color:
        #819d75;

    font-size:
        19px;
}


.private-note {
    width:
        75%;

    margin:
        20px auto;

    padding:
        10px;

    color:
        #a8c997 !important;

    border:
        1px solid #3f543b;

    background:
        #080d09;

    letter-spacing:
        1px;
}


/* ==================================================
   GUESTBOOK FORM
   ================================================== */

.guestbook-form {
    width:
        78%;

    margin:
        0 auto;

    text-align:
        left;
}


.horror-form label,
.guestbook-form label {
    display:
        block;

    margin:
        12px 0 5px;

    color:
        #819d75;

    text-transform:
        uppercase;

    letter-spacing:
        2px;

    font-size:
        18px;
}


.horror-form input,
.horror-form textarea,
.guestbook-form input,
.guestbook-form textarea {
    width:
        100%;

    box-sizing:
        border-box;

    background:
        #020403;

    color:
        #b4d39f;

    border:
        1px solid #465d40;

    border-radius:
        0;

    box-shadow:
        inset 0 0 12px #000000;

    caret-color:
        #b4d39f;

    font-family:
        "VT323",
        monospace;

    font-size:
        19px;

    padding:
        10px;

    outline:
        none;
}


.horror-form textarea,
.guestbook-form textarea {
    height:
        110px;

    resize:
        vertical;
}


.horror-form input::placeholder,
.horror-form textarea::placeholder,
.guestbook-form input::placeholder,
.guestbook-form textarea::placeholder {
    color:
        #40513b;
}


.horror-form input:focus,
.horror-form textarea:focus,
.guestbook-form input:focus,
.guestbook-form textarea:focus {
    background:
        #060a07;

    border-color:
        #a8c997;
}


/* ==================================================
   GUESTBOOK BUTTON
   ================================================== */

.horror-form button,
.guestbook-form button {
    display:
        block;

    margin:
        20px auto 0;

    background:
        #080d09;

    color:
        #b4d39f;

    border:
        1px solid #68835d;

    border-radius:
        0;

    box-shadow:
        none;

    padding:
        8px 32px;

    letter-spacing:
        2px;
}


.horror-form button::before,
.guestbook-form button::before {
    content:
        "> ";
}


.horror-form button:hover,
.guestbook-form button:hover {
    background:
        #9bbf87;

    color:
        #050805;

    transform:
        none;
}


/* ==================================================
   GUESTBOOK DETAILS
   ================================================== */

.pixel-stain {
    color:
        #40573b;

    font-size:
        20px;

    letter-spacing:
        -1px;

    margin:
        18px auto;

    opacity:
        0.55;

    text-shadow:
        none;
}


.bottom-stain {
    margin-top:
        30px;
}


.guestbook-divider {
    margin:
        35px 0 20px;

    font-size:
        20px;
}


.horror-divider {
    color:
        #526b4b;

    text-shadow:
        none;

    border-top:
        1px solid #263524;

    padding-top:
        20px;
}


.guestbook-content h3 {
    color:
        #91ad80;

    font-size:
        22px;

    letter-spacing:
        3px;

    font-weight:
        normal;
}


.guestbook-entry {
    width:
        78%;

    margin:
        15px auto;

    padding:
        12px;

    text-align:
        left;
}


.horror-entry {
    background:
        #030604;

    border:
        1px solid #465d40;

    box-shadow:
        inset 0 0 15px #000000;

    color:
        #9bbf87;
}


.entry-top {
    display:
        flex;

    justify-content:
        space-between;

    padding-bottom:
        5px;

    font-size:
        16px;
}


.horror-entry .entry-top {
    color:
        #819d75;

    border-bottom:
        1px solid #263524;
}


.horror-entry p {
    color:
        #5f7957;

    font-size:
        18px;
}


.guestbook-alone {
    margin-top:
        25px;

    font-size:
        15px;

    letter-spacing:
        1px;
}


.horror-content .guestbook-alone {
    color:
        #53674d;
}


.guestbook-back {
    display:
        inline-block;

    margin-top:
        20px;

    text-decoration:
        none;

    font-size:
        18px;
}


.horror-content .guestbook-back {
    color:
        #819d75;

    border-bottom:
        none;

    letter-spacing:
        2px;
}


.horror-content .guestbook-back::before {
    content:
        "> ";
}


.horror-content .guestbook-back:hover {
    color:
        #c1dcae;
}


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

@media (max-width: 650px) {

    .window,
    .rabbit-window,
    .guestbook-window {
        max-width:
            93%;
    }


    h1 {
        font-size:
            38px;
    }


    .window-content {
        padding:
            28px 15px;
    }


    .menu a {
        display:
            block;

        margin:
            10px 0;
    }


    .chibi-mp3 {
        width:
            92%;
    }


    .mp3-controls {
        flex-wrap:
            wrap;
    }


    .guestbook-form {
        width:
            90%;
    }

}