body {
    font-family: Arial, sans-serif;
    background-color: #fff;
    margin: 0;
    padding: 0;
    width: 200px; /* Fixed width for a 2000s feel */
    margin: 0 auto; /* Center the content */
}

.left-container {
    display: flex;
    flex-direction: column; /* Stack sections vertically */
    max-width: 200px; /* Max width for the left section */
    width: 100%; /* Allow it to shrink to fit */
    box-sizing: border-box; /* Include padding in width calculation */
}

.signup-section {
    position: relative; /* Set position for absolute children */
    height: 144px; /* Set to the original height of your image */
    margin-bottom: 10px; /* Space between signup and login sections */
    text-align: center; /* Center text within the section */
    overflow: hidden; /* Ensure no overflow from child elements */
}

.signup-button {
    display: block; /* Ensure the link takes full space */
    height: 50%; /* Each link occupies half of the image */
    width: 100%;
    text-decoration: none; /* Remove underline */
    position: absolute; /* Position for the top and bottom halves */
}

.signup-button.top-button {
    background-image: url('signupbuttons.png');
    background-position: top; /* Position for the top half */
    background-size: cover; /* Scale to cover the section */
    top: 0; /* Position at the top */
}

.signup-button.bottom-button {
    background-image: url('signupbuttons.png');
    background-position: bottom; /* Position for the bottom half */
    background-size: cover; /* Scale to cover the section */
    bottom: 0; /* Position at the bottom */
}

.login-section {
    background-color: #ffffff; /* White background for login section */
    padding: 10px; /* Reduced padding for fitting */
}

.welcome-text,
.free-text {
    margin: 5px 0; /* Space between text and buttons */
    font-size: 1em; /* Adjusted size for visibility */
    font-weight: bold; /* Bold text */
    color: #333; /* Darker color for better contrast */
}

.login-text {
    margin: 5px 0; /* Space above and below the login text */
    font-weight: normal; /* Unbolded */
    font-size: 0.8em; /* Smaller size */
}

.login-row {
    display: flex;
    justify-content: flex-end; /* Align inputs to the right */
    align-items: center;
    margin-bottom: 5px; /* Space below each row */
}

.login-label {
    margin-right: 5px; /* Smaller space between label and input */
    font-size: 0.8em; /* Smaller size */
}

.login-input {
    width: 100%; /* Full width to fit container */
    max-width: 120px; /* Set a max width for the inputs */
    height: 15.385px; /* Set fixed height */
    padding: 3px; /* Light padding for input fields */
    border: 1px solid #ccc; /* Light border */
    border-radius: 3px; /* Smaller rounded corners */
    font-size: 0.8em; /* Smaller font size */
}

.login-button-container {
    width: 100%; /* Make this container take up full width */
    display: flex;
    justify-content: flex-end; /* Align button to the right */
}

.login-button {
    padding: 3px 6px; /* Minimal padding */
    border: 1px solid #ccc; /* Light border */
    border-radius: 0; /* Square corners */
    background-color: transparent; /* Colorless background */
    text-align: center; /* Center text inside the button */
    cursor: pointer;
    font-size: 0.8em; /* Smaller font size */
}

.login-button:hover {
    background-color: #eee; /* Light gray hover effect */
}

/* disabling font smoothing */
body, p, h1, h2, h3, h4, h5, h6, a, span, div {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: none;
  font-family: Arial, sans-serif;
}