/* Add this CSS to your stylesheet */

.starter-container {
    display: flex;
    flex-direction: column; /* Stack options vertically */
    align-items: flex-start; /* Align labels to the start */
}

.starter-option {
    display: flex;
    align-items: center; /* Align items in the center vertically */
    margin: 10px 0; /* Space between options */
}

.starter-option input[type="radio"] {
    margin-right: 10px; /* Space between radio button and image/text */
}

.starter-option img {
    width: 50px; /* Set image width */
    height: 50px; /* Set image height */
    margin-right: 10px; /* Space between image and name */
}

/* Optional: Style the fieldset */
fieldset {
    border: 2px solid #ccc; /* Change this style as needed */
    border-radius: 5px; /* Rounded corners */
    padding: 10px; /* Padding inside fieldset */
}

legend {
    font-weight: bold; /* Make the legend bold */
}

.login-button {
    width: 50%; /* Full width */
    padding: 10px; /* Inner spacing */
    margin: 10px 0; /* Space between buttons */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    background-color: #4CAF50; /* Button background color */
    color: white; /* Button text color */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 16px; /* Font size */
    transition: background-color 0.3s; /* Smooth transition */
}

.action-container {
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    margin-top: 20px; /* Space above the action container */
}

.error {
    color: red; /* Style your error message */
    margin-right: 10px; /* Space between error message and link */
}

/* Optional: Prevent color change on link */
.login-button {
    color: white; /* Maintain text color */
}

.login-button:hover {
    background-color: blue /*Darker on hover */
    color: white; /* Ensure text color stays white */
}