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

.sidebar {
    padding: 0vh 1vw;
}

.header-inner {
    height: 14vh;
}

nav {
    height: 8vh;
}

.grid-container {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    padding: calc(80 / 1080 * 100vh) calc(32 / 1920 * 100vw); /* Padding around grid */
}

/* Style image used to trigger the modal */
.grid-item {
    padding-left: 3.5vw;
    overflow: visible;
}

.scrollable-container {
    position: absolute;
    top: 22vh;
    left: 52vw;
    overflow-y: scroll; /* enables vertical scrolling */
    width: 38%; /* adjust width to fit the content */
    max-height: 62vh;
    display: flex;
    align-items: center;
    border-radius: calc(34 / 1920 * 100vw);
}

.scrollable-container img {
    flex: 1 0 auto;
    /*margin-top: 82vh;*/
    /*margin-top: calc(885 / 1080 * 100vh);*/
    margin-top: calc(100% + 16vh);
}

.scrollable-container::-webkit-scrollbar {
    width: 8px; /* sets the width of the scrollbar */
}

.scrollable-container::-webkit-scrollbar-thumb {
    background-color: #888; /* sets the color of the scrollbar thumb */
    border-radius: 4px; /* adds rounded corners to the scrollbar thumb */
}

.scrollable-container::-webkit-scrollbar-track {
    background: #f1f1f1; /* sets the color of the scrollbar track */
    border-radius: 4px;
}

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

.grid-item img {
    width: 80%; /* Make image cover button width */
}

nav .grid-item img {
    width: 100%; /* Make image cover button width */
}

.grid-item:hover {
    /* temporarily disabling this until i fix the scrollbar */
    /*transform: scale(1.05); /* Scale up button on hover */
}