/* Reset body */
body, html {
    margin: 0; padding: 0; height: 100%; width: 100%;
    overflow: hidden; font-family: 'Arial', sans-serif;
    background-color: #000;
}

/* Sidebar UI */
#sidebar {
    position: absolute;
    top: 20px; left: 20px;
    width: 250px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 20px;
    border-radius: 12px;
    z-index: 10;
    backdrop-filter: blur(5px);
    max-height: 80vh;
    overflow-y: auto;
}

#sidebar ul { list-style: none; padding: 0; margin-top: 20px;}
#sidebar li { 
    padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.2); 
    cursor: pointer; transition: 0.3s;
}
#sidebar li:hover { background: rgba(255,255,255,0.2); }

button {
    width: 100%; padding: 10px; margin-bottom: 10px;
    background: #444; color: white; border: none;
    border-radius: 6px; cursor: pointer; transition: 0.2s;
}
button:hover { background: #555; }

/* 
  Make YouTube Fullscreen 
  Maintains a 16:9 aspect ratio and clips the edges 
*/
.video-background {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    pointer-events: none; /* Prevents user from pausing the video manually */
}

.video-background iframe {
    position: absolute;
    top: 50%; left: 50%;
    width: 100vw; height: 56.25vw; /* 16:9 ratio */
    min-height: 100vh; min-width: 177.77vh; /* 16:9 ratio */
    transform: translate(-50%, -50%);
}