/* =========================================
   PINK 2000s KAWAII WEBSITE
   ========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        radial-gradient(circle, rgba(255,255,255,.8) 1px, transparent 2px),
        #ffb6d9;

    background-size: 18px 18px;

    font-family: "VT323", monospace;
    color: #7b174b;
    font-size: 18px;
}


/* PAGE */

.page {
    width: 1050px;
    max-width: 95%;
    margin: 20px auto;
}


/* HEADER */

.header {
    position: relative;

    min-height: 220px;

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

    border: 5px solid #ff4f9a;

    background:
        linear-gradient(rgba(255,255,255,.85), rgba(255,220,240,.85)),
        repeating-linear-gradient(
            45deg,
            #fff 0px,
            #fff 4px,
            #ffd3e8 4px,
            #ffd3e8 8px
        );

    box-shadow:
        0 0 0 5px #ffc5e2,
        8px 8px 0 #d92f78;
}


.header h1 {
    margin: 0;

    font-family: "Silkscreen", monospace;
    font-size: clamp(40px, 7vw, 80px);

    color: #ff1680;

    text-shadow:
        3px 3px 0 white,
        6px 6px 0 #a90055;

    transform: rotate(-2deg);
}

.subtitle {
    margin-top: 15px;
    color: #c72c72;
}


/* DECORATIVE STARS */

.sparkle {
    position: absolute;
    color: #ff2990;
    font-size: 50px;
    text-shadow: 2px 2px white;
}

.sparkle1 {
    left: 8%;
    top: 25%;
}

.sparkle2 {
    right: 10%;
    top: 20%;
}

.sparkle3 {
    left: 20%;
    bottom: 10%;
}


/* NAV */

.nav {
    margin-top: 15px;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
}

.nav a {
    display: block;

    padding: 10px 20px;

    color: white;
    background: linear-gradient(#ff91c4, #ed3e8d);

    border: 3px outset #ffb7d7;

    text-decoration: none;
    font-family: "Silkscreen", monospace;
    font-size: 13px;

    text-shadow: 1px 1px #9b174d;
}

.nav a:hover {
    background: linear-gradient(#ffb5d5, #ff579f);
    transform: translateY(2px);
}


/* MARQUEE */

.marquee {
    margin: 12px 0;

    overflow: hidden;

    border: 3px inset #ff91bd;

    background: #fff1f8;

    color: #ec2381;

    white-space: nowrap;
}

.marquee span {
    display: inline-block;
    padding: 6px;

    animation: scroll 14s linear infinite;
}

@keyframes scroll {
    from {
        transform: translateX(100%);
    }

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


/* MAIN GRID */

.layout {
    display: grid;

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

    gap: 12px;

    align-items: start;
}


/* BOXES */

.box,
.welcome-box,
.diary {
    background: rgba(255, 240, 248, .96);

    border: 3px solid #ef579d;

    box-shadow:
        inset 0 0 0 2px white,
        4px 4px 0 rgba(177, 31, 100, .35);

    margin-bottom: 12px;
}

.box {
    padding: 10px;
}

.box-title {
    margin: -10px -10px 10px;

    padding: 8px;

    background: linear-gradient(
        to bottom,
        #ffb3d4,
        #ee559c
    );

    border-bottom: 3px solid #c62d76;

    color: white;

    font-family: "Silkscreen", monospace;
    font-size: 12px;

    text-shadow: 1px 1px #a21857;
}


/* SIDEBAR LINKS */

.sidebar .box a {
    display: block;

    padding: 4px 5px;

    color: #c32370;
    text-decoration: none;

    border-bottom: 1px dotted #e88ab2;
}

.sidebar .box a:hover {
    background: #ffc9e3;
    padding-left: 10px;
}


/* STATUS */

.status {
    margin: 8px 0;
    padding: 7px;

    background: #ffe0ee;

    border: 2px inset #ff9ac4;

    font-size: 16px;
}


/* COUNTER */

.counter {
    padding: 7px;

    background: #222;

    color: #ff62ac;

    border: 3px inset #777;

    font-family: monospace;
    text-align: center;
    letter-spacing: 4px;
}


/* WELCOME */

.welcome-box {
    padding: 12px;
}

.welcome-box h2 {
    margin: 0 0 15px;

    color: #ec197d;

    font-family: "Silkscreen", monospace;
    font-size: 20px;
}

.welcome-inner {
    display: flex;
    gap: 20px;
    align-items: center;
}

.pixel-heart {
    min-width: 90px;
    height: 90px;

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

    background: #ff8fbe;

    border: 5px outset #ffc3df;

    color: white;

    font-size: 60px;

    text-shadow: 3px 3px #c62770;
}


/* TWO COLUMNS */

.two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}


/* UPDATES */

.update {
    padding: 7px;

    border-bottom: 1px dashed #e477a7;
}


/* DIARY */

.diary {
    padding: 10px;
}

.diary-paper {
    padding: 15px;

    min-height: 230px;

    background:
        repeating-linear-gradient(
            transparent,
            transparent 27px,
            #f2a5c4 28px
        ),
        #fff7fb;

    border: 2px solid #f3b5cf;

    font-size: 18px;
}

.date {
    color: #ed3e8d;
    font-family: "Silkscreen", monospace;
    font-size: 12px;
}

.signature {
    text-align: right;
    color: #e43c88;
}


/* MUSIC */

.mini-screen {
    padding: 10px;

    background: #29202b;
    border: 4px inset #ff8dbd;

    color: #ffc1dc;
    text-align: center;
}

.screen-title {
    font-family: monospace;
    font-size: 11px;
    margin-bottom: 8px;
}

.cd {
    width: 70px;
    height: 70px;

    margin: 10px auto;

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

    border-radius: 50%;

    background:
        radial-gradient(circle, #fff 5%, #ff82b9 7%, #c92773 35%, #ffb5d7 36%, #ef3b91 65%, #77163f 66%);

    color: white;
    font-size: 25px;
}

.music-bar {
    height: 7px;
    margin: 10px 0;

    background: #555;

    border: 1px solid #aaa;
}

.music-bar span {
    display: block;

    width: 42%;
    height: 100%;

    background: #ff5aa3;
}

.music-controls {
    font-family: monospace;
    font-size: 12px;
}


/* BUTTONS */

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fake-button {
    width: 88px;
    min-height: 50px;

    padding: 6px;

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

    text-align: center;

    background: linear-gradient(#ffabd0, #ed4c96);

    border: 3px outset #ffd0e4;

    color: white;

    font-family: monospace;
    font-size: 10px;

    text-shadow: 1px 1px #9d1b56;
}


/* GUESTBOOK */

.pink-button {
    width: 100%;

    padding: 9px;

    border: 3px outset #ffc0dc;

    background: linear-gradient(#ffacd1, #ed4d96);

    color: white;

    font-family: "Silkscreen", monospace;
    font-size: 10px;

    cursor: pointer;
}

.pink-button:active {
    border-style: inset;
}


/* RIGHT SIDEBAR */

.rightbar .box p {
    margin: 5px 0;
    padding: 4px;

    background: #ffe3f0;
}


/* BLINKING BADGE */

.blink {
    padding: 12px;

    border: 3px dotted white;

    background: #ec4c96;

    color: white;

    text-align: center;

    font-family: "Silkscreen", monospace;
    font-size: 11px;

    animation: blink 1.3s infinite alternate;
}

.blink span {
    font-size: 16px;
}

@keyframes blink {
    from {
        opacity: .65;
    }

    to {
        opacity: 1;
    }
}


/* FOOTER */

footer {
    margin-top: 20px;

    padding: 20px;

    border: 4px solid #ec4d96;

    background: #fff0f7;

    text-align: center;
}

.footer-stars {
    color: #ff3c94;
    font-size: 25px;
}

.tiny {
    font-size: 13px;
}


/* MOBILE */

@media (max-width: 800px) {

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

    .sidebar,
    .rightbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sidebar .box,
    .rightbar .box {
        margin-bottom: 0;
    }

}

@media (max-width: 500px) {

    .page {
        max-width: 97%;
    }

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

    .header {
        min-height: 170px;
    }

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

    .welcome-inner {
        flex-direction: column;
    }

}
.old-window {
    border: 4px outset #ffc2dc;
    background: #ffeef7;
    box-shadow: 5px 5px #b9296b;
}

.window-bar {
    padding: 6px;
    background: linear-gradient(90deg, #ed4b97, #ffabd0);
    color: white;
    font-family: "Silkscreen", monospace;
    font-size: 12px;
}

.window-bar span {
    float: right;
}

.window-content {
    padding: 15px;
    border: 3px inset #ffb0d0;
}
/* =========================================
   DIARY PAGE
   ========================================= */

.diary-page {
    position: relative;
}


/* DIARY LAYOUT */

.diary-layout {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 15px;
    align-items: start;
}


/* DIARY SIDEBAR */

.diary-sidebar {
    position: sticky;
    top: 15px;
}

.diary-sidebar .box a {
    display: block;
    padding: 5px;

    color: #c32370;
    text-decoration: none;

    border-bottom: 1px dotted #e88ab2;
}

.diary-sidebar .box a:hover {
    background: #ffc9e3;
}


/* CALENDAR */

.mini-calendar {
    padding: 7px;

    border: 2px inset #ffb0d0;
    background: #ffe7f2;

    text-align: center;
    font-family: monospace;
    font-size: 12px;
}

.calendar-month {
    padding: 5px;
    margin-bottom: 6px;

    background: #ef559b;
    color: white;

    font-size: 10px;
}

.calendar-days {
    color: #d42c78;
    word-spacing: 5px;
}

.calendar-numbers {
    line-height: 24px;
}

.calendar-numbers b {
    display: inline-block;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: #ff5aa2;
    color: white;
}


/* LITTLE NOTE */

.diary-note {
    margin: 20px 5px;

    padding: 15px;

    background: #fff1a9;

    border: 2px solid #e7c967;

    color: #8f5b2c;

    text-align: center;

    transform: rotate(-4deg);

    box-shadow: 3px 4px rgba(120, 50, 70, .25);

    font-family: "Caveat", cursive;
    font-size: 20px;
}


/* ENTRIES */

.entries {
    min-width: 0;
}

.diary-entry {
    position: relative;

    margin-bottom: 25px;
    padding: 15px;

    background: #fff7fb;

    border: 3px solid #ef579d;

    box-shadow:
        6px 7px 0 rgba(183, 37, 104, .3);

    transform: rotate(-.3deg);
}

.diary-entry:nth-child(even) {
    transform: rotate(.4deg);
}


/* FAKE TAPE */

.entry-tape {
    position: absolute;

    width: 95px;
    height: 25px;

    top: -13px;
    left: 38%;

    background: rgba(255, 180, 210, .75);

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

    transform: rotate(-2deg);
}


/* ENTRY HEADER */

.entry-header {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    padding: 10px;

    background:
        linear-gradient(
            to right,
            #ffd3e5,
            #fff0f7
        );

    border-bottom: 2px dashed #ed72a9;
}

.entry-date {
    color: #e93483;

    font-family: "Silkscreen", monospace;
    font-size: 11px;
}

.entry-header h2 {
    margin: 8px 0 0;

    color: #bf2468;

    font-family: "Caveat", cursive;
    font-size: 32px;
}

.entry-number {
    color: #ec4b96;

    font-family: monospace;
    font-size: 13px;
}


/* ENTRY DETAILS */

.entry-details {
    padding: 7px 10px;

    color: #c23b76;

    background: #ffe6f1;

    border-bottom: 1px solid #f2a2c3;

    font-family: monospace;
    font-size: 13px;
}


/* PAPER */

.paper {
    position: relative;

    margin-top: 10px;
    padding: 18px 25px 20px;

    min-height: 250px;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 29px,
            #f1bad0 30px
        ),
        #fffafd;

    border-left: 3px solid #ff8bb8;

    font-family: "Caveat", cursive;
    font-size: 22px;

    line-height: 30px;
}

.paper p {
    margin: 0 0 12px;
}

.paper .dear {
    color: #df337e;
    font-weight: 700;
    font-size: 25px;
}


/* SIGNATURE */

.entry-signature {
    text-align: right;

    color: #df337e;

    font-size: 26px;
    font-weight: 700;
}


/* ENTRY FOOTER */

.entry-footer {
    margin-top: 10px;
    padding: 7px;

    border-top: 2px dotted #e47da8;

    color: #cf3b79;

    text-align: center;

    font-family: monospace;
    font-size: 11px;
}


/* BOTTOM */

.diary-bottom {
    margin: 30px 0;

    padding: 20px;

    border: 3px dashed #ef579d;

    background: #fff0f7;

    text-align: center;

    color: #d33179;
}

.diary-bottom span {
    font-size: 25px;
}

.diary-bottom a {
    color: #e3287e;
    font-family: monospace;
}


/* MOBILE DIARY */

@media (max-width: 700px) {

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

    .diary-sidebar {
        position: static;
    }

    .diary-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .diary-note {
        display: none;
    }

}

@media (max-width: 500px) {

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

    .paper {
        padding: 15px;
        font-size: 19px;
        line-height: 27px;
    }

    .entry-header h2 {
        font-size: 27px;
    }
/* ============================================================
   SMOSH SHRINE
   FULL SCRAPBOOK / 2000s FAN SITE DESIGN
   ============================================================ */


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

body.smosh-page {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 15px 15px,
            rgba(255,255,255,.65) 1px,
            transparent 2px
        ),
        #e8a5c3;

    background-size: 30px 30px;

    color: #4b3040;

    font-family: "VT323", monospace;

    box-sizing: border-box;
}

body.smosh-page *,
body.smosh-page *::before,
body.smosh-page *::after {
    box-sizing: border-box;
}

body.smosh-page a {
    text-decoration: none;
}


/* ============================================================
   MAIN WEBSITE
   ============================================================ */

.smosh-wrapper {

    width: min(1180px, calc(100% - 32px));

    margin: 38px auto 55px;

    background: #fffdfb;

    border: 5px solid #bd3d73;

    box-shadow:
        10px 10px 0 #87304f,
        0 0 0 3px white,
        0 0 0 8px #dc7fa5;

    position: relative;

    overflow: hidden;
}


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

.smosh-header {

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 28px,
            rgba(190,61,115,.09) 29px
        ),
        #ffeaf3;

    border-bottom: 4px solid #bd3d73;

    padding: 16px 22px 0;

    text-align: center;
}

.header-sparkles {

    color: #cf4a7f;

    font-family: "Caveat", cursive;

    font-size: 25px;

    letter-spacing: 4px;

    margin-bottom: 2px;
}

.header-main {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 30px;
}

.header-decoration {

    color: #d14a83;

    font-size: 46px;

    font-family: "Caveat", cursive;
}

.header-title-area {

    min-width: 0;
}

.header-mini {

    font-family: "Silkscreen", monospace;

    font-size: 9px;

    letter-spacing: 3px;

    color: #805367;
}

.header-main h1 {

    margin: 3px 0;

    font-family: "Silkscreen", monospace;

    font-size: clamp(26px, 5vw, 51px);

    line-height: 1.2;

    color: #c13d73;

    text-shadow:
        3px 3px 0 #f4b1ca;
}

.header-main p {

    margin: 4px 0 17px;

    font-family: "Caveat", cursive;

    font-size: 22px;

    color: #60414d;
}

.header-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 8px 12px;

    border-top: 2px dashed #d08ca6;

    color: #76475b;

    font-family: "Silkscreen", monospace;

    font-size: 8px;
}


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

.smosh-nav {

    display: flex;

    justify-content: center;

    background: #c94178;

    border-bottom: 4px solid #87304f;
}

.smosh-nav a {

    padding: 13px 20px;

    color: white;

    font-family: "Silkscreen", monospace;

    font-size: 9px;

    border-right: 1px solid rgba(255,255,255,.35);

    transition: .15s;
}

.smosh-nav a:hover,
.smosh-nav a.selected {

    background: #fff09b;

    color: #633c4c;
}


/* ============================================================
   FAKE BROWSER
   ============================================================ */

.browser-strip {

    height: 34px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 4px 10px;

    background: #ded8dc;

    border-bottom: 2px solid #afa2a8;

    color: #6b5961;

    font-size: 14px;
}

.browser-buttons {

    color: #c94178;

    font-size: 8px;

    letter-spacing: 2px;
}

.browser-url {

    flex: 1;

    background: white;

    border: 1px solid #bdb4b8;

    padding: 2px 8px;

    box-shadow: inset 1px 1px 2px rgba(0,0,0,.08);
}


/* ============================================================
   THREE COLUMN LAYOUT
   ============================================================ */

.smosh-columns {

    display: grid;

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

    gap: 17px;

    padding: 20px;

    background:

        linear-gradient(
            90deg,
            rgba(240,214,224,.55) 1px,
            transparent 1px
        ),

        #fffdfb;

    background-size: 28px 28px;
}

.left-sidebar,
.right-sidebar,
.smosh-content {

    min-width: 0;
}


/* ============================================================
   GENERIC WINDOWS
   ============================================================ */

.window-box {

    background: white;

    border: 3px solid #a74c70;

    margin-bottom: 17px;

    box-shadow: 4px 4px 0 #edb0c7;
}

.window-title {

    display: flex;

    justify-content: space-between;

    padding: 7px 9px;

    background: #c94178;

    color: white;

    font-family: "Silkscreen", monospace;

    font-size: 8px;
}

.window-body {

    padding: 4px;
}

.menu a {

    display: block;

    padding: 8px 7px;

    color: #623d4d;

    font-size: 16px;

    border-bottom: 1px dashed #e3b3c5;
}

.menu a:last-child {

    border-bottom: none;
}

.menu a:hover {

    background: #ffe1ed;

    padding-left: 12px;
}


/* ============================================================
   FAN PROFILE
   ============================================================ */

.mini-profile {

    background: #fff4f8;

    border: 3px solid #ce5985;

    margin-bottom: 18px;

    padding-bottom: 12px;

    box-shadow: 4px 4px 0 #eab0c6;
}

.mini-profile-title {

    padding: 7px;

    text-align: center;

    background: #f2c0d4;

    font-family: "Silkscreen", monospace;

    font-size: 8px;
}

.profile-avatar {

    width: 78px;

    height: 78px;

    margin: 16px auto 11px;

    display: grid;

    place-items: center;

    background: #c94178;

    border: 5px dotted white;

    outline: 3px solid #c94178;

    border-radius: 50%;

    color: white;

    font-size: 31px;
}

.profile-info {

    padding: 0 10px;
}

.profile-info p {

    margin: 6px 0;

    font-size: 15px;
}

.rating {

    text-align: center;

    color: #c94178;

    letter-spacing: 3px;
}


/* ============================================================
   SIDEBAR NOTE
   ============================================================ */

.sidebar-note {

    position: relative;

    margin: 24px 4px;

    padding: 19px 13px 13px;

    background: #fff096;

    border: 1px solid #c7a735;

    box-shadow: 5px 5px 0 rgba(80,40,50,.17);

    transform: rotate(-3deg);

    font-family: "Caveat", cursive;

    font-size: 19px;
}

.sidebar-note b {

    font-size: 21px;
}

.sidebar-note p {

    margin: 7px 0;
}

.sidebar-note span {

    display: block;

    text-align: right;
}

.note-pin {

    position: absolute;

    top: -10px;

    left: 50%;

    color: #c94178;

    font-family: Arial;
}


/* ============================================================
   STAMP
   ============================================================ */

.stamp-box {

    padding: 14px;

    margin-top: 25px;

    text-align: center;

    background: white;

    border: 2px dashed #c18ba3;
}

.fake-stamp {

    display: inline-block;

    padding: 10px;

    border: 3px double #b84c75;

    color: #b84c75;

    font-family: "Silkscreen", monospace;

    font-size: 8px;

    transform: rotate(-7deg);
}

.stamp-box small {

    display: block;

    margin-top: 14px;

    font-family: "Caveat", cursive;

    font-size: 15px;
}


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

.mini-shrines {

    margin-top: 19px;

    background: #fff;

    border: 3px solid #8f6681;

    box-shadow: 4px 4px 0 #d9b7ca;
}

.mini-shrine-title {

    padding: 7px;

    text-align: center;

    background: #dfcce5;

    font-family: "Silkscreen", monospace;

    font-size: 8px;
}

.mini-shrines a {

    display: block;

    padding: 6px 8px;

    border-bottom: 1px dashed #dfc5d5;

    color: #70455c;

    font-size: 15px;
}

.mini-shrines a:hover {

    background: #ffe5f0;
}

.mini-shrines .coming-soon {

    color: #9d8390;
}


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

.welcome-box {

    position: relative;

    min-height: 280px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding: 28px;

    margin-bottom: 17px;

    background:

        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 29px,
            #ead9df 30px
        ),

        #fffef9;

    border: 3px solid #75616a;

    box-shadow: 7px 7px 0 #e5abc1;

    transform: rotate(-.35deg);

    overflow: hidden;
}

.tape {

    position: absolute;

    width: 100px;

    height: 24px;

    background: rgba(255,220,125,.76);

    z-index: 5;
}

.tape-one {

    top: -9px;

    left: 22%;

    transform: rotate(-4deg);
}

.tape-two {

    bottom: -9px;

    right: 18%;

    transform: rotate(5deg);
}

.welcome-left {

    flex: 1;

    min-width: 0;

    text-align: center;
}

.tiny-label {

    font-family: "Silkscreen", monospace;

    font-size: 8px;

    letter-spacing: 2px;

    color: #86566b;
}

.welcome-left h2 {

    margin: 10px 0;

    font-family: "Silkscreen", monospace;

    font-size: clamp(20px, 3vw, 34px);

    line-height: 1.35;

    color: #c33f75;
}

.handwriting {

    max-width: 480px;

    margin: 10px auto;

    font-family: "Caveat", cursive;

    font-size: 23px;

    line-height: 1.15;
}

.little-links span {

    display: inline-block;

    padding: 6px 8px;

    margin: 4px;

    background: #c94178;

    color: white;

    font-family: "Silkscreen", monospace;

    font-size: 7px;

    border: 1px solid #8c3156;
}


/* ============================================================
   TICKET
   ============================================================ */

.welcome-ticket {

    width: 108px;

    flex-shrink: 0;

    padding: 12px 8px;

    background: #fff09b;

    border: 2px dashed #ad872b;

    text-align: center;

    transform: rotate(7deg);

    box-shadow: 3px 3px 0 rgba(100,70,20,.12);
}

.ticket-top {

    padding-bottom: 7px;

    border-bottom: 1px dashed #b08a2f;

    font-family: "Silkscreen", monospace;

    font-size: 7px;
}

.welcome-ticket strong {

    display: block;

    margin: 12px 0;

    font-family: "Silkscreen", monospace;

    font-size: 10px;

    line-height: 1.5;
}

.ticket-line {

    border-top: 2px dotted #b18b32;
}

.welcome-ticket small {

    font-size: 9px;
}


/* ============================================================
   INFO STRIP
   ============================================================ */

.info-strip {

    display: grid;

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

    gap: 7px;

    margin: 20px 0;

    padding: 7px;

    background: #e6d8df;

    border: 3px solid #9b7c89;
}

.info-strip div {

    padding: 9px 6px;

    background: white;

    border: 2px dashed #c49bad;

    text-align: center;
}

.info-strip b {

    display: block;

    font-family: "Silkscreen", monospace;

    font-size: 7px;

    color: #8d5b70;
}

.info-strip span {

    display: block;

    margin-top: 4px;

    color: #c23d73;

    font-family: "Caveat", cursive;

    font-size: 18px;
}


/* ============================================================
   SECTION BARS
   ============================================================ */

.big-section-bar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    margin: 30px 0 16px;

    padding: 9px 13px;

    background: #c94178;

    border: 3px solid #87304f;

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

    color: white;

    font-family: "Silkscreen", monospace;

    font-size: 9px;
}

.big-section-bar small {

    font-size: 7px;

    text-align: right;
}

.big-section-bar.purple {

    background: #8b6aa1;

    border-color: #644b76;
}

.big-section-bar.yellow {

    background: #dca52c;

    border-color: #98731d;
}


/* ============================================================
   CAST BOARD
   ============================================================ */

.cast-board {

    position: relative;

    padding: 15px;

    background:

        radial-gradient(
            #c6a37f 1px,
            transparent 1.5px
        ),

        #d7bb96;

    background-size: 9px 9px;

    border: 4px solid #806346;

    box-shadow:
        inset 0 0 0 5px #c4a37c,
        7px 7px 0 #dc9db7;
}

.board-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 9px 11px;

    margin-bottom: 16px;

    background: #fff7df;

    border: 2px solid #907354;
}

.board-header b {

    display: block;

    font-family: "Silkscreen", monospace;

    font-size: 9px;
}

.board-header small {

    font-family: "Caveat", cursive;

    font-size: 17px;
}

.pushpin {

    color: #c94178;

    font-size: 21px;
}


/* ============================================================
   POLAROID GRID
   ============================================================ */

.cast-photo-grid {

    display: grid;

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

    gap: 16px;

    align-items: start;
}

.cast-polaroid {

    position: relative;

    display: block;

    padding: 8px 8px 12px;

    background: white;

    border: 1px solid #b9adb1;

    box-shadow: 4px 5px 0 rgba(60,35,35,.22);

    color: #4b3040;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.cast-polaroid:hover {

    transform: rotate(0deg) scale(1.08) !important;

    box-shadow: 8px 10px 0 rgba(60,35,35,.28);

    z-index: 20;
}

.p1 {
    transform: rotate(-4deg);
}

.p2 {
    transform: rotate(4deg);
}

.p3 {
    transform: rotate(-2deg);
}

.p4 {
    transform: rotate(3deg);
}

.p5 {
    transform: rotate(-5deg);
}

.p6 {
    transform: rotate(3deg);
}


/* ============================================================
   COLLAGE IMAGE CROPS
   ============================================================ */

.photo-slot {

    width: 100%;

    height: 140px;

    overflow: hidden;

    background-color: #ead9df;

    background-image: url("smosh-collage.png");

    background-repeat: no-repeat;

    background-size: 486px 486px;
}


/*
   ONE COLLAGE = MULTIPLE PHOTO AREAS

   If you rename the image, change the URL above.

   These crops are deliberately different.
*/

.photo-a {

    background-position:
        0 0;
}

.photo-b {

    background-position:
        -285px 0;
}

.photo-c {

    background-position:
        -180px -175px;
}

.photo-d {

    background-position:
        0 -177px;
}

.photo-e {

    background-position:
        0 -326px;
}

.photo-f {

    background-position:
        -305px -310px;
}

.photo-g {

    background-position:
        0 0;
}

.polaroid-name {

    padding-top: 7px;

    text-align: center;

    font-family: "Caveat", cursive;

    font-size: 21px;
}

.polaroid-note {

    text-align: center;

    color: #9d5d78;

    font-family: "Caveat", cursive;

    font-size: 15px;
}


/* ============================================================
   BOARD BOTTOM
   ============================================================ */

.board-bottom {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 6px;

    margin-top: 18px;

    padding: 9px;

    background: #f5e4c5;

    border: 2px dashed #92704e;
}

.board-bottom span {

    color: #6e5137;

    font-family: "Silkscreen", monospace;

    font-size: 6px;
}


/* ============================================================
   COURTNEY + SHAYNE FOLDER
   ============================================================ */

.dynamic-folder {

    position: relative;

    margin-top: 40px;
}

.folder-tab {

    display: inline-block;

    position: relative;

    z-index: 2;

    padding: 8px 20px;

    background: #edc956;

    border: 3px solid #a37a1d;

    border-bottom: none;

    font-family: "Silkscreen", monospace;

    font-size: 8px;

    transform: rotate(-2deg);
}

.folder-body {

    margin-top: -2px;

    padding: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.25) 25%,
            transparent 25%
        ),
        #fff0a7;

    border: 3px solid #a37a1d;

    box-shadow: 7px 7px 0 #e1b1c5;
}

.folder-title {

    text-align: center;

    font-family: "Silkscreen", monospace;

    font-size: 15px;

    color: #b64471;
}

.folder-subtitle {

    text-align: center;

    font-family: "Caveat", cursive;

    font-size: 19px;
}

.dynamic-inside {

    display: flex;

    align-items: center;

    gap: 28px;

    margin-top: 18px;
}

.dynamic-photo {

    width: 160px;

    flex-shrink: 0;

    padding: 8px 8px 12px;

    background: white;

    border: 1px solid #c1b2b5;

    box-shadow: 4px 5px 0 rgba(60,30,40,.2);

    transform: rotate(-4deg);
}

.dynamic-photo .photo-slot {

    height: 145px;
}

.dynamic-photo span {

    display: block;

    padding-top: 6px;

    text-align: center;

    font-family: "Caveat", cursive;

    font-size: 18px;
}

.dynamic-writing {

    flex: 1;

    min-width: 0;
}

.scribble-title {

    color: #9b5570;

    font-family: "Caveat", cursive;

    font-size: 26px;
}

.dynamic-writing ul {

    margin: 8px 0;

    padding-left: 20px;

    font-size: 18px;
}

.dynamic-writing li {

    margin: 5px 0;
}

.pink-highlight {

    margin-top: 13px;

    padding: 9px;

    background: #ffc5da;

    border: 2px solid #c46789;

    font-family: "Caveat", cursive;

    font-size: 19px;

    transform: rotate(1deg);
}


/* ============================================================
   LORE
   ============================================================ */

.lore-section {

    margin-top: 40px;
}

.lore-intro {

    padding: 14px;

    background: #eee4f4;

    border: 3px solid #9273a7;

    text-align: center;
}

.lore-intro b {

    font-family: "Silkscreen", monospace;

    font-size: 9px;
}

.lore-intro p {

    max-width: 600px;

    margin: 6px auto 0;

    font-family: "Caveat", cursive;

    font-size: 20px;
}

.lore-folder {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 14px;

    padding: 12px;

    background: #f5edf8;

    border: 3px solid #9273a7;
}

.lore-folder details {

    background: white;

    border: 2px solid #a584b5;

    box-shadow: 3px 3px 0 #dac8e2;
}

.lore-folder summary {

    display: flex;

    justify-content: space-between;

    padding: 11px;

    cursor: pointer;

    color: #694b7a;

    font-family: "Silkscreen", monospace;

    font-size: 8px;

    list-style: none;
}

.lore-folder summary::-webkit-details-marker {

    display: none;
}

.lore-folder details div {

    padding: 0 12px 10px;
}

.lore-folder p {

    font-family: "Caveat", cursive;

    font-size: 19px;
}

.lore-folder small {

    color: #9d6689;
}


/* ============================================================
   ERAS
   ============================================================ */

.eras-box {

    margin-top: 40px;

    padding: 18px;

    background: #dff0ef;

    border: 3px solid #679394;

    box-shadow: 7px 7px 0 #a9d1d1;
}

.eras-header {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    color: #4e7778;
}

.eras-header > span {

    color: #c94178;

    font-size: 20px;
}

.eras-header b {

    display: block;

    text-align: center;

    font-family: "Silkscreen", monospace;

    font-size: 12px;
}

.eras-header small {

    display: block;

    text-align: center;

    font-family: "Caveat", cursive;

    font-size: 17px;
}

.era-buttons {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    margin: 16px 0;
}

.era-buttons button {

    padding: 8px 12px;

    background: white;

    border: 2px solid #63898a;

    cursor: pointer;

    color: #4e6d6e;

    font-family: "Silkscreen", monospace;

    font-size: 7px;
}

.era-buttons button:hover {

    background: #fff09a;

    transform: translateY(-2px);
}

#era-display {

    padding: 14px;

    background: white;

    border: 2px dashed #73999a;

    text-align: center;
}

.era-label {

    color: #759092;

    font-family: "Silkscreen", monospace;

    font-size: 7px;
}

#era-display h3 {

    margin: 6px 0;

    color: #bb4c76;

    font-family: "Silkscreen", monospace;

    font-size: 12px;
}

#era-display p {

    margin: 0;

    font-family: "Caveat", cursive;

    font-size: 21px;
}


/* ============================================================
   VIDEOS
   ============================================================ */

.videos-section {

    margin-top: 40px;
}

.video-wall {

    position: relative;

    min-height: 570px;

    padding: 20px;

    background:

        repeating-linear-gradient(
            45deg,
            #fff3c9,
            #fff3c9 10px,
            #ffefbb 10px,
            #ffefbb 20px
        );

    border: 4px solid #b58a35;

    box-shadow: 7px 7px 0 #e1b0c3;

    overflow: hidden;
}

.video-polaroid {

    position: absolute;

    width: 205px;

    padding: 8px 8px 11px;

    background: white;

    border: 1px solid #c0b1ad;

    box-shadow: 5px 5px 0 rgba(70,50,30,.2);

    color: #4b3928;

    transition: .2s;
}

.video-polaroid:hover {

    transform: rotate(0deg) scale(1.07) !important;

    z-index: 30;
}

.video-polaroid img {

    width: 100%;

    display: block;

    border: 1px solid #ddd;
}

.video-polaroid b {

    display: block;

    padding-top: 7px;

    font-family: "Caveat", cursive;

    font-size: 18px;
}

.video-polaroid small {

    color: #9c7429;
}

.video-1 {

    left: 5%;

    top: 28px;

    transform: rotate(-5deg);
}

.video-2 {

    right: 5%;

    top: 25px;

    transform: rotate(5deg);
}

.video-3 {

    left: 30%;

    top: 260px;

    transform: rotate(2deg);
}


/* ============================================================
   VIDEO NOTES
   ============================================================ */

.video-note {

    position: absolute;

    width: 145px;

    min-height: 115px;

    padding: 13px;

    text-align: center;

    box-shadow: 4px 5px 0 rgba(60,40,30,.18);

    font-family: "Caveat", cursive;

    font-size: 20px;
}

.video-note b {

    display: block;

    margin: 4px 0;

    font-family: "Silkscreen", monospace;

    font-size: 7px;
}

.video-note small {

    font-size: 15px;
}

.chocolate {

    right: 24%;

    top: 285px;

    background: #ffc5da;

    border: 3px solid #bd547c;

    transform: rotate(-7deg);
}

.moose {

    left: 5%;

    top: 300px;

    background: #dac9eb;

    border: 3px solid #896ba1;

    transform: rotate(6deg);
}

.theater {

    right: 5%;

    bottom: 35px;

    background: #c9e8ef;

    border: 3px solid #57919e;

    transform: rotate(4deg);
}


/* ============================================================
   RIGHT SIDEBAR
   ============================================================ */

.now-playing {

    margin-bottom: 17px;

    background: #29232b;

    color: white;

    border: 4px solid #171219;

    box-shadow: 5px 5px 0 #d996b2;
}

.np-title {

    display: flex;

    justify-content: space-between;

    padding: 7px;

    background: #c94178;

    font-family: "Silkscreen", monospace;

    font-size: 8px;
}

.cassette {

    width: 125px;

    height: 73px;

    margin: 18px auto 10px;

    padding: 9px;

    background: #d7d4d7;

    border: 3px solid #777;

    border-radius: 7px;
}

.cassette-label {

    padding: 5px;

    background: #ffc3da;

    color: #663449;

    text-align: center;

    font-family: "Silkscreen", monospace;

    font-size: 8px;
}

.cassette-reels {

    margin-top: 7px;

    text-align: center;

    color: #555;
}

.now-playing p {

    padding: 0 12px;

    font-size: 15px;
}

.equalizer {

    padding: 0 0 12px;

    text-align: center;

    color: #ff86b5;

    letter-spacing: 2px;
}


/* ============================================================
   RIGHT BOXES
   ============================================================ */

.right-box {

    margin-bottom: 17px;

    background: white;

    border: 3px solid #bd5a82;

    box-shadow: 4px 4px 0 #efb3ca;
}

.right-box-title {

    padding: 8px;

    background: #f2c0d5;

    color: #743d54;

    text-align: center;

    font-family: "Silkscreen", monospace;

    font-size: 8px;
}

.obsessions {

    padding: 9px;
}

.obsessions div {

    padding: 5px 3px;

    border-bottom: 1px dashed #e3b4c6;

    font-size: 15px;
}

.channel {

    padding: 9px;

    border-bottom: 1px dashed #dfb2c2;
}

.channel:last-child {

    border-bottom: none;
}

.channel b {

    display: block;

    color: #b64372;

    font-family: "Silkscreen", monospace;

    font-size: 7px;
}

.channel span {

    font-family: "Caveat", cursive;

    font-size: 17px;
}


/* ============================================================
   RIGHT STICKY
   ============================================================ */

.right-sticky {

    position: relative;

    margin: 22px 3px;

    padding: 19px 13px 13px;

    background: #fff09a;

    border: 1px solid #c4a534;

    box-shadow: 4px 5px 0 rgba(70,40,40,.18);

    transform: rotate(3deg);

    font-family: "Caveat", cursive;

    font-size: 19px;
}

.right-sticky b {

    font-size: 21px;
}

.right-sticky p {

    margin: 8px 0;
}

.right-sticky small {

    display: block;

    text-align: right;
}

.sticky-tape {

    position: absolute;

    width: 70px;

    height: 17px;

    left: 50%;

    top: -9px;

    transform: translateX(-50%) rotate(-3deg);

    background: rgba(255,216,116,.75);
}


/* ============================================================
   BLINKIES
   ============================================================ */

.blinkies {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 5px;

    margin: 25px 0;
}

.blinkies span {

    padding: 6px 7px;

    background: #c94178;

    border: 1px solid #8c3156;

    color: white;

    font-family: "Silkscreen", monospace;

    font-size: 6px;
}

.blinkies span:nth-child(2) {

    background: #8d70a4;
}

.blinkies span:nth-child(3) {

    background: #dda62b;
}

.blinkies span:nth-child(4) {

    background: #6ba0a2;
}


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

.guestbook-box {

    padding: 12px;

    background: #fff;

    border: 3px dashed #bd5a82;

    text-align: center;

    transform: rotate(-2deg);
}

.guestbook-title {

    padding-bottom: 6px;

    color: #b64372;

    font-family: "Silkscreen", monospace;

    font-size: 8px;

    border-bottom: 1px dashed #dfb2c2;
}

.guestbook-box p {

    margin: 10px 0 2px;

    font-family: "Caveat", cursive;

    font-size: 17px;
}

.guestbook-box strong {

    color: #c94178;

    font-family: "Silkscreen", monospace;

    font-size: 7px;
}

.guestbook-stars {

    margin-top: 8px;

    color: #dca52c;

    letter-spacing: 2px;
}


/* ============================================================
   CHARACTERS
   ============================================================ */

.characters-area {

    padding: 28px 25px 36px;

    background:

        repeating-linear-gradient(
            0deg,
            #ffe9f2 0,
            #ffe9f2 29px,
            #f4cada 30px
        );

    border-top: 5px double #c83d78;

    border-bottom: 5px double #c83d78;
}

.character-heading {

    margin-bottom: 22px;

    color: #bd4c77;

    text-align: center;

    font-family: "Silkscreen", monospace;

    font-size: 13px;
}

.character-heading span {

    color: #dda62b;
}

.character-grid {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 17px;
}

.character-card {

    width: 145px;

    min-height: 130px;

    padding: 13px;

    border: 3px solid;

    box-shadow: 5px 5px 0 rgba(70,40,50,.17);

    text-align: center;

    font-family: "Caveat", cursive;
}

.character-card b {

    display: block;

    font-family: "Silkscreen", monospace;

    font-size: 7px;

    line-height: 1.5;
}

.character-card small {

    display: block;

    margin-top: 8px;

    font-size: 16px;
}

.character-symbol {

    display: block;

    margin-bottom: 5px;

    font-size: 28px;
}

.chosen {

    background: #dac9eb;

    border-color: #80649d;

    transform: rotate(-4deg);
}

.boho {

    background: #fff09b;

    border-color: #ae8e29;

    transform: rotate(3deg);
}

.courtney-character {

    background: #ffc4da;

    border-color: #bd4e78;

    transform: rotate(-2deg);
}

.dart {

    background: #c9e8ef;

    border-color: #57919e;

    transform: rotate(5deg);
}


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

.smosh-footer {

    padding: 24px;

    background: #c94178;

    border-top: 4px solid #87304f;

    color: white;

    text-align: center;
}

.smosh-footer p {

    margin: 9px 0;

    font-family: "Caveat", cursive;

    font-size: 20px;
}

.smosh-footer small {

    font-size: 11px;
}

.smosh-footer a {

    color: white;

    font-family: "Silkscreen", monospace;

    font-size: 8px;
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 950px) {

    .smosh-columns {

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

    .right-sidebar {

        display: none;
    }

    .cast-photo-grid {

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

}


/* ============================================================
   RESPONSIVE — PHONE
   ============================================================ */

@media (max-width: 700px) {

    .smosh-wrapper {

        width: calc(100% - 12px);

        margin: 15px auto 30px;

        border-width: 4px;

        box-shadow:
            5px 5px 0 #87304f,
            0 0 0 2px white,
            0 0 0 5px #dc7fa5;
    }

    .smosh-columns {

        display: block;

        padding: 12px;
    }

    .left-sidebar {

        display: none;
    }

    .header-decoration {

        display: none;
    }

    .header-bottom {

        justify-content: center;

        flex-wrap: wrap;

        gap: 7px;
    }

    .smosh-nav {

        overflow-x: auto;

        justify-content: flex-start;
    }

    .smosh-nav a {

        flex-shrink: 0;

        padding: 11px 12px;

        font-size: 7px;
    }

    .welcome-box {

        min-height: 255px;

        padding: 20px;
    }

    .welcome-ticket {

        display: none;
    }

    .welcome-left {

        width: 100%;
    }

    .info-strip {

        grid-template-columns: 1fr;
    }

    .cast-photo-grid {

        grid-template-columns: 1fr 1fr;

        gap: 13px;
    }

    .photo-slot {

        height: 125px;
    }

    .dynamic-inside {

        flex-direction: column;
    }

    .dynamic-photo {

        width: 175px;
    }

    .dynamic-writing {

        width: 100%;
    }

    .lore-folder {

        grid-template-columns: 1fr;
    }

    .video-wall {

        min-height: 920px;
    }

    .video-polaroid {

        width: 180px;
    }

    .video-1 {

        left: 3%;

        top: 25px;
    }

    .video-2 {

        right: 3%;

        top: 220px;
    }

    .video-3 {

        left: 3%;

        top: 440px;
    }

    .chocolate {

        right: 3%;

        top: 650px;
    }

    .moose {

        left: 3%;

        top: 680px;
    }

    .theater {

        right: 3%;

        top: 790px;
    }

}


/* ============================================================
   RESPONSIVE — SMALL PHONE
   ============================================================ */

@media (max-width: 450px) {

    .header-main h1 {

        font-size: 23px;
    }

    .header-main p {

        font-size: 18px;
    }

    .cast-photo-grid {

        grid-template-columns: 1fr 1fr;
    }

    .cast-polaroid {

        padding: 6px;
    }

    .photo-slot {

        height: 105px;
    }

    .polaroid-name {

        font-size: 18px;
    }

    .big-section-bar {

        flex-direction: column;

        gap: 4px;

        text-align: center;
    }

    .big-section-bar small {

        text-align: center;
    }

}