.login-label {
    font-weight: bold;
}

.login-error {
    color: red;
}

#login-button {
    background-color: var(--twinetic-blue);
    border: groove var(--twinetic-green);
    border-radius: 12px;
    color: var(--twinetic-green);
    padding: 15px 32px;
    text-align: center;
    margin: 4px 2px;
    cursor: pointer;
    grid-column: span 2; /* Merges two columns */
    box-sizing: border-box; /* Ensures padding doesn’t increase the width */
    transition-duration: 0.4s;
}

#login-button:hover {
    background-color: var(--twinetic-green);
    border: groove var(--twinetic-blue);
    color: var(--twinetic-blue);
}

/* @see https://css-tricks.com/snippets/css/complete-guide-grid/#aa-css-grid-properties */
#username-password-button {
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr); /* 2 columns. The 1. column takes the space it needs, and the second grows for all remaining space. "minmax(0, 1fr)" ensures second column can shrink if user resizes the browser window */
    grid-auto-rows: auto; /* Automatically add as many rows as follow. The rows take the space they need */
    gap: 25px;
}

#username-password-button * {
    font-size: 25px;
    align-self: center;
}

/* Resize fonts for resolutions smaller 500 pixels in width */
@media(max-width: 600px) {
    #username-password-button * {
        font-size: 15px;
    }
}

#username-password-button > label {
    color: white;
    font-family: Helvetica, Arial, sans-serif;
}