/* Global reset for margins, paddings, and box-sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ensure full height for HTML and body */
html, body {
    height: 100%;
    width: 100%;
    background-image: url('images/landing_page.jpg'); /* Background image for the landing page */
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* Keep background fixed */
    font-family: Arial, sans-serif;
    color: white;
    position: relative;
}

/* Content section */
.content {
    min-height: 100%; /* Full height content */
    padding: 20px;
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: flex-start; /* Align the content to the top */
}

/* Make the button container scrollable */
.button-container {
    position: fixed; /* Fixes the button container in place */
    top: 50%;
    left: 10px;
    transform: translateY(-50%); /* Centers the buttons vertically */
    width: 120px; /* Width of button container */
    height: 300px; /* Set a fixed height for the scrollable area */
    overflow-y: auto; /* Allows vertical scrolling */
}

/* Style for individual buttons */
.button-container a {
    margin-bottom: 5px; /* Space between buttons */
}

.button-container img {
    display: block;
    width: 100%;
    max-width: 207px; /* Set max width */
    height: auto;
    cursor: pointer;
    transition: filter 0.3s ease-in-out;
}

/* Hover effect on buttons */
.button-container img:hover {
    filter: brightness(0) saturate(100%) invert(46%) sepia(78%) saturate(2315%) hue-rotate(2deg) brightness(112%) contrast(106%);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .button-container img {
        width: 120px; /* Adjust button size for tablets */
    }
}

@media (max-width: 480px) {
    .button-container img {
        width: 100px; /* Adjust button size for smaller phones */
    }
}