/* =========================================================
   SKULLBLUEWLF
   GRUNGE / GOTH / PUNK / HISTORICAL OLD-WEB STYLE
========================================================= */


/* =========================================================
   BASIC RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    padding: 25px 15px;

    color: #d8c8b1;

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

    font-size: 14px;

    background-color: #090807;

    background-image:
        radial-gradient(
            ellipse at top,
            #30251f 0%,
            #100e0c 45%,
            #050504 100%
        );

    background-attachment: fixed;
}


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

.site {
    width: 1180px;

    max-width: 100%;

    margin: auto;
}


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

.header {
    position: relative;

    min-height: 155px;

    display: grid;

    grid-template-columns: 120px 1fr 120px;

    align-items: center;

    overflow: hidden;

    border: 4px solid #171310;

    background:
        linear-gradient(
            rgba(20, 15, 12, 0.45),
            rgba(20, 15, 12, 0.75)
        ),
        #b9a17f;

    box-shadow:
        0 0 0 2px #584739,
        0 8px 20px rgba(0,0,0,0.8);
}


/* fake aged-paper marks */

.header::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.35;

    background:
        radial-gradient(
            circle at 15% 30%,
            #251914 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle at 70% 70%,
            #251914 0 3px,
            transparent 4px
        ),
        radial-gradient(
            circle at 90% 25%,
            #251914 0 2px,
            transparent 3px
        );
}


.header-center {
    position: relative;

    z-index: 2;

    text-align: center;

    color: #1c1511;
}


.header h1 {
    margin: 5px 0;

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

    font-size: clamp(40px, 6vw, 68px);

    font-weight: bold;

    letter-spacing: 3px;

    color: #17100e;

    text-shadow:
        2px 2px 0 #8b7962;
}


.header p {
    margin: 5px;

    font-size: 16px;

    letter-spacing: 2px;
}


.header-decoration {
    font-size: 18px;

    letter-spacing: 8px;
}


.header-column {
    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* fake classical architecture */

.capital {
    width: 75px;

    height: 110px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-left: 10px solid #46392f;

    border-right: 10px solid #46392f;

    background:
        linear-gradient(
            90deg,
            #665344,
            #c1a98a,
            #665344
        );

    box-shadow:
        inset 0 0 12px #211a16;

    color: #211812;

    font-size: 36px;

    filter: grayscale(70%);
}


.capital::before,
.capital::after {
    content: "";

    position: absolute;

    width: 105px;

    height: 13px;

    background:
        linear-gradient(
            #b9a17e,
            #554438
        );

    border: 3px solid #241b16;
}


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

.top-nav {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 4px;

    padding: 9px;

    margin: 5px 0 15px;

    background: #080706;

    border-left: 2px solid #4c3b31;

    border-right: 2px solid #4c3b31;

    text-align: center;
}


.top-nav a {
    color: #c6a8c8;

    text-decoration: underline;

    padding: 2px 5px;
}


.top-nav a:hover {
    color: #ffffff;

    background: #49334d;
}


/* =========================================================
   THREE COLUMNS
========================================================= */

.layout {
    display: grid;

    grid-template-columns:
        205px
        minmax(0, 1fr)
        205px;

    gap: 15px;

    align-items: start;
}


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

.sidebar {
    display: flex;

    flex-direction: column;

    gap: 15px;
}


/* =========================================================
   SIDEBAR BOX
========================================================= */

.sidebar-box {
    position: relative;

    padding: 17px 12px 12px;

    color: #d8c9b5;

    background:
        linear-gradient(
            rgba(8,7,6,0.96),
            rgba(18,14,12,0.96)
        );

    border: 2px solid #40332b;

    box-shadow:
        0 0 0 1px #100e0c,
        0 5px 10px rgba(0,0,0,0.65);
}


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

.label {
    margin:
        -29px
        15px
        15px;

    padding: 5px 10px;

    text-align: center;

    color: #21151d;

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

    font-weight: bold;

    font-size: 16px;

    letter-spacing: 1px;

    background:
        linear-gradient(
            90deg,
            #8b6a89,
            #b08cae,
            #80627f
        );

    border: 1px solid #21191d;

    box-shadow:
        2px 3px 0 #1a1412;
}


/* =========================================================
   SIDEBAR LINKS
========================================================= */

.sidebar-links {
    display: flex;

    flex-direction: column;
}


.sidebar-links a {
    padding: 7px 3px;

    color: #cbb6c9;

    text-decoration: none;

    border-bottom: 1px dashed #4b3c43;
}


.sidebar-links a:hover {
    color: #ffffff;

    background: #392b36;

    padding-left: 8px;
}


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

.status {
    line-height: 1.5;
}

.status p {
    margin: 8px 0;
}


.stars {
    color: #a27ca4;

    font-size: 18px;

    margin-top: 10px;

    text-align: center;
}


/* =========================================================
   VISITOR COUNTER
========================================================= */

.visitor {
    text-align: center;
}


.counter {
    display: inline-block;

    padding: 6px 8px;

    margin: 5px;

    color: #d4a9d1;

    background: #050504;

    border: 2px inset #574554;

    font-family: "Courier New", monospace;

    font-size: 18px;

    letter-spacing: 4px;
}


/* =========================================================
   SIDE DECORATION
========================================================= */

.side-decoration {
    padding: 15px;

    text-align: center;

    color: #8e718d;

    font-style: italic;

    border: 1px dashed #493b3e;

    background: #0b0908;
}


.fake-statue {
    font-size: 70px;

    color: #807266;

    filter: grayscale(100%);
}


.chain {
    font-size: 25px;

    color: #70635a;

    letter-spacing: -5px;
}


/* =========================================================
   CENTER
========================================================= */

.content {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 15px;
}


/* =========================================================
   PAPER PANELS
========================================================= */

.paper {
    position: relative;

    padding: 20px;

    color: #241a15;

    background:
        linear-gradient(
            rgba(205,184,151,0.96),
            rgba(185,158,121,0.96)
        );

    border: 4px solid #211914;

    box-shadow:
        0 0 0 2px #685343,
        0 7px 0 #080706,
        0 10px 20px rgba(0,0,0,0.55);

    overflow: hidden;
}


/* grungy stains */

.paper::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.25;

    background:
        radial-gradient(
            ellipse at 10% 15%,
            #3a2920 0 3px,
            transparent 4px
        ),
        radial-gradient(
            ellipse at 85% 25%,
            #493327 0 5px,
            transparent 7px
        ),
        radial-gradient(
            ellipse at 50% 90%,
            #36251e 0 4px,
            transparent 6px
        );
}


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

.paper-title {
    position: relative;

    margin:
        -20px
        -20px
        20px;

    padding: 10px;

    text-align: center;

    color: #211713;

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

    font-size: 24px;

    font-weight: bold;

    letter-spacing: 2px;

    border-bottom: 3px double #59483a;

    background:
        rgba(218,196,161,0.55);
}


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

.paper-content {
    position: relative;

    display: grid;

    grid-template-columns: 180px 1fr;

    gap: 20px;

    align-items: center;

    line-height: 1.6;
}


.paper p {
    line-height: 1.6;
}


.paper strong {
    color: #4d254d;
}


/* =========================================================
   IMAGE PLACEHOLDERS
========================================================= */

.image-placeholder {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #d0c0a5;

    background:
        linear-gradient(
            135deg,
            #25201c,
            #0b0908
        );

    border: 5px solid #1d1713;

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

    overflow: hidden;
}


.image-placeholder span {
    font-size: 70px;

    filter: grayscale(100%);
}


.image-placeholder small {
    color: #a8957d;

    font-family: "Courier New", monospace;

    font-size: 10px;
}


.statue-image {
    height: 190px;
}


.portrait {
    height: 190px;
}


/* =========================================================
   CENTER TEXT
========================================================= */

.center-text {
    text-align: center;
}


/* =========================================================
   BLINKIE STRIP
========================================================= */

.blinkie-strip {
    position: relative;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 4px;

    margin-top: 18px;
}


.blinkie-strip span {
    display: inline-block;

    padding: 4px 7px;

    min-width: 100px;

    color: #e0cde0;

    background: #181116;

    border: 1px solid #715473;

    font-family: "Courier New", monospace;

    font-size: 10px;

    font-weight: bold;

    text-align: center;

    box-shadow:
        inset 0 0 5px #000;
}


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

.updates {
    position: relative;

    border: 2px solid #33261e;
}


.updates div {
    padding: 7px 10px;

    background: rgba(17,12,10,0.92);

    color: #d4c4ac;

    border-bottom: 1px solid #493a30;

    font-family: "Courier New", monospace;

    font-size: 12px;
}


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


.updates span {
    display: inline-block;

    width: 75px;

    color: #aa83a8;
}


.tiny-text {
    font-size: 11px;

    text-align: center;

    font-style: italic;

    color: #5d4b40;
}


/* =========================================================
   INTERESTS
========================================================= */

.interests {
    display: grid;

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

    gap: 8px;
}


.interest {
    text-align: center;

    font-size: 12px;
}


.interest-picture {
    height: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #c8b7a0;

    background: #15110f;

    border: 3px solid #332820;

    font-size: 36px;

    filter: grayscale(50%);
}


.interest p {
    margin: 5px 0;

    font-weight: bold;
}


/* =========================================================
   SHRINES
========================================================= */

.shrine-grid {
    display: grid;

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

    gap: 10px;

    margin-top: 15px;
}


.shrine-grid a {
    padding: 20px 5px;

    text-align: center;

    color: #dbc6d9;

    background: #171112;

    border: 2px solid #5a4654;

    text-decoration: none;

    font-size: 14px;
}


.shrine-grid a:hover {
    background: #382b37;

    color: white;
}


/* =========================================================
   ART
========================================================= */

.art-placeholder {
    height: 150px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #806b5a;

    background:
        repeating-linear-gradient(
            -45deg,
            #b59c78,
            #b59c78 10px,
            #aa916f 10px,
            #aa916f 20px
        );

    border: 4px dashed #5c4738;

    font-family: "Courier New", monospace;

    font-size: 13px;
}


/* =========================================================
   RIGHT SIDEBAR — BLINKIES
========================================================= */

.blinkies {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 5px;
}


.blinkies div {
    min-height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 4px;

    text-align: center;

    color: #dbc8d8;

    background: #171112;

    border: 1px solid #655064;

    font-family: "Courier New", monospace;

    font-size: 9px;

    font-weight: bold;
}


.blinkies div:hover {
    background: #453247;
}


/* =========================================================
   STAMPS
========================================================= */

.stamps {
    display: grid;

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

    gap: 5px;
}


.stamps div {
    aspect-ratio: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #cbb7c8;

    background:
        linear-gradient(
            135deg,
            #211b18,
            #0b0908
        );

    border: 3px double #766156;

    font-size: 28px;
}


/* =========================================================
   MUSIC
========================================================= */

.music {
    text-align: center;
}


.album-cover {
    width: 75px;

    height: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: auto auto 10px;

    color: #cdb6cb;

    background: #151012;

    border: 3px solid #584353;

    font-size: 35px;
}


.music p {
    font-family: "Courier New", monospace;

    font-size: 11px;
}


.music-controls {
    padding: 7px;

    color: #d0b7cf;

    letter-spacing: 5px;

    background: #0b0909;

    border: 1px solid #45333f;
}


.music-bar {
    height: 7px;

    margin-top: 8px;

    background: #070606;

    border: 1px solid #56434e;
}


.music-bar div {
    width: 35%;

    height: 100%;

    background: #8c6789;
}


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

.guestbook {
    display: block;

    padding: 8px;

    text-align: center;

    color: #dfc9dc;

    background: #181116;

    border: 1px solid #70526c;

    text-decoration: none;

    font-size: 11px;
}


.guestbook:hover {
    color: white;

    background: #483148;
}


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

footer {
    margin-top: 15px;

    padding: 15px;

    text-align: center;

    color: #bba996;

    background: #080706;

    border: 3px double #44362e;

    box-shadow:
        0 5px 15px rgba(0,0,0,0.7);
}


.footer-buttons {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 5px;
}


.footer-buttons span {
    display: inline-block;

    padding: 6px 9px;

    color: #cdb7cb;

    background: #171112;

    border: 1px solid #5c4759;

    font-family: "Courier New", monospace;

    font-size: 9px;
}


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

@media (max-width: 900px) {

    body {
        padding: 10px;
    }

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

    .sidebar {
        display: grid;

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

    .content {
        order: -1;
    }

}


@media (max-width: 600px) {

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

        padding: 20px;
    }

    .header-column {
        display: none;
    }

    .header h1 {
        font-size: 40px;
    }

    .sidebar {
        display: flex;
    }

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

    .interests {
        grid-template-columns:
            repeat(3, 1fr);
    }

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

}
/* =========================================================
   EXPANDABLE NAVIGATION
========================================================= */

.navigation-box {
    padding-top: 17px;
}


/* regular home link */

.navigation-box .main-link {
    display: block;

    padding: 7px 4px;

    margin-bottom: 3px;

    color: #cbb6c9;

    text-decoration: none;

    border-bottom: 1px dashed #4b3c43;
}


.navigation-box .main-link:hover {
    color: white;

    background: #392b36;

    padding-left: 9px;
}


/* expandable sections */

.navigation-box details {
    border-bottom: 1px dashed #4b3c43;
}


/* the clickable "- lists" text */

.navigation-box summary {
    padding: 7px 4px;

    color: #cbb6c9;

    cursor: pointer;

    list-style: none;

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


/* remove browser triangle */

.navigation-box summary::-webkit-details-marker {
    display: none;
}


/* closed section */

.navigation-box details:not([open]) summary::before {
    content: "▸ ";

    color: #927093;
}


/* open section */

.navigation-box details[open] summary::before {
    content: "▾ ";

    color: #b28aad;
}


.navigation-box summary:hover {
    color: white;

    background: #392b36;

    padding-left: 8px;
}


/* links inside a category */

.navigation-box .sub-links {
    padding: 0 0 5px 13px;
}


.navigation-box .sub-links a {
    display: block;

    padding: 5px 3px;

    color: #aa91a8;

    text-decoration: none;

    font-size: 12px;
}


.navigation-box .sub-links a:hover {
    color: white;

    background: #392b36;

    padding-left: 7px;
}
/* =========================================================
   PERSONAL LISTS
========================================================= */

.list-toggle {
    padding: 9px 12px;

    margin-top: 8px;

    color: #d8c4d6;

    background: #171112;

    border: 1px solid #574351;

    cursor: pointer;

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

    font-weight: bold;

    letter-spacing: 1px;

    list-style: none;
}


.list-toggle::-webkit-details-marker {
    display: none;
}


.list-toggle:hover {
    color: white;

    background: #3a2938;
}


/* closed toggle */

details:not([open]) .list-toggle::first-letter {
    color: #9c7698;
}


/* list itself */

.my-list {
    margin: 0 0 10px;

    padding: 10px 15px 10px 35px;

    background:
        rgba(30, 22, 18, 0.92);

    border:
        1px solid #49382e;

    list-style-type: "✦  ";
}


.my-list li {
    padding: 6px 0;

    color: #d0c0a9;

    border-bottom: 1px dashed #3f322a;
}


.my-list li:last-child {
    border-bottom: none;
}


/* checkbox */

.my-list input[type="checkbox"] {
    appearance: none;

    width: 13px;

    height: 13px;

    margin-right: 7px;

    vertical-align: -2px;

    background: #0c0a09;

    border: 1px solid #806477;

    cursor: pointer;
}


.my-list input[type="checkbox"]:checked {
    background: #765473;

    box-shadow:
        inset 0 0 0 3px #0c0a09;
}


.my-list label {
    cursor: pointer;
}


.my-list label:hover {
    color: white;
}