body, html {
    margin: 0;
    height: 100%;
    overflow: hidden;
}
#container {
    position: relative; /* Allows absolute positioning inside */
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.179); /* In case the canvas has margins or padding */
}
#video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#sidebar-container {
    visibility: hidden;
}

#sidebar-container.show {
    visibility: visible;
    position: absolute;
    top: 0;
    right: 0;
    width: 350px; /* Fixed width as requested */
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Semi-transparent black */
    display: flex;
    flex-direction: column;
    z-index: 10; /* Ensures it lays on top of the canvas */
    overflow: hidden;
    box-shadow: -5px 7px 5px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

#playButton {
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    width: 100px;
    height: 100px;
    color: white;
    font-size: 36px;
    cursor: pointer;
    border-radius: 100%;
}

#button-container, #infoPanel {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow-y: auto; /* Makes sections scrollable if content is too tall */

}
button, .file-label {
    width: 100%;
    background: #0f0f0fa2;
    color: rgb(129, 129, 129);
    text-align: center;
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    transition: background 0.3s ease;
    border-radius: 15px;
    height: 50px;
}

button:hover, .file-label:hover {
    background: #ffffff91;
    color: rgb(0, 0, 0);
}
input[type="file"] {
    display: none;
}

#resizer {
    cursor: ew-resize;
    width: 10px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: #ffffff;
    z-index: 20; /* Make sure it's above other elements for easier dragging */
}

#resizer:hover {
    background-color: #000000; /* Change color on hover for better visibility */
}
#infoPanel {
    color: white; /* Set text color to white */
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow-y: auto; /* Makes sections scrollable if content is too tall */
    background: rgba(0, 0, 0, 0.8); /* Ensure contrast for readability */
    outline: 3px solid white; /* Adds a white outline */
}

.button-row {
    display: flex;
    width: 100%;
    justify-content: space-between; /* This will put some space between the two buttons */
}

.button-row button, .button-row .file-label {
    flex: 1; /* This makes each child grow to use available space */
    margin-right: 10px; /* Adds space between the buttons */
}

.button-row .file-label {
    margin-right: 0; /* Removes margin from the last element */
}

/* Styles for the scrollbar on all elements */
::-webkit-scrollbar {
width: 8px; /* width of the entire scrollbar */
height: 8px; /* height of the scrollbar for horizontal scrolls */
}

::-webkit-scrollbar-track {
background: #2C2C2C; /* color of the track (part the thumb slides within) */
}

::-webkit-scrollbar-thumb {
background-color: #6D6D6D; /* color of the thumb itself */
border-radius: 10px; /* roundness of the ends of the scrollbar */
border: 2px solid #2C2C2C; /* creates padding around the thumb */
}

::-webkit-scrollbar-thumb:hover {
background: #555; /* color when the mouse hovers over the thumb */
}

/* Specific styles for the #infoPanel scrollbar */
#infoPanel::-webkit-scrollbar {
width: 10px; /* slightly wider than general scrollbars */
}

#infoPanel::-webkit-scrollbar-track {
background: #333; /* darker shade for the track in #infoPanel */
}

#infoPanel::-webkit-scrollbar-thumb {
background-color: #555; /* darker shade for the thumb in #infoPanel */
}

#infoPanel::-webkit-scrollbar-thumb:hover {
background: #777; /* lightens on hover */
}

#text-container {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Center the container */
    color: rgba(255, 255, 255, 0.652); /* White with 80% opacity */
    font-size: 36px; /* Font size */
    font-family: Arial, sans-serif; /* Font family */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Shadow effect */

}

.closed {
    display: none;
}