/* Ensure full-page gray background */
body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1A1E27;
    font-family: 'Courier New', Courier, monospace;
}

/* Centered container with white background */
.container {
    width: 100%;
    max-width: 700px;   
    padding: 40px;
    background-color: #ffffff; 
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    text-align: center;     
}


#form{
    /* width:20%; */
    background-color: rgb(255, 255, 255);
    text-align: center;
    padding-top:20px;
    padding-bottom:20px;
    border: white;
    border:white;
    border-radius:2px;
    padding:25px;
}

h1{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 35px;  
    color: black;
    
}

input{
    width:100%;
    padding:15px;
    font-size: 16px;
    border:none;
    background-color: rgba(207, 207, 207, 0.315);
    border-radius: 2px;
}

#submitBtn{
    width:80%;
    padding:12px;
    text-align: center;
    font-size: 15px; 
    background-color: rgb(70, 70, 252);
    cursor:pointer;
    border:none;
    color:white;
}

#submitBtn:hover{
    background-color: rgb(105, 105, 243);
    transition: 0.5s background-color;
    
}

/* Container for first and last name */
.name-container {
    display: flex;
    justify-content: space-between;  /* Distribute space between the fields */
    gap: 10px;                      /* Add some space between the fields */
}

/* Style for input fields inside the name-container */
.half-width {
    width: 48%; /* Make each input take up roughly half of the container */
    padding: 14px 18px;
    font-size: 16px;
    border-radius: 5px;
    box-sizing: border-box;
}