/* ═══════════════════════════════════════
   ✦ MICAWONDERLAND ✦
   whimsical / old web / scrapbook / Y2K
   pink + cyan + stars + tiny bit grunge
   ═══════════════════════════════════════ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
    color: #777;

    background-color: #fff7fc;

    background-image:
        radial-gradient(#ffffff 1px, transparent 1px),
        linear-gradient(
            135deg,
            rgba(255,190,220,.28) 25%,
            transparent 25%,
            transparent 50%,
            rgba(170,230,245,.20) 50%,
            rgba(170,230,245,.20) 75%,
            transparent 75%
        );

    background-size: 14px 14px, 85px 85px;
    background-attachment: fixed;
}


/* ═══════════════════════════════════════
   ✦ SITE ✦
   ═══════════════════════════════════════ */

.site {
    width: 95%;
    max-width: 1500px;

    margin: 18px auto;
    padding: 13px;

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

    border: 3px solid #f2a8cf;
    border-radius: 20px;

    box-shadow:
        0 0 0 2px white,
        0 0 0 6px #f8c9df,
        0 0 25px rgba(240,140,195,.4),
        inset 0 0 25px rgba(255,190,225,.25);
}


/* ═══════════════════════════════════════
   ✦ RANDOM FACT ✦
   ═══════════════════════════════════════ */

.fact-bar {
    margin-bottom: 12px;
    padding: 8px 13px;

    color: #55a9bd;
    font-size: 15px;
    font-weight: bold;

    background:
        linear-gradient(
            to right,
            #dff8fc,
            #fff,
            #ffe5f1
        );

    border: 2px solid #a9d8e3;
    border-radius: 7px;

    box-shadow:
        inset 0 2px white,
        0 2px 5px rgba(150,150,180,.2);
}

.fact-bar button {
    margin-left: 10px;

    padding: 3px 9px;

    font-family: inherit;

    background: white;

    border: 1px solid #aaa;
    border-radius: 3px;

    cursor: pointer;
}

.fact-bar button:hover {
    color: #e681b5;
    background: #fff0f7;
}


/* ═══════════════════════════════════════
   ✦ HEADER ✦
   ═══════════════════════════════════════ */

.header {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 12px;

    margin-bottom: 13px;
}

.header-image {
    height: 175px;

    overflow: hidden;

    background: #ffd9eb;

    border: 3px solid white;
    border-radius: 12px;

    box-shadow:
        0 0 0 2px #e7a8c9,
        inset 0 0 15px white,
        0 0 12px rgba(225,150,190,.35);
}

.header-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(1.08)
        saturate(.9)
        contrast(.95);
}

.archive {
    padding: 10px;

    color: white;

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

    background:
        linear-gradient(
            #fbcbe3,
            #ef9bc6
        );

    border: 3px solid white;
    border-radius: 12px;

    box-shadow:
        0 0 0 2px #e2a4c4,
        inset 0 2px 5px white;
}

.archive div {
    padding: 10px;

    border-bottom: 1px dashed rgba(255,255,255,.8);

    text-shadow:
        1px 1px #d57fa9,
        0 0 4px white;

    transition: .2s;
}

.archive div:hover {
    padding-left: 18px;
}


/* ═══════════════════════════════════════
   ✦ MAIN GRID ✦
   ═══════════════════════════════════════ */

.content {
    display: grid;

    grid-template-columns:
        250px
        minmax(450px, 1fr)
        250px;

    gap: 12px;

    align-items: start;
}


/* ═══════════════════════════════════════
   ✦ COLUMNS ✦
   ═══════════════════════════════════════ */

.left-column,
.blog-column,
.sidebar {
    min-width: 0;
}

.left-column,
.blog-column {
    display: flex;
    flex-direction: column;
    gap: 11px;
}


/* ═══════════════════════════════════════
   ✦ GENERAL WINDOWS ✦
   ═══════════════════════════════════════ */

.window {
    position: relative;

    background:
        linear-gradient(
            135deg,
            white,
            #fff8fc
        );

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

    box-shadow:
        0 0 0 2px #e6afca,
        0 4px 9px rgba(190,130,170,.20),
        inset 0 0 15px rgba(255,210,235,.25);
}

.window::before {
    content: "✦";

    position: absolute;

    top: 4px;
    right: 7px;

    color: white;

    font-size: 12px;

    text-shadow:
        0 0 5px #ef94bf;

    z-index: 5;
}


/* ═══════════════════════════════════════
   ✦ MINI INTRO ✦
   ═══════════════════════════════════════ */

.mini-intro {
    padding: 14px;

    background:
        repeating-linear-gradient(
            45deg,
            #fff,
            #fff 8px,
            #fff0f7 8px,
            #fff0f7 16px
        );
}

.mini-intro h2 {
    margin: 0 0 10px;

    color: #ef83b8;

    font-size: 20px;
}

.mini-intro p {
    margin: 7px 0;

    line-height: 1.4;
}

.tiny-divider {
    margin: 12px 0;

    text-align: center;

    color: #73c4d5;

    letter-spacing: 3px;
}


/* ═══════════════════════════════════════
   ✦ PLUSHIES ✦
   ═══════════════════════════════════════ */

.plush-window {
    padding: 6px;

    background:
        repeating-linear-gradient(
            45deg,
            #fff,
            #fff 7px,
            #ffe8f3 7px,
            #ffe8f3 14px
        );
}

.plush-window img {
    display: block;

    width: 100%;
    height: 185px;

    object-fit: cover;

    border: 2px solid #efb2d0;
    border-radius: 6px;
}

.window-title {
    padding: 6px;

    text-align: center;

    color: #66b8c9;

    font-weight: bold;
}

.caption {
    margin: 5px;

    text-align: center;

    color: #d78aae;

    font-size: 12px;
}


/* ═══════════════════════════════════════
   ✦ MUSIC ✦
   ═══════════════════════════════════════ */

.music {
    padding: 10px;

    background:
        linear-gradient(
            135deg,
            #fff,
            #eefdff
        );
}

.section-heading {
    margin-bottom: 8px;

    color: #df88b5;

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

    text-align: center;
}

.music-box {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px;

    background: #fff8fc;

    border: 2px solid #c9e5eb;
    border-radius: 7px;
}

.music-icon {
    font-size: 27px;
    color: #6cc3d4;
}

.music-box strong {
    color: #df88b5;
}

.music-bar {
    margin-top: 8px;

    text-align: center;

    color: #6ab9ca;

    font-size: 12px;
}


/* ═══════════════════════════════════════
   ✦ CALENDAR ✦
   ═══════════════════════════════════════ */

.calendar {
    padding: 10px;

    color: #64afc2;

    background:
        linear-gradient(
            #fff,
            #f4fdff
        );
}

.calendar-title {
    padding: 8px;
    margin-bottom: 7px;

    text-align: center;

    color: #e58dbc;

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

    background: #fff5fa;

    border: 2px solid #a9d8e3;
    border-radius: 7px;
}

.weekdays,
.days {
    display: grid;

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

    gap: 3px;

    text-align: center;
}

.weekdays span {
    padding: 5px 1px;

    color: #e683b5;

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

    background: #fff0f7;

    border: 1px solid #e0aec8;
    border-radius: 3px;
}

.days span {
    padding: 7px 2px;

    color: #58a9bd;

    background:
        linear-gradient(
            #fff,
            #e4f7fb
        );

    border: 1px solid #9fd2df;
    border-radius: 4px;

    font-size: 12px;

    transition: .15s;
}

.days span:hover {
    transform: scale(1.08);

    color: #ed83b9;

    background: #fff0f8;
}


/* ═══════════════════════════════════════
   ✦ MOOD ✦
   ═══════════════════════════════════════ */

.mood {
    padding: 11px;

    background:
        linear-gradient(
            135deg,
            #fff,
            #f1fcff
        );
}

.mood-content {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 7px;
}

.mood-face {
    color: #71bdcf;

    font-size: 25px;
}

.mood p {
    margin: 0;

    font-size: 13px;
}


/* ═══════════════════════════════════════
   ✦ POLL ✦
   ═══════════════════════════════════════ */

.poll {
    padding: 13px;

    color: #d989b5;

    background-color: white;

    background-image:
        radial-gradient(
            #f6b8d5 1px,
            transparent 1px
        );

    background-size: 10px 10px;
}

.poll h2 {
    margin: 0 0 9px;

    color: #e38bbb;

    font-size: 18px;
}

.poll label {
    display: block;

    margin: 8px 0;

    font-size: 13px;
}

.poll input {
    accent-color: #e89ac3;
}

.poll-buttons {
    margin: 13px;

    text-align: center;
}

.poll button {
    padding: 4px 12px;

    font-family: inherit;

    background: linear-gradient(white, #eee);

    border: 1px solid #aaa;
    border-radius: 3px;

    cursor: pointer;
}

.poll button:hover {
    color: #df7faf;
    background: #ffe4f1;
}

.poll small {
    display: block;

    text-align: right;

    color: #aaa;

    font-size: 9px;
}

.previous {
    margin-top: 15px;

    padding: 8px;

    background: white;

    border: 2px solid #e1b1ca;
    border-radius: 6px;
}


/* ═══════════════════════════════════════
   ✦ WELCOME ✦
   ═══════════════════════════════════════ */

.welcome {
    padding: 8px;

    background:
        repeating-linear-gradient(
            45deg,
            #fff,
            #fff 9px,
            #ffeaf4 9px,
            #ffeaf4 18px
        );
}

.welcome h1 {
    margin: 0 0 10px;

    padding: 13px;

    text-align: center;

    color: white;

    font-size: 25px;

    background:
        linear-gradient(
            #bdeff5,
            #75cbd9
        );

    border: 2px solid #5fb6c7;
    border-radius: 8px;

    text-shadow:
        2px 2px #65aeba,
        0 0 5px white;
}

.welcome-inner {
    position: relative;

    padding: 25px;

    text-align: center;

    color: #54a9bd;

    background: white;

    border: 2px solid #e9b4ce;

    line-height: 1.5;
}

.welcome-inner strong {
    color: #ec83b8;
}

.welcome-sparkles {
    margin-top: 15px;

    color: #ef9fc3;

    letter-spacing: 8px;
}

.sticky-star {
    position: absolute;

    top: 30px;
    right: 25px;

    color: #f1a1c4;

    font-size: 23px;

    transform: rotate(12deg);
}


/* ═══════════════════════════════════════
   ✦ BLOG POST ✦
   ═══════════════════════════════════════ */

.blog-post {
    padding: 15px;

    background:
        linear-gradient(
            135deg,
            #fff,
            #fff8fc
        );
}

.post-date {
    color: #72bdcd;

    font-size: 12px;
}

.blog-post h2 {
    color: #df87b5;

    font-size: 22px;
}

.blog-post p {
    line-height: 1.5;
}

.post-footer {
    margin-top: 15px;
    padding-top: 8px;

    color: #7bbdcc;

    font-size: 12px;

    border-top: 1px dashed #dfb7cc;
}


/* ═══════════════════════════════════════
   ✦ TO DO PAPER ✦
   ═══════════════════════════════════════ */

.todo {
    padding: 20px;

    background:
        linear-gradient(
            135deg,
            #fffdf1,
            #fff
        );

    transform: rotate(-.3deg);
}

.paperclip {
    position: absolute;

    top: -10px;
    right: 25px;

    color: #ef82b7;

    font-size: 27px;
}

.todo h2 {
    margin-top: 0;

    color: #df82b0;

    font-family: Georgia, serif;
}

.todo label {
    display: block;

    margin: 10px 0;

    color: #777;
}

.todo label:hover {
    color: #e47eaf;
}

.todo-footer {
    margin-top: 15px;

    color: #aaa;

    font-size: 11px;

    border-top: 1px dashed #d9c6cf;

    padding-top: 8px;
}


/* ═══════════════════════════════════════
   ✦ SCRAPBOOK ✦
   ═══════════════════════════════════════ */

.scrapbook {
    padding: 13px;
}

.scrapbook h2,
.gallery h2 {
    margin-top: 0;

    color: #e087b6;

    text-align: center;
}

.scrap-grid {
    display: grid;

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

    gap: 8px;
}

.scrap-note {
    padding: 14px 5px;

    text-align: center;

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

    border: 1px solid rgba(150,150,150,.25);

    box-shadow:
        2px 3px 5px rgba(100,100,100,.15);

    transition: .2s;
}

.scrap-note:hover {
    transform: rotate(3deg) scale(1.05);
}

.pink-note {
    background: #ffd9e9;
    color: #db80ad;
    transform: rotate(-3deg);
}

.blue-note {
    background: #d9f5fa;
    color: #58aabd;
    transform: rotate(2deg);
}

.yellow-note {
    background: #fff3bf;
    color: #d5a85b;
    transform: rotate(-2deg);
}

.purple-note {
    background: #eee1fa;
    color: #9c7db8;
    transform: rotate(3deg);
}


/* ═══════════════════════════════════════
   ✦ GALLERY ✦
   ═══════════════════════════════════════ */

.gallery {
    padding: 12px;
}

.gallery-grid {
    display: grid;

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

    gap: 7px;
}

.gallery-grid div {
    height: 65px;

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

    color: #fff;

    font-size: 25px;

    background:
        linear-gradient(
            135deg,
            #ffc9df,
            #9cdeea
        );

    border: 3px solid white;

    box-shadow:
        0 0 0 1px #e0aec6;
}

.gallery p {
    margin-bottom: 0;

    text-align: center;

    color: #aaa;

    font-size: 11px;
}


/* ═══════════════════════════════════════
   ✦ BANNER ✦
   ═══════════════════════════════════════ */

.banner {
    height: 68px;

    padding: 3px;
}

.banner img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border: 1px solid #e7abc8;
    border-radius: 5px;
}


/* ═══════════════════════════════════════
   ✦ COMMENTS ✦
   ═══════════════════════════════════════ */

.comments {
    min-height: 430px;

    overflow-y: auto;

    background:
        linear-gradient(
            #fff,
            #fffafd
        );
}

.comments-header {
    padding: 9px;

    text-align: center;

    color: #67b7c8;

    font-weight: bold;

    background:
        repeating-linear-gradient(
            45deg,
            #f6b2d2 0px,
            #f6b2d2 8px,
            white 8px,
            white 16px
        );

    border-bottom: 2px solid #e8abc9;
}

.comments article {
    padding: 12px;

    border-bottom: 1px dashed #dfc4d2;

    font-size: 13px;
}

.comments article strong {
    color: #555;
}

.comments p {
    margin: 6px 0;

    line-height: 1.4;
}

.comment-name {
    color: #df91b9;

    font-weight: bold;
}

.comment-name span {
    float: right;

    color: #aaa;

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

.comment-name.green {
    color: #49a74f;
}

.comment-input {
    position: sticky;

    bottom: 0;

    padding: 10px;

    background: linear-gradient(white, #fff2f8);

    border-top: 2px solid #e9c0d4;

    color: #47a848;
}

.comment-input input {
    width: 85%;

    padding: 5px;

    font-family: inherit;

    background: transparent;

    border: none;

    border-bottom: 2px dotted #78c879;

    outline: none;
}


/* ═══════════════════════════════════════
   ✦ SIDEBAR ✦
   ═══════════════════════════════════════ */

.sidebar {
    display: flex;

    flex-direction: column;

    gap: 10px;

    padding: 1px 4px;
}

.sidebar-title {
    padding: 10px;

    text-align: center;

    color: white;

    font-weight: bold;

    background:
        linear-gradient(
            #bceef4,
            #78cbd9
        );

    border: 3px solid white;
    border-radius: 9px;

    box-shadow:
        0 0 0 2px #9bcfd9;
}

.sidebar a {
    position: relative;

    display: block;

    padding: 11px 7px;

    text-align: center;

    text-decoration: none;

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

    color: #72bdd4;

    background:
        linear-gradient(
            white,
            #fff0f7
        );

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

    box-shadow:
        0 0 0 2px #dfc4d1,
        0 3px 6px rgba(170,130,160,.2),
        inset 0 2px 5px white;

    transition: .15s;
}

.sidebar a:hover {
    transform: translateX(-5px);

    color: #ef83b8;

    background:
        linear-gradient(
            white,
            #ffe1ef
        );

    box-shadow:
        0 0 0 2px #eca8c7,
        0 0 12px rgba(245,150,195,.5);
}


/* ═══════════════════════════════════════
   ✦ CATEGORY ✦
   ═══════════════════════════════════════ */

.category {
    padding: 10px;

    text-align: center;

    color: white;

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

    background:
        linear-gradient(
            #ffd7e8,
            #f3a5c9
        );

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

    text-shadow:
        2px 2px #d982af;
}


/* ═══════════════════════════════════════
   ✦ SIDEBAR BOXES ✦
   ═══════════════════════════════════════ */

.sidebar-box {
    padding: 11px;

    text-align: center;

    color: #777;

    background:
        linear-gradient(
            #fff,
            #f2fcff
        );

    border: 2px solid #a9d8e3;
    border-radius: 8px;

    box-shadow:
        2px 3px 5px rgba(150,150,170,.15);
}

.sidebar-box > div {
    margin-bottom: 8px;

    color: #df87b5;

    font-weight: bold;
}

.sidebar-box p {
    margin: 5px;
}

.visitor span {
    display: block;

    margin: 7px;

    color: #4cae75;

    font-family: monospace;
    font-size: 19px;
    font-weight: bold;
}

.sidebar-box small {
    color: #aaa;
}

.fake-buttons {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 5px;
}

.fake-buttons span {
    padding: 4px 7px;

    color: #fff;

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

    background: #eea4c9;

    border: 2px solid white;

    box-shadow:
        0 0 0 1px #d38caf;
}


/* ═══════════════════════════════════════
   ✦ LINKS ✦
   ═══════════════════════════════════════ */

a {
    color: #51a9c1;

    transition: .15s;
}

a:hover {
    color: #ef82b8;

    text-shadow:
        0 0 5px #ffc4df;
}


/* ═══════════════════════════════════════
   ✦ FOOTER ✦
   ═══════════════════════════════════════ */

footer {
    margin-top: 13px;

    padding: 20px;

    text-align: center;

    color: #62baca;

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

    background-color: #ffc9df;

    background-image:
        radial-gradient(
            white 2px,
            transparent 2px
        );

    background-size: 15px 15px;

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

    box-shadow:
        0 0 0 2px #e6a6c4,
        inset 0 2px 8px white;
}

footer span {
    font-size: 11px;

    color: #d888ad;
}


/* ═══════════════════════════════════════
   ✦ SCROLLBAR ✦
   ═══════════════════════════════════════ */

::-webkit-scrollbar {
    width: 13px;
}

::-webkit-scrollbar-track {
    background: #fff0f7;

    border-left: 1px solid #e7b1cc;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            #f7c3dc,
            #eaa1c5
        );

    border: 2px solid white;
    border-radius: 10px;
}


/* ═══════════════════════════════════════
   ✦ SELECTION ✦
   ═══════════════════════════════════════ */

::selection {
    background: #ffc5df;
    color: white;
}


/* ═══════════════════════════════════════
   ✦ RESPONSIVE ✦
   ═══════════════════════════════════════ */

@media (max-width: 1100px) {

    .content {
        grid-template-columns: 220px 1fr;
    }

    .sidebar {
        grid-column: 1 / -1;
        display: grid;

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

    .sidebar-title,
    .category {
        grid-column: 1 / -1;
    }
}


@media (max-width: 700px) {

    .site {
        width: 98%;

        padding: 8px;
    }

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

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

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

    .sidebar-title,
    .category {
        grid-column: auto;
    }

    .scrap-grid,
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .welcome h1 {
        font-size: 20px;
    }
}