body {
    font-family: Arial, sans-serif;
    background-color: #042430; /* Changed background color of the body */
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: start; /* Align items to the top */
    height: 100vh;
    color: #c7d5e0; /* Overall text color */
}

.container {
    display: flex;
    width: 80%;
    height: 80%;
    background-color: #042430; /* Dark blue-green background for the main container */
    padding: 20px;
    box-sizing: border-box; /* Ensure padding is included in width and height */
    margin-top: 20px; /* Add some margin to the top */
}

.left-column {
    flex: 1;
    text-align: center;
    padding: 10px;
    background-color: #042430; /* Dark blue-green color for the left column */
    border-right: 2px solid #121b25; /* Slightly darker blue border */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align items to the top */
    align-items: center;
    max-width: 250px; /* Set max-width for the columns */
}

.right-column {
    flex: 1;
    text-align: center;
    padding: 10px;
    background-color: #2a475e; /* Same dark blue tone for the right columns */
    margin: 0 5px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align items to the top */
    align-items: center;
    max-width: 250px; /* Set max-width for the columns */
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.logo {
    width: 200px; /* Keeping the aspect ratio by setting only the width */
    height: auto;
    border: 5px solid #1f2a36; /* Dark blue border color */
    border-radius: 50%; /* Make the border rounded to match the circular logo */
}

h1 {
    font-size: 2.5em;
    color: #2b3a4a; /* Match the second column background color */
    margin-top: 10px;
    text-shadow: 2px 2px 5px #000000; /* Black shadow effect */
}

h2 {
    font-size: 1.5em;
    color: #ffffff;
    margin-bottom: 20px;
}

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

.button {
    display: inline-block;
    margin: 10px;
    padding: 10px 20px;
    font-size: 1em;
    color: #ffffff;
    background-color: #1f2a36; /* Dark blue color */
    border: 2px solid #1f2a36;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
    cursor: pointer;
    width: 150px; /* Set a fixed width for all buttons */
    text-align: center; /* Center the button text */
}

.button:hover {
    background-color: #3a4b61; /* Slightly lighter dark blue on hover */
    border-color: #66c0f4; /* Light blue outline on hover */
    transform: translateY(-2px); /* Slight lift effect on hover */
}

.button:active {
    background-color: #121b25; /* Slightly darker dark blue on click */
    border-color: #66c0f4; /* Keep the light blue outline on click */
    transform: translateY(0); /* Remove lift effect on click */
}