/* BACKGROUND & LAYOUT */
body {
    background-image: url('fakescreen.png');
    background-size: cover; /* This stretches the image to fill the screen */
    background-position: center; /* This keeps the image centered */
    background-repeat: no-repeat; /* Stops the image from tiling/repeating */
    background-attachment: fixed; /* Keeps it from moving when you scroll */
    font-family: 'Courier New', monospace;
    margin: 0;
    height: 100vh; /* Ensures the body covers the full height of the viewport */
}
    /* This changes all <h1> headers to a specific color */
h1 {
    color: #fff; /* A nice blue to match your buttons */
}

/* This changes all <h2> headers */
h2 {
    color: #fff;
}

/* This changes all paragraph text */
p {
    color: #fff;
}
    display: flex; 
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0; 
}
.side-by-side {
    display: flex;          /* Forces children to sit in a row */
    flex-direction: row;    /* Explicitly sets horizontal alignment */
    align-items: left;    /* Centers the text vertically relative to the model */
    gap: 15px;             /* Adds space between the model and the text */
    width: 100%;
}

.bio-text {
    flex: 1;                /* Allows text to take up remaining space */
    font-family: monospace;
    text-align: left; /* Matches the vibe in your screenshot */
    color: white;           /* Adjust color based on your background */
}

model-viewer {
    flex-shrink: 0;         /* Prevents the model from getting squished */
    width: 250px;           /* Set this to whatever size you want */
    height: 350px;
}

.main-frame {
    background: rgba(0, 0, 0, 0.95);
    width: 100%;
    max-width: 1300px;
    height: 90vh;
    overflow-y: auto;
    border-radius: 12px;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.banner img { width: 100%; height: auto; display: block; border-radius: 12px 12px 0 0; }

.content-wrapper {
    display: grid;
    grid-template-columns: 320px 1fr 320px;
    gap: 15px;
    padding: 20px;
    align-items: start;
}
/* 1. The entire scrollbar area */
.main-frame::-webkit-scrollbar {
    width: 12px;               /* Width of the vertical scrollbar */
}

/* 2. The background 'track' of the scrollbar */
.main-frame::-webkit-scrollbar-track {
    background: #000000;       /* Makes the track black */
    border-radius: 0px;
}

/* 3. The actual 'grabber' or 'thumb' */
.main-frame::-webkit-scrollbar-thumb {
    background: #222222;       /* Dark grey so you can see it */
    border: 2px solid #000000; /* Adds a black border around the thumb */
    border-radius: 10px;       /* Makes it rounded */
}

/* 4. When you hover over the grabber */
.main-frame::-webkit-scrollbar-thumb:hover {
    background: #333333;       /* Becomes slightly lighter when you touch it */
}

/* For Firefox (different syntax) */
.main-frame {
    scrollbar-width: thin;
    scrollbar-color: #222222 #000000;
}

/* LEFT SIDEBAR / MESSAGE BOARD STYLES */
.left-sidebar {
background: transparent;
    color: #ffffff;
    padding: 15px;
    border-radius: 12px;
    text-align: left;
}

.input-box { background-color: rgba(10, 10, 10, 0.5); padding: 10px; border-radius: 2px; border: 0px solid #222; margin-top: 10px; }
textarea { width: 100%; height: 60px; background-color: rgba(10, 10, 10, 0.5); border: 0px solid #222; color: white; padding: 8px; border-radius: 2px; resize: none; box-sizing: border-box; }
#postBtn { width: 100%; padding: 10px; background-color: rgba(12, 12, 12, 0.5); color: white; border: none; border-radius: 2px; cursor: pointer; margin-top: 5px; font-weight: bold; }

.emoji-bar { margin: 5px 0; display: flex; flex-wrap: wrap; gap: 4px; }
.emoji-btn { background-color: rgba(12, 12, 12, 0.5); border: none; padding: 4px; border-radius: 4px; cursor: pointer; }
.emoji-btn img { width: 18px; height: 18px; }

.msg { 
    background-color: rgba(5, 5, 5, 0.5);
    padding: 12px; 
    border-radius: 8px; 
    margin-top: 10px; 
    position: relative;
    
    /* FIX: This overrides the global centering */
    text-align: left; 
}

/* Ensures the message board area stays left-heavy */
#board {
    text-align: left;
}
.msg-content { font-size: 0.95em; line-height: 1.4; }
.msg-footer { margin-top: 8px; font-size: 0.7em; color: #404040; display: flex; justify-content: space-between; }
.reply-tag { color: #404040; cursor: pointer; font-weight: bold; }
.custom-emoji { width: 20px; vertical-align: middle; }
.replying-to-indicator { font-size: 0.8em; color: #404040; margin-bottom: 5px; display: none; }

.floaty { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    width: fit-content; 
    text-align: center;
    animation: floatUpDown 2.5s ease-in-out infinite; 
}

@keyframes floatUpDown { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(10px); } 
}

/* GLOBAL ELEMENTS */
.right-sidebar { background: transparent; padding: 10px; border-radius: 8px; }
.video-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    background: transparent; /* Makes the padding 'clear' */
}
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0px; }
.bottom-section { padding: 30px; background: transparent; }
.site-footer { padding: 15px; background: #000; color: #666; font-size: 0.8em; margin-top: auto; }

/* MOBILE */
@media (max-width: 1100px) { .content-wrapper { grid-template-columns: 1fr; } .main-frame { height: 95vh; } }