/* ==================================================
   CHIBI'S WORLD
   DUSTY ALICE GUESTBOOK
   ================================================== */


/* ==================================================
   PAGE
   ================================================== */

.guestbook-page {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

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

    background:
        #8292aa;

    color:
        #48566d;

    font-family:
        "MS PGothic",
        "MS Gothic",
        Tahoma,
        Verdana,
        sans-serif;
}


/* faded wallpaper texture */

.guestbook-page::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background-image:

        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.035) 0px,
            rgba(255,255,255,0.035) 1px,
            transparent 1px,
            transparent 4px
        ),

        repeating-linear-gradient(
            90deg,
            rgba(59,73,96,0.025) 0px,
            rgba(59,73,96,0.025) 1px,
            transparent 1px,
            transparent 15px
        );

    z-index: 1;
}


/* pink old-web symbol strip */

.guestbook-page::after {
    content:
        "♡   ♠   ♥   ♣   ♦   ♡   ♠   ♥   ♣   ♦   ♡";

    position: fixed;

    bottom: 8px;
    left: 0;

    width: 100%;

    color: #d49aae;

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;

    letter-spacing: 7px;

    text-align: center;

    opacity: 0.7;

    pointer-events: none;

    z-index: 2;
}


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

.sakura-layer {
    position: fixed;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 35;
}


.sakura-layer span {
    position: absolute;

    top: -40px;

    color:
        #efb0c1;

    font-family:
        "MS Gothic",
        monospace;

    text-shadow:
        1px 1px 0 #7c8192;

    animation:
        sakuraDrop
        linear
        infinite;
}


.sakura-layer span:nth-child(1) {
    left: 2%;
    font-size: 14px;
    animation-duration: 12s;
    animation-delay: -4s;
}


.sakura-layer span:nth-child(2) {
    left: 8%;
    font-size: 10px;
    animation-duration: 16s;
    animation-delay: -10s;
}


.sakura-layer span:nth-child(3) {
    left: 15%;
    font-size: 17px;
    animation-duration: 14s;
    animation-delay: -2s;
}


.sakura-layer span:nth-child(4) {
    left: 21%;
    font-size: 12px;
    animation-duration: 18s;
    animation-delay: -12s;
}


.sakura-layer span:nth-child(5) {
    left: 29%;
    font-size: 15px;
    animation-duration: 13s;
    animation-delay: -7s;
}


.sakura-layer span:nth-child(6) {
    left: 36%;
    font-size: 11px;
    animation-duration: 17s;
    animation-delay: -4s;
}


.sakura-layer span:nth-child(7) {
    left: 43%;
    font-size: 18px;
    animation-duration: 14s;
    animation-delay: -11s;
}


.sakura-layer span:nth-child(8) {
    left: 50%;
    font-size: 12px;
    animation-duration: 19s;
    animation-delay: -5s;
}


.sakura-layer span:nth-child(9) {
    left: 58%;
    font-size: 16px;
    animation-duration: 13s;
    animation-delay: -9s;
}


.sakura-layer span:nth-child(10) {
    left: 64%;
    font-size: 10px;
    animation-duration: 18s;
    animation-delay: -2s;
}


.sakura-layer span:nth-child(11) {
    left: 71%;
    font-size: 17px;
    animation-duration: 15s;
    animation-delay: -10s;
}


.sakura-layer span:nth-child(12) {
    left: 78%;
    font-size: 12px;
    animation-duration: 17s;
    animation-delay: -6s;
}


.sakura-layer span:nth-child(13) {
    left: 84%;
    font-size: 15px;
    animation-duration: 14s;
    animation-delay: -3s;
}


.sakura-layer span:nth-child(14) {
    left: 89%;
    font-size: 11px;
    animation-duration: 19s;
    animation-delay: -13s;
}


.sakura-layer span:nth-child(15) {
    left: 94%;
    font-size: 17px;
    animation-duration: 14s;
    animation-delay: -8s;
}


.sakura-layer span:nth-child(16) {
    left: 48%;
    font-size: 10px;
    animation-duration: 20s;
    animation-delay: -14s;
}


@keyframes sakuraDrop {

    0% {
        transform:
            translateY(-10vh)
            translateX(0)
            rotate(0deg);

        opacity: 0;
    }


    8% {
        opacity: 0.9;
    }


    45% {
        transform:
            translateY(48vh)
            translateX(28px)
            rotate(130deg);
    }


    75% {
        transform:
            translateY(78vh)
            translateX(-18px)
            rotate(230deg);
    }


    100% {
        transform:
            translateY(115vh)
            translateX(25px)
            rotate(340deg);

        opacity: 0;
    }

}


/* ==================================================
   WONDERLAND FALL LAYER
   ================================================== */

.wonderland-fall {
    position: fixed;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 25;
}


.fall-item {
    position: absolute;

    top: -120px;

    animation-name:
        wonderlandFall;

    animation-timing-function:
        linear;

    animation-iteration-count:
        infinite;
}


/* ==================================================
   PLAYING CARDS
   ================================================== */

.falling-card {
    width: 34px;
    height: 50px;

    box-sizing: border-box;

    background:
        #eee8dc;

    border:
        2px solid #4c5568;

    box-shadow:
        3px 3px 0 rgba(61,71,89,0.35);

    font-family:
        "Times New Roman",
        serif;
}


.card-corner {
    position: absolute;

    left: 4px;
    top: 2px;

    color:
        #414b60;

    font-size: 9px;

    font-weight: bold;
}


.card-suit {
    position: absolute;

    left: 50%;
    top: 50%;

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

    font-size: 20px;
}


.red-suit {
    color:
        #a34d63;
}


.black-suit {
    color:
        #41485a;
}


/* card positions */

.card-one {
    left: 4%;

    animation-duration: 13s;
    animation-delay: -2s;
}


.card-two {
    left: 18%;

    animation-duration: 17s;
    animation-delay: -11s;
}


.card-three {
    left: 33%;

    animation-duration: 15s;
    animation-delay: -7s;
}


.card-four {
    left: 51%;

    animation-duration: 18s;
    animation-delay: -13s;
}


.card-five {
    left: 67%;

    animation-duration: 14s;
    animation-delay: -4s;
}


.card-six {
    left: 82%;

    animation-duration: 17s;
    animation-delay: -9s;
}


.card-seven {
    left: 94%;

    animation-duration: 15s;
    animation-delay: -6s;
}


/* ==================================================
   LITTLE POCKET WATCHES
   ================================================== */

.falling-watch {
    width: 43px;
    height: 53px;
}


.mini-watch-loop {
    position: absolute;

    left: 16px;
    top: 0;

    width: 10px;
    height: 8px;

    border:
        2px solid #705b32;

    background:
        transparent;
}


.mini-watch-face {
    position: absolute;

    left: 4px;
    top: 8px;

    width: 34px;
    height: 34px;

    box-sizing: border-box;

    background:
        #e8d7a2;

    border:
        4px solid #b7954f;

    outline:
        2px solid #665433;

    border-radius:
        50%;

    box-shadow:
        3px 3px 0 rgba(65,75,92,0.3);
}


.mini-watch-face::before {
    content:
        "• •";

    position: absolute;

    left: 6px;
    top: 2px;

    color:
        #756241;

    font-size: 6px;

    letter-spacing: 5px;
}


.mini-watch-face::after {
    content:
        "• •";

    position: absolute;

    left: 6px;
    bottom: 2px;

    color:
        #756241;

    font-size: 6px;

    letter-spacing: 5px;
}


.mini-hand {
    position: absolute;

    left: 13px;
    top: 13px;

    width: 2px;

    background:
        #55472f;

    transform-origin:
        bottom center;
}


.hand-one {
    height: 9px;

    transform:
        translateY(-8px)
        rotate(48deg);
}


.hand-two {
    height: 12px;

    transform:
        translateY(-11px)
        rotate(145deg);

    animation:
        miniWatchTick
        4s
        steps(12)
        infinite;
}


.mini-watch-dot {
    position: absolute;

    left: 11px;
    top: 11px;

    width: 5px;
    height: 5px;

    background:
        #655233;
}


/* watch positions */

.watch-one {
    left: 10%;

    animation-duration: 18s;
    animation-delay: -12s;
}


.watch-two {
    left: 27%;

    animation-duration: 14s;
    animation-delay: -4s;
}


.watch-three {
    left: 44%;

    animation-duration: 19s;
    animation-delay: -15s;
}


.watch-four {
    left: 72%;

    animation-duration: 16s;
    animation-delay: -8s;
}


.watch-five {
    left: 89%;

    animation-duration: 20s;
    animation-delay: -2s;
}


/* ==================================================
   FALL ANIMATIONS
   ================================================== */

@keyframes wonderlandFall {

    0% {
        top: -120px;

        transform:
            translateX(0)
            rotate(-15deg);

        opacity: 0;
    }


    8% {
        opacity: 0.85;
    }


    25% {
        transform:
            translateX(25px)
            rotate(35deg);
    }


    50% {
        transform:
            translateX(-20px)
            rotate(95deg);
    }


    75% {
        transform:
            translateX(28px)
            rotate(160deg);
    }


    100% {
        top:
            calc(100vh + 120px);

        transform:
            translateX(-15px)
            rotate(230deg);

        opacity: 0.2;
    }

}


@keyframes miniWatchTick {

    from {
        transform:
            translateY(-11px)
            rotate(145deg);
    }


    to {
        transform:
            translateY(-11px)
            rotate(505deg);
    }

}


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

.guestbook-window {
    position: relative;

    z-index: 15;

    width: 670px;
    max-width: 90%;

    max-height: 88vh;

    overflow-y: auto;
    overflow-x: hidden;

    background:
        #d9dce3;

    color:
        #4c5870;

    border:
        3px solid #44536c;

    box-shadow:
        8px 8px 0 #4a5364,
        13px 13px 0 #bd829a;

    border-radius: 0;

    scrollbar-width: thin;

    scrollbar-color:
        #7789a4
        #d4ced0;
}


/* ==================================================
   CHECKER
   ================================================== */

.guestbook-checker {
    height: 16px;

    background-color:
        #d7b1bd;

    background-image:

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

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

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

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

    background-size:
        16px 16px;

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


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

.guestbook-bar {
    display: flex;

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

    padding:
        5px 8px;

    background:
        #5e718f;

    color:
        #f3c9d6;

    border-top:
        2px solid #35445d;

    border-bottom:
        2px solid #35445d;

    font-family:
        "MS Gothic",
        "Courier New",
        monospace;

    font-size:
        10px;

    font-weight:
        normal;

    letter-spacing:
        1px;
}


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

.guestbook-content {
    padding:
        30px 28px;

    background-color:
        #dddce1;

    background-image:

        repeating-linear-gradient(
            0deg,
            rgba(77,91,116,0.04) 0px,
            rgba(77,91,116,0.04) 1px,
            transparent 1px,
            transparent 4px
        );

    color:
        #48566d;

    text-align:
        center;
}


/* ==================================================
   FOLLOW THE WHITE RABBIT
   ================================================== */

.guestbook-rabbit-line {
    margin:
        0 0 8px;

    color:
        #95647a;

    font-family:
        "Courier New",
        monospace;

    font-size:
        11px;

    letter-spacing:
        2px;
}


/* ==================================================
   LOOKING GLASS
   ================================================== */

.guestbook-small {
    margin:
        3px 0 10px;

    color:
        #596c89;

    font-family:
        "MS Gothic",
        "Courier New",
        monospace;

    font-size:
        9px;

    letter-spacing:
        2px;
}


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

.guestbook-title {
    margin:
        6px 0;

    padding: 0;

    color:
        #485f80 !important;

    font-family:
        "MS PGothic",
        "MS Gothic",
        Tahoma,
        sans-serif;

    font-size:
        29px;

    font-weight:
        bold;

    line-height:
        1.1;

    text-shadow:
        2px 2px 0 #d99bb0;

    border:
        0 !important;
}


.guestbook-title::before,
.guestbook-title::after {
    content:
        "" !important;

    display:
        none !important;
}


/* ==================================================
   SYMBOLS
   ================================================== */

.guestbook-symbols {
    margin:
        9px 0 16px;

    color:
        #a95d79;

    font-family:
        "Times New Roman",
        serif;

    font-size:
        14px;

    letter-spacing:
        5px;
}


/* ==================================================
   INTRO
   ================================================== */

.guestbook-intro {
    margin:
        13px 0 10px;

    color:
        #8f596f !important;

    font-family:
        "Times New Roman",
        Georgia,
        serif;

    font-size:
        20px;

    font-style:
        italic;
}


/* ==================================================
   WELCOME
   ================================================== */

.guestbook-welcome {
    width: 82%;

    box-sizing: border-box;

    margin:
        17px auto;

    padding:
        13px 15px;

    background:
        #cecfd6;

    border:
        2px solid #687b98;

    border-left:
        5px solid #ad7088;

    box-shadow:
        4px 4px 0 #a88b98;

    color:
        #445168;

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

    font-size:
        11px;

    line-height:
        1.65;

    text-align:
        left;
}


.guestbook-welcome p {
    margin:
        4px 0 10px;

    color:
        #445168 !important;
}


.guestbook-welcome-first {
    color:
        #774e62 !important;

    font-family:
        "MS Gothic",
        Tahoma,
        sans-serif;

    font-weight:
        bold;
}


/* ==================================================
   PRIVATE
   ================================================== */

.private-note {
    width: 75%;

    box-sizing: border-box;

    margin:
        17px auto;

    padding:
        8px 10px;

    background:
        #d7aebb !important;

    color:
        #604654 !important;

    border:
        1px dashed #795d6a !important;

    border-radius:
        0;

    box-shadow:
        2px 2px 0 #718098;

    font-family:
        "Courier New",
        monospace;

    font-size:
        10px;
}


/* ==================================================
   TRAIL
   ================================================== */

.guestbook-trail {
    margin:
        17px auto;

    color:
        #9c5f77;

    font-family:
        "Courier New",
        monospace;

    font-size:
        11px;

    letter-spacing:
        4px;
}


/* ==================================================
   FORM WINDOW
   ================================================== */

.guestbook-write {
    width: 82%;

    margin:
        20px auto;

    background:
        #bdc7d5;

    border:
        2px solid #566a88;

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

    border-radius:
        0;
}


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

.guestbook-card-title {
    display: flex;

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

    padding:
        4px 7px;

    background:
        #657b9a;

    color:
        #f2c5d3;

    border-bottom:
        2px solid #425675;

    font-family:
        "MS Gothic",
        Tahoma,
        sans-serif;

    font-size:
        10px;

    font-weight:
        normal;

    letter-spacing:
        1px;

    text-align:
        left;
}


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

.guestbook-form {
    width:
        auto !important;

    margin:
        0 !important;

    padding:
        16px;

    box-sizing:
        border-box;

    background:
        #d9d6d8;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    text-align:
        left;
}


/* ==================================================
   LABELS
   ================================================== */

.guestbook-form label {
    display:
        block;

    margin:
        10px 0 4px;

    color:
        #455a79 !important;

    font-family:
        "MS Gothic",
        Tahoma,
        sans-serif;

    font-size:
        10px;

    font-weight:
        normal;

    text-transform:
        lowercase;
}


/* ==================================================
   INPUTS
   ================================================== */

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

    box-sizing:
        border-box;

    padding:
        5px 6px;

    background:
        #e8e2df !important;

    color:
        #3f4c61 !important;

    border-top:
        2px solid #4b5d78 !important;

    border-left:
        2px solid #4b5d78 !important;

    border-right:
        2px solid #f1e9e7 !important;

    border-bottom:
        2px solid #f1e9e7 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    outline:
        none;

    caret-color:
        #944f6b;

    font-family:
        "Courier New",
        monospace;

    font-size:
        12px;
}


.guestbook-form textarea {
    height:
        110px;

    resize:
        vertical;
}


.guestbook-form input::placeholder,
.guestbook-form textarea::placeholder {
    color:
        #8b858c !important;
}


.guestbook-form input:focus,
.guestbook-form textarea:focus {
    background:
        #eee4e6 !important;

    border-top-color:
        #925d72 !important;

    border-left-color:
        #925d72 !important;
}


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

.guestbook-form button {
    display:
        block;

    margin:
        16px auto 0;

    padding:
        5px 15px;

    background:
        #c3869d !important;

    color:
        #403b45 !important;

    border-top:
        2px solid #f2dbe3 !important;

    border-left:
        2px solid #f2dbe3 !important;

    border-right:
        2px solid #6c5360 !important;

    border-bottom:
        2px solid #6c5360 !important;

    border-radius:
        0 !important;

    box-shadow:
        2px 2px 0 #596981 !important;

    font-family:
        "MS Gothic",
        Tahoma,
        sans-serif;

    font-size:
        10px;

    font-weight:
        normal;

    cursor:
        pointer;

    transform:
        none !important;
}


.guestbook-form button::before {
    content:
        "" !important;
}


.guestbook-form button:hover {
    background:
        #879bb8 !important;

    color:
        #35445c !important;

    transform:
        none !important;
}


.guestbook-form button:active {
    border-top-color:
        #6c5360 !important;

    border-left-color:
        #6c5360 !important;

    border-right-color:
        #f2dbe3 !important;

    border-bottom-color:
        #f2dbe3 !important;

    box-shadow:
        none !important;

    transform:
        translate(2px, 2px) !important;
}


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

.guestbook-alone {
    margin:
        12px 10px 15px;

    color:
        #675764 !important;

    font-family:
        "Courier New",
        monospace;

    font-size:
        10px;
}


/* ==================================================
   DIVIDER
   ================================================== */

.guestbook-divider {
    margin:
        27px 0 18px;

    padding-top:
        14px;

    color:
        #9f5e77 !important;

    border-top:
        1px dashed #637795;

    font-family:
        "Times New Roman",
        serif;

    font-size:
        12px;

    letter-spacing:
        3px;
}


/* ==================================================
   LAST NOTE TITLE
   ================================================== */

.guestbook-content h3 {
    margin:
        14px 0;

    color:
        #465d7c !important;

    font-family:
        "MS Gothic",
        Tahoma,
        sans-serif;

    font-size:
        10px;

    font-weight:
        normal;

    letter-spacing:
        2px;
}


/* ==================================================
   LAST NOTE
   ================================================== */

.guestbook-entry {
    width:
        78%;

    margin:
        14px auto;

    padding:
        0;

    background:
        #ceb9c1 !important;

    color:
        #505969 !important;

    border:
        2px solid #755e69 !important;

    border-radius:
        0;

    box-shadow:
        4px 4px 0 #657691 !important;

    text-align:
        left;
}


.entry-top {
    display:
        flex;

    justify-content:
        space-between;

    padding:
        5px 7px;

    background:
        #aebbcf;

    color:
        #445979 !important;

    border-bottom:
        1px solid #71829a;

    font-family:
        "MS Gothic",
        Tahoma,
        sans-serif;

    font-size:
        9px;

    font-weight:
        normal;
}


.guestbook-entry p {
    margin:
        0;

    padding:
        10px;

    color:
        #624f5a !important;

    font-family:
        "Times New Roman",
        Georgia,
        serif;

    font-size:
        12px;

    font-style:
        italic;
}


/* ==================================================
   BOTTOM ALICE
   ================================================== */

.guestbook-bottom-alice {
    margin:
        24px auto 9px;

    color:
        #86576c;

    font-family:
        "Courier New",
        monospace;

    font-size:
        10px;

    font-style:
        italic;

    letter-spacing:
        2px;
}


/* ==================================================
   TINY OLD WEB TEXT
   ================================================== */

.guestbook-tiny {
    margin:
        8px auto 11px;

    color:
        #536681;

    font-family:
        "MS Gothic",
        "Courier New",
        monospace;

    font-size:
        8px;

    letter-spacing:
        1px;
}


/* ==================================================
   BACK
   ================================================== */

.guestbook-back {
    display:
        inline-block;

    margin-top:
        13px;

    padding:
        2px 4px;

    color:
        #415a7a !important;

    background:
        #c4c8d0;

    border:
        1px dotted #885d70;

    text-decoration:
        none;

    font-family:
        "MS Gothic",
        Tahoma,
        sans-serif;

    font-size:
        10px;

    font-weight:
        normal;
}


.guestbook-back::before {
    content:
        "" !important;
}


.guestbook-back:hover {
    color:
        #663d51 !important;

    background:
        #cf9eb0;

    text-decoration:
        underline;
}


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

@media (max-width: 650px) {

    .guestbook-window {
        width:
            93%;

        max-width:
            93%;

        max-height:
            91vh;

        box-shadow:
            5px 5px 0 #4a5364,
            8px 8px 0 #bd829a;
    }


    .guestbook-content {
        padding:
            22px 12px;
    }


    .guestbook-title {
        font-size:
            21px;
    }


    .guestbook-welcome,
    .guestbook-write,
    .guestbook-entry {
        width:
            94%;
    }


    .private-note {
        width:
            88%;
    }


    .guestbook-form {
        padding:
            13px;
    }


    .falling-card {
        transform:
            scale(0.85);
    }


    .falling-watch {
        transform:
            scale(0.85);
    }

}