h1{
    color: var(--font-color);
    font-size:2.5em;
    padding-top:2vw;
}

#loginBox{
    overflow:auto;
    height:fit-content; /* Changed to fit-content for better responsiveness */
    background-color: var(--card-color); /* Use white for the card */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); /* Modern, subtle elevation */
    width: clamp(300px, 50%, 450px); /* Use clamp for better resizing */
    margin: 8vh auto 0 auto; /* Increased top margin for positioning */
    border-radius:12px; /* Smoother corner radius */
    padding: 2em; /* Added padding inside the box */
}

/* Targetting non-specific inputs and textareas that aren't styled by base.css */
input,
textarea {
    /* These styles override the default if not a standard input type, but mainly targets older elements */
    box-shadow: none;
    border: none;
    border-bottom: 1px var(--border-color) solid;
    width: 100%;
    font-size: 16px;
    padding: 10px;
    padding-left: 0px;
    color: var(--font-color);
    font-family: var(--font);
    outline: none;
    background: none;
}

textarea,
input::placeholder {
    color: var(--sec-font-color); /* Use a medium gray for placeholder */
    font-size: 12px;
    letter-spacing: 1px;
    font-family: var(--font);
}

label{
    float:left;
    display: block; /* Ensures label takes its own line */
    margin-top: 1em; /* Spacing between fields */
    font-weight: 600;
}

button{
    font-size:1em;
    padding: 10px 20px;
    margin-top: 1.5em;
}

.center{
    margin-left:auto;
    margin-right:auto;
    width: clamp(300px, 70%, 800px);
    height:fit-content;
    text-align: center;
    margin-top:5vh; /* Reduced margin-top for a less 'dropped' look */
}

button a{
    color:white; /* Buttons should have white text if they use --main-color */
    text-decoration: none;
}

@media screen and (max-height:600px){
    button{
        font-size:1em;
        margin:.5em;
        padding:1em;
        width:40%;
        display:inline;
        float:left;
    }

    #registerbutton{
        margin:.5em;
    }
}