html::before {
    background: url('img/bg.jpg') no-repeat center center fixed;
    background-size: cover;
    filter: brightness(80%) blur(1px);
}

.sidebar {
    padding: 0vh 1vw;
}

.header-inner {
    height: 14vh;
}

nav {
    height: 8vh;
}

main h1 {
    padding-top: calc(76 / 1080 * 100vh);
    color: var(--bright-green);
    text-shadow: 2px 2px 4px #000000; /* Black shadow for better readability */
    font-size: calc(60 / 1920 * 100vw);
    text-align: center;
    text-decoration: underline;
}

.categoryContainer {
    display: flex;
    column-gap: calc(90 / 1920 * 100vw);
    row-gap: calc(25 / 1080 * 100vh);
    justify-content: center;
}

.twoColumnContainer {
    grid-template-columns: repeat(2, 1fr);
}

.threeColumnContainer {
    grid-template-columns: repeat(3, 1fr);
}

.fourColumnContainer {
    grid-template-columns: repeat(4, 1fr);
}

.subcategoryContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.subcategoryContainer h2 {
    color: #ffffff; /* White text */
    text-shadow: 2px 2px 4px #000000; /* Black shadow for better readability */
    font-size: calc((2 * 16) / 1920 * 100vw);
    text-align: center;
}

.grid-container {
    row-gap: 0px;
    column-gap: 12.5px;
    margin-bottom: 12.5px; /* Space between the rows */
    padding: calc(25 / 1080 * 100vh) calc(20 / 1920 * 100vw);
    width: 62.5%;
}

.grid-item {
    width: calc(160 / 1920 * 100vw);
    height: calc(160 / 1080 * 100vh);
    box-sizing: border-box; /* Includes padding and border in the element's size calculation */
    padding: 1px;
    margin: -1px;
    border-radius: 8px; /* Dont crop tall images */
}

nav .grid-item {
    width: 100%;
    height: auto;
    margin: 0;
}

.grid-item img {
    border-radius: 8px;
    border: 2px solid var(--dark-green);
    box-sizing: border-box; /* Include padding and borders in total width and height */
}

nav .grid-item img {
    width: 100%;
    border: none;
}

main .grid-item:hover {
    transform: scale(1.2); /* Scale up button on hover */
}