:root {
    --login-window-height: 300px;
    --login-window-width: 600px;
    --login-window-padding-top: 50px;
    --border-color: lightgray;
    --border-type: solid;
    --border-width: 2px;
    --border-radius-small: 5px;
    --submit-button-color-primary: rgba(255, 10, 10, 0.7);
    --submit-button-color-secondary: white;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.center-children {
    display: grid;
    place-content: center;
}

.login-form {
    width: var(--login-window-width);
    height: var(--login-window-height);
    margin: var(--login-window-padding-top) 0 0 0;
    display: grid;
    grid-template-columns: 300px 300px;
    grid-template-rows: 1fr;
    border-radius: var(--border-radius-small);
    border: var(--border-color) var(--border-type) var(--border-width);
    box-shadow: 5px 5px 10px var(--border-color);
}

.login-form-left-image {
    width: auto;
    height: auto;
    max-width: 95%;
    max-height: 100%;
    object-fit: contain;
}

input[type="text"], input[type="password"] {
    font-size: smaller;
}

.password-input, .email-input {
    width: 250px;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 10px 0 0 0;
    border: 2px solid lightgray;
}


.password-validation, .email-validation {
    display: block;
    font-size: smaller;
}

.login-form-submit-and-remember-wrapper {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 30px;
    place-content: center;
}

.submit-input {
    width: 100px;
    height: 30px;
    border-radius: 15px;
    color: var(--submit-button-color-secondary);
    background-color: var(--submit-button-color-primary);
    border: var(--border-width) var(--border-type) transparent;
}

    .submit-input:hover {
        background-color: white;
        color: var(--submit-button-color-primary);
        border: var(--border-width) var(--border-type) var(--submit-button-color-primary);
    }

.remember-me {
    width: 15px;
    height: 15px;
    margin-top: 15px;
}

.remember-me-text {
    height: 30px;
    line-height: 30px;
}