body {
    display: flex;
    margin: 0;
    height: 100vh; /* Ensure full height */
    background-color: #e9d8a6; /* Light background */
}

#gameGrid {
    flex-grow: 1; /* Make the game grid take up available space */
    display: flex;
    flex-wrap: wrap; /* Allow cards to wrap to the next line */
    justify-content: space-around; /* Space cards evenly */
}

/* Content styles */
.content {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    max-height: 100vh; /* Set a max height for scrolling */
    margin-left: 10px; /* Adjusted space for the collapsed sidebar */
    transition: margin-left 0.3s; /* Smooth transition for margin */
}

.sidebar {
    width: 60px; /* Collapsed width */
    transition: width 0.3s;
    overflow: hidden;
    background-color: #001219; /* Dark background */
    color: white;
    height: 100vh; /* Full height of viewport */
    display: flex;
    flex-direction: column; /* Arrange items in a column */
    padding-top: 20px; /* Space at the top */
}

.sidebar a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center; /* Center items vertically */
    justify-content: flex-start; /* Left-align items */
    width: 100%; /* Make links full width */
    padding: 12px; /* Add padding for better click area */
    box-sizing: border-box; /* Include padding in width calculation */
}

.sidebar a span {
    display: none; /* Hidden by default */
}

.sidebar:hover span {
    display: inline; /* Show text on hover */
    margin-left: 10px; /* Add margin to the left of the text */
}

.sidebar:hover {
    width: 200px; /* Expand width on hover */
    overflow-y: auto; /* Allow vertical scrolling */
}

/* Ensure icons are visible */
.sidebar a .material-icons {
    font-size: 24px; /* Adjust icon size */
    display: inline; /* Always display the icon */
    margin-right: 10px; /* Add margin to the right of the icon */
}

.sidebar:hover ~ .content {
    margin-left: 200px; /* Space for the expanded sidebar */
}

/* Other styles unchanged */
h1 {
    color: #001219; /* Dark color for headings */
}

h2 {
    color: #005f73; /* Color for section headings */
}

.card {
    margin: 0px; /* Reduced margin for minimal spacing */
    width: 150px; /* Fixed width for square shape */
    height: 150px; /* Fixed height for square shape */
    background-color: #ffffff; /* Card background */
    border: 1px solid #0a9396; /* Card border */
    border-radius: 30px; /* Rounded corners */
    overflow: hidden; /* Prevent overflow of content */
    transition: transform 0.2s; /* Smooth scaling effect on hover */
    cursor: pointer; /* Change cursor to pointer for clickable area */
}

.card:hover {
    border-color: #ee9b00; /* Hover border color */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

.card img {
    width: 100%; /* Ensure images take full width */
    height: 100%; /* Fixed height for the image */
    object-fit: cover; /* Ensure images cover the area */
}

.logo-container {
    width: 100%; /* Default logo width */
    height: auto; /* Set a height for the logo */
    overflow: hidden; /* Hide overflow */
    transition: width 0.3s; /* Smooth transition */
}

.logo {
    width: 100%; /* Logo takes full width of its container */
    height: auto; /* Maintain aspect ratio */
    transition: width 0.3s; /* Smooth transition for logo size */
}

.sidebar:hover .logo-container {
    width: 100px; /* Expanded logo width on hover */
}

.sidebar:hover .logo {
    width: 100%; /* Ensure logo fills container when expanded */
}

.category-link {
    color: #005f73; /* Color for the link */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make the text bold */
    transition: color 0.3s; /* Smooth transition for color change */
    position: relative; /* For pseudo-element */
}

.category-link:hover {
    color: #ee9b00; /* Change color on hover */
}

.category-link::after {
    content: ''; /* Create a pseudo-element */
    display: block;
    height: 2px; /* Height of the underline */
    background: #ee9b00; /* Color of the underline */
    transition: width 0.3s; /* Smooth transition for width */
    width: 0; /* Start with no width */
    position: absolute; /* Position it relative to the link */
    left: 0; /* Align to the left */
    bottom: -5px; /* Position below the text */
}

.category-link:hover::after {
    width: 100%; /* Expand underline on hover */
}

.lazy-load {
    opacity: 0; /* Start invisible */
    transition: opacity 0.5s ease-in; /* Fade-in transition */
}

.lazy-load.loaded {
    opacity: 1; /* Fade to visible */
}
 
/* Right Panel Styles */
.right-panel {
    width: 60px; /* Collapsed width */
    transition: width 0.3s; /* Smooth transition for width change */
    overflow: hidden; /* Hide content when collapsed */
    background-color: #001219; /* Dark background */
    color: white;
    height: 100vh; /* Full height of viewport */
    display: flex;
    flex-direction: column; /* Arrange items in a column */
    padding-top: 20px; /* Space at the top */
    position: fixed; /* Fixed to the right */
    right: 0; /* Stick to the right side */
}

.right-panel a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center; /* Center items vertically */
    justify-content: flex-start; /* Left-align items */
    width: 100%; /* Make links full width */
    padding: 12px; /* Add padding for better click area */
    box-sizing: border-box; /* Include padding in width calculation */
}

.right-panel a span {
    display: none; /* Hidden by default */
}

.right-panel:hover a span {
    display: inline; /* Show text on hover */
    margin-left: 10px; /* Add margin to the left of the text */
}

.right-panel:hover {
    width: 200px; /* Expand width on hover */
    overflow-y: auto; /* Allow vertical scrolling when expanded */
}

/* Ensure icons are visible */
.right-panel a .material-icons {
    font-size: 24px; /* Adjust icon size */
    display: inline; /* Always display the icon */
    margin-right: 10px; /* Add margin to the right of the icon */
}

.right-panel a:hover {
    background-color: #333; /* Darker background when hovering over items */
    color: #ee9b00; /* Change color when hovering */
}

.right-panel a.active {
    color: #007bff; /* Active link color */
    font-weight: bold;
}

/* Right Panel Logo */
.right-panel .logo-container {
    width: 100%; /* Default logo width */
    height: auto; /* Set a height for the logo */
    overflow: hidden; /* Hide overflow */
    transition: width 0.3s; /* Smooth transition */
}

.right-panel .logo {
    width: 100%; /* Logo takes full width of its container */
    height: auto; /* Maintain aspect ratio */
    transition: width 0.3s; /* Smooth transition for logo size */
}

.right-panel:hover .logo-container {
    width: 100px; /* Expanded logo width on hover */
}

.right-panel:hover .logo {
    width: 100%; /* Ensure logo fills container when expanded */
}

.right-panel a.nav-link {
    color: white;
}

.right-panel a.nav-link:hover {
    color: #007bff; /* Change to a blue color when hovering over links */
}

.right-panel a.nav-link .material-icons {
    font-size: 24px; /* Adjust icon size */
    display: inline; /* Always display the icon */
    margin-right: 10px; /* Add margin to the right of the icon */
}

.right-panel a.nav-link span {
    display: none; /* Hide the text by default */
}

.right-panel:hover a.nav-link span {
    display: inline; /* Show text on hover */
}