* {
    cursor: url('res/assets/cursor.cur'), auto;
}
body, html {
    background-color: #007e7d; /* Sets the background color of the website */
    height: 100%;
    margin: 0;
    padding: 10px; /* Adds padding around the entire body for a uniform gap */
    box-sizing: border-box;
}
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 200px;
    float: left;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align the buttons */
}

.button {
    width: 100%; /* Ensures buttons fill the sidebar width */
    text-align: center; /* Center the text inside the buttons */
    margin-bottom: 10px; /* Adds a margin to the bottom of each button */
}
.button:last-child {
    margin-bottom: 0; /* Removes the margin from the bottom of the last button */
}
.content {
    margin-left: 220px; /* Increased left margin to create a gap between sidebar and content */
    padding: 16px;
}

.fixed-gif {
    position: fixed;
    bottom: 20px;  /* Appropriate margin from bottom */
    left: 20px;    /* Appropriate margin from left */
    z-index: 1000;
    width: 200%;
    max-width: 200px;
    max-height: 200px;
}

.gif-container {
    width: 100%; /* Takes the full width of its parent to help center the image */
    text-align: center; /* Centers the image horizontally */
    padding: 10px 0; /* Adds vertical spacing around the image */
}

.gif-container img {
    width: 80%; /* Keeps the original width of the image */
    height: auto; /* Keeps the original height of the image */
    display: inline-block; /* Ensures text-align center works on the image */
}

.popup {
    position: absolute;
    background-color: #fff;
    border: 1px solid black;
    padding: 5px;
    z-index: 1000;
    visibility: hidden; /* Start hidden and only show on copy */
}

.popup.visible {
    visibility: visible;
}

.popup.hidden {
    visibility: hidden;
}

.first-banner img {
    width: 100%; /* Makes the image stretch to fill the container */
    height: auto; /* Maintains the aspect ratio of the image */
    display: block; /* Removes any extra space below the image */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three equal columns */
    grid-gap: 20px; /* Increased gap between grid items */
    padding: 20px; /* Adds padding around the entire grid container */
    margin-top: 20px; /* Top margin for spacing above the grid */
    box-sizing: border-box; /* Includes padding in width calculation */
}

.grid-item {
    padding: 10px; /* Padding inside each grid item for space around images */
    box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
}

.grid-item img {
    width: 100%; /* Ensure images fit their containers */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below images */
}

.grid-item p {
    margin-top: 8px; /* Add space between image and text */
    text-align: center; /* Center-align text */
    color: #333; /* Optional: Text color */
    font-size: 14px; /* Optional: Text size */
}

.music-player {
    margin: 8px;
    border: 1px solid #000;
}

.controls button {
    padding: 4px 8px;
    margin-right: 4px;
    font-size: 12px;
}

.controls {
    overflow: hidden; /* Prevents child elements from overflowing */
    padding: 10px;
}

.song-title {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    margin-top: 4px;
    border: 1px solid #ccc;
    animation: scroll-title 9s linear infinite;
}

@keyframes scroll-title {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

@media (max-width: 768px) {
    body {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center-align the children */
    }
    .sidebar {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row; /* Align buttons horizontally */
        justify-content: space-around; /* Even spacing between buttons */
        flex-wrap: wrap; /* Allow items to wrap onto the next line if needed */
    }
  
    .music-player {
        width: 100%; /* Full width for music player */
        order: 2; /* Ensure it comes after the top navigation bar */
    }
    .content {
        margin-top: 20px; /* Provide some space between top nav and content */
        margin-left: 0; /* Align content to the left on small screens */
        margin-right: 0; /* Align content to the right on small screens */
        padding: 10px; /* Add padding for small screens */
        width: auto; /* Auto width for fluid layout on mobile */
    }
    .grid-container {
        grid-template-columns: 1fr; /* One column on smaller screens */
    }
    .grid-item {
        grid-column: 1;
    }
}



grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three equal columns */
    grid-gap: 20px; /* Increased gap between grid items */
    padding: 20px; /* Adds padding around the entire grid container */
    margin-top: 20px; /* Top margin for spacing above the grid */
    box-sizing: border-box; /* Includes padding in width calculation */
}

.grid-item {
    padding: 15px; /* Padding inside each grid item for space around images */
    box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
}

.grid-item img {
    width: 100%; /* Ensure images fit their containers */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below images */
}

.grid-item p {
    margin-top: 8px; /* Add space between image and text */
    text-align: center; /* Center-align text */
    color: #333; /* Optional: Text color */
    font-size: 14px; /* Optional: Text size */
}

/* Specific desktop grid sizing and placement, assuming previous grid-area settings are correct */
.grid-item:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
.grid-item:nth-child(2) { grid-area: 1 / 2 / 2 / 4; }
.grid-item:nth-child(3) { grid-area: 7 / 2 / 8 / 3; } /*Place with 12*/
.grid-item:nth-child(4) { grid-area: 4 / 3 / 5 / 4; }
.grid-item:nth-child(5) { grid-area: 3 / 1 / 4 / 4; }
.grid-item:nth-child(6) { grid-area: 4 / 1 / 6 / 2; }
.grid-item:nth-child(7) { grid-area: 5 / 1 / 6 / 3; }
.grid-item:nth-child(8) { grid-area: 4 / 2 / 5 / 3; }
.grid-item:nth-child(9) { grid-area: 2 / 2 / 3 / 4; } /*Placed with 1 and 3*/
.grid-item:nth-child(10) { grid-area: 5 / 3 / 6 / 4; }
.grid-item:nth-child(11) { grid-area: 6 / 1 / 7 / 4; }
.grid-item:nth-child(12) { grid-area: 7 / 1 / 8 / 2; } /* Changed to fit within the grid */
/* New grid-area settings for images 13 through 18 */
.grid-item:nth-child(13) { grid-area: 8 / 1 / 9 / 2; }
.grid-item:nth-child(14) { grid-area: 8 / 2 / 9 / 3; }
.grid-item:nth-child(15) { grid-area: 8 / 3 / 9 / 4; } /* Now moved to a clear row */
.grid-item:nth-child(16) { grid-area: 9 / 1 / 10 / 2; }
.grid-item:nth-child(17) { grid-area: 9 / 2 / 10 / 3; }
.grid-item:nth-child(18) { grid-area: 9 / 3 / 10 / 4; } /* Now moved to a clear row */
.grid-item:nth-child(19) { grid-area: 7 / 3 / 8 / 4; } /*Place with 12*/

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr; /* One column on smaller screens */
        grid-gap: 10px; /* Smaller gap on mobile */
        padding: 10px; /* Smaller padding on mobile */
    }
    .grid-item {
        grid-column: 1; /* Align all items in one column */
        grid-row: auto; /* Reset the row span */
    }
}