/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures borders and padding do not affect width/height */
}

html, body {
    height: 100%; /* Ensures that body takes up the full viewport height */
}

/* General Body Styles */
body {
    background-color: #101826; /* Background color for the body */
    color: #ffffff; /* Text color */
    font-family: Arial, sans-serif; /* Default font */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center align horizontally */
    justify-content: flex-start; /* Align items to the top */
}

/* Menu Styles */
.menu {
    display: flex;
    justify-content: center; 
    align-items: center; 
    flex-wrap: nowrap; 
    padding: 10px 20px; 
    background-color: #101826; 
    width: 100%; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); 
    margin-bottom: 0;
}

.menu-button {
    background: none; 
    color: #ffffff; 
    padding: 10px 15px; 
    cursor: pointer; 
    font-size: 1.2rem; 
    margin: 5px; 
    text-decoration: none; 
    border: 2px solid #000; /* Add border to buttons */
    border-radius: 10px; /* Add rounded corners */
}

.menu-button:hover {
    color: lightblue; 
}

/* New style for the active menu button */
.menu-button.active {
    background-color: navy; /* Set the background to navy blue */
    color: #ffffff; /* Keep the text color white for readability */
}

/* Container Styles */
.container {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center the content inside */
    width: 100%; /* Full width */
    margin-top: 20px; /* Space below the menu for the image */
}

/* Button Container Styling */
.button-container {
    display: flex;
    align-items: center; /* Align items vertically in the center */
}

/* Image Container */
.image-container {
    max-width: 90%; /* Restrict image container width */
    height: auto; /* Maintain aspect ratio */
    display: flex; /* Leave space for buttons */
}

/* Main Image Styles */
.main-image {
    width: 100%; /* Full width of the container */
    height: auto; /* Maintain aspect ratio */
    max-height: 84vh; /* Set maximum height without changing */
    object-fit: contain; /* Scale the image nicely while maintaining aspect ratio */
    display: block; /* Remove additional space below image */
}

/* Button Styles */
.prev-button, .next-button {
    background-color: #313131; /* Button background color */
    color: #ffffff; /* Text color */
    padding: 10px 20px; /* Padding for buttons */
    text-decoration: none; /* No underline */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s, transform 0.3s; /* Animation for hover effect */
    min-width: 100px; /* Ensure minimum width for button size */
    cursor: pointer; /* Pointer cursor for buttons */
    text-align: center; /* Center the text inside the button */
    display: inline-block; /* Allow the text to be centered */
}

/* Adjust placement of buttons */
.prev-button {
    margin-right: 30px; /* Space to the right of the Previous button */
}

.next-button {
    margin-left: 30px; /* Space to the left of the Next button */
}

/* Hover effects */
.prev-button:hover, .next-button:hover {
    background-color: #212121; /* Darker color on hover */
    transform: translateY(-2px); /* Lift effect on hover */
}



.continue-button {
    background-color: green; /* Green background */
    color: #ffffff; /* White text */
    padding: 10px 20px; /* Padding for the button */
    text-decoration: none; /* No underline */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s, transform 0.3s; /* Animation for hover effect */
    min-width: 100px; /* Ensure minimum width for button size */
    cursor: pointer; /* Pointer cursor for buttons */
    text-align: center; /* Center the text inside the button */
    display: inline-block; /* Allow the text to be centered */
	margin-left: 30px; 
}