/* URGH THEME1 */
:root {
    --mint: #bfd3c1;
    --chocolate: #211a1e;
    --vanilla: #fcfafa;
    --accent: #68a691;
}

/* URGH THEME2 */
[data-theme="dark"] {
    --mint: #3D2B1F;
    --chocolate: #B2FBDA;
    --vanilla: #1A120B;
    --accent: #5C3D2E;
}

/* URGH THEME3 */
[data-theme="strawberry"] {
    --mint: #FFC0CB;
    --chocolate: #9B2226;
    --vanilla: #FFF0F3;
    --accent: #FF8FA3;
}

* { box-sizing: border-box; }

body {
    background-color: var(--chocolate);
    background-image: radial-gradient(var(--accent) 1px, transparent 1px);
    background-size: 20px 20px; /* Small "chip" pattern */
    font-family: 'Jersey 20', sans-serif;
    color: var(--chocolate);
    margin: 3.5px;
    padding: 40px 20px;
    display: flex;
    justify-content: center
}
/* urgh */
#char-overlay {
    position: fixed;
    bottom: -10px;
    right: 10px;
    width: 250px;
    z-index: 1000;
    pointer-events: none;
    filter: drop-shadow(0 0 10px #fff);
}
/* MAIN SHIT */
#main-container {
    width: 100%;
    max-width: 900px;;
    margin: 0 auto;
    background-color: var(--vanilla);
    border: 5px solid var(--mint);
    outline: 3px solid var(--chocolate);
    box-shadow: 10px 10px 0px var(--accent);
}

/* BANNER SHIT */
.banner {
    background-color: var(--mint);
    background-image: url('https://file.garden/ZnNr0mYRNQ9BoevX/A0B1EB12-2E68-4115-90B6-CEDD1433F4B7.gif');
    background-size: cover;
    background-position: center;
    height: 200px;
    display: flex;
    align-items: left;
    justify-content: left;
    border-bottom: 5px solid var(--chocolate);
}

.banner-text {
    padding: 10px 20px;
    text-align: right;
    color: var(--vanilla);
}

.content-wrapper {
    display: flex;
    gap: 15px;
    padding: 20px;
}

#left-sidebar, #right-sidebar {
    flex: 1;
    min-width: 180px;
}

#center-content {
    flex: 2;
}

.box {
    background: white;
    border: 2px solid var(--chocolate);
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 4px 4px 0px var(--mint);
}

.box h3 {
    margin-top: 0;
    background: var(--mint);
    margin: -15px -15px 15px -15px;
    padding: 5px;
    text-align: center;
    border-bottom: 2px solid var(--chocolate);
}

/* Elements */
ul { list-style: url('https://file.garden/ZnNr0mYRNQ9BoevX/IMG_6913.gif'); padding-left: 20px; }
a { color: var(--chocolate); font-weight: bold; }
a:hover { background: var(--mint); }

#themeSelect {
    width: 100%;
    padding: 5px;
    background: var(--vanilla);
    border: 2px solid var(--chocolate);
}

.blinkie-area marquee {
    background: #eee;
    padding: 10px;
    border: 1px inset var(--chocolate);
}

footer {
    text-align: center;
    padding: 10px;
    font-size: 12px;
    border-top: 3px solid var(--mint);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .content-wrapper { flex-direction: column; }
}