@font-face {
    font-family: 'DS-BIOS-Font';
    src: url('https://dl.dropbox.com/s/vlxjtnvrl9s0snp/Nintendo-DS-BIOS.ttf') format('truetype');
}

body {
    background-color: #fff9f9; 
    background-image: url('https://thedrey.cc/picnic/background.jpg'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: 'DS-BIOS-Font', sans-serif; 
    font-size: 20px;
    color: #5d2e2e; 
    margin: 0;
    overflow: hidden; 
    height: 100vh;
}

#wrapper {
    width: 970px; 
    height: calc(100vh - 40px); 
    margin: 20px auto; 
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.85); 
    border: 6px solid #ff4d4d; 
    border-radius: 30px; 
    position: relative;
    z-index: 10;
}

#header {
    text-align: center;
    padding: 10px;
    border-bottom: 3px dashed #ffb7c5;
}

#squirrel-logo { width: 300px; height: auto; }

#content-area {
    display: flex;
    gap: 12px;
    padding: 15px;
    flex: 1; 
    min-height: 0; 
}

.sidebar, #main-content {
    padding: 15px; 
    border-radius: 20px;
    overflow-y: auto;
    background-color: rgba(255, 252, 252, 0.7); 
    border: 2px solid #ffcad4; 
}

.sidebar { width: 250px; }
#main-content { flex-grow: 1; border: 3px solid #ff4d4d; }

/* --- NAVIGATION & DROPDOWN --- */
.nav-links li { margin-bottom: 5px; list-style: none; }
.drop-label { color: #ff4d4d; font-weight: bold; cursor: pointer; }

.dropdown { position: relative; }
.dropdown-content {
    display: none;
    padding-left: 20px;
    font-size: 0.9em;
}
.dropdown:hover .dropdown-content { display: block; }
.dropdown-content a { display: block; padding: 2px 0; }
.drop-divider { font-size: 0.8em; color: #8c5e5e; border-top: 1px dotted #ffb7c5; margin-top: 5px; }

/* --- VISUALS --- */
h2 { font-family: 'Fredoka One', cursive; color: #d62828; border-bottom: 2px dotted #ffb7c5; }
a { color: #ff4d4d; text-decoration: none; font-weight: bold; }
a:hover { color: #d62828; }

#footer { text-align: center; font-size: 0.8em; padding: 5px; border-top: 3px dashed #ffb7c5; }

/* --- BLOSSOMS --- */
#picnic-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.blossom {
    position: absolute; border-radius: 150% 10% 150% 10%; opacity: 0.7;
    animation: fall var(--fall-time) linear infinite, sway var(--sway-time) ease-in-out alternate infinite;
}
@keyframes fall { 0% { top: -10%; transform: rotate(0deg); } 100% { top: 100%; transform: rotate(720deg); } }
@keyframes sway { 0% { transform: translateX(0); } 100% { transform: translateX(40px); } }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #ffcad4; border-radius: 10px; }