:root {
    --secondary-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --primary-font: 'Metropolis', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --primary-75: #F0F3F3;
    --primary-75-hover: #E3E5E5;
    --primary-75-active: #E0E0E0;
    --primary-500: #0C9980;
    --primary-500-hover: #0D8C75;
    --primary-500-active: #0B7561;
    --grey-100: #F0F0F0;
    --light-green-bg: #B8D5D1;
    --dark-grey: #7b7b7b;
    --primary-900: #11332E;
    --primary-900-hover: #0D2622;
    --primary-900-active: #061311;
    --error-red: #c73d3d;
    --warning-yellow: #bc7707;
    --shadow-box: 0 10px 10px 0 var(--hover-green-bg);
    --hover-green-bg: rgba(0, 128, 92, 0.2);
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100svh;
    font-family: var(--secondary-font);
}

.box {
    background-color: white;
    width: 100%;
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    height: 500px;
}

.rec {
    display: none;
}

.rec-pill {
    display: flex;
}

.box-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.box-sub-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;

}

.login-message {
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary-900);
    font-family: var(--primary-font);

}

.container {
    display: flex;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.logo {
    max-height: 120px;
}

.input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

input {
    display: block;
    height: 2.25rem;
    border: 2px solid var(--grey-100);
    background-color: var(--grey-100);
    padding: 0.75rem 0.5rem 0 0.5rem;
    border-radius: 0.5rem;
    width: 300px;
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
    font-family: var(--primary-font);
    font-weight: 600;
    color: var(--primary-900);
}

input:focus {
    border: 2px solid var(--primary-500);
    outline: none;
}

input:hover {
    border: 2px solid var(--primary-500-hover);
    transition: all 0.2s ease-in-out;
}

.password-eye {
    position: absolute;
    z-index: 999;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    padding: 0.5rem;
}

.password-eye:hover {
    cursor: pointer;
    background-color: var(--hover-green-bg);
    transition: all 0.2s ease-in-out;
    border-radius: 4rem;
    padding: 0.5rem;
}

.password-wrapper,
.username-wrapper {
    position: relative;
}

label {
    font-family: var(--primary-font);
    font-weight: 600;
    position: absolute;
    left: 1rem;
    color: var(--dark-grey);
    transition: all 0.1s ease-in-out;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
}

input:focus + label,
input:valid + label,
input:-webkit-autofill + label {
    font-size: 10px;
    top: 0.9rem;
    left: 0.5rem;
    color: var(--primary-500);
    font-weight: 700;
}

.button {
    border: none;
    border-radius: 1rem;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.1s ease-in-out;
    font-family: var(--primary-font);
}

.button-login {
    width: 15rem;
    height: 3rem;
}

.button-primary {
    background-color: var(--primary-500);
    color: white;
}

button:hover {
    background-color: var(--primary-500-hover);
    cursor: pointer;
    border-radius: 0.4rem;
}

button:active {
    background-color: var(--primary-500-active);
}

.button-wrapper {
    position: relative;
}

.spinner {
    display: none;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.double-bounce1,
.double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--grey-100);
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {

    0%,
    100% {
        -webkit-transform: scale(0.0)
    }

    50% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bounce {

    0%,
    100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }

    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

.languages {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.languages a {
    color: var(--dark-grey);
    font-size: 0.8rem;
    transition: all 0.2s ease-in-out;
    padding: 0.5rem 1rem;
}

.languages a:hover {
    color: var(--primary-500);
    text-decoration: none;
    text-shadow: 0 0 1px white;
    transition: all 0.2s ease-in-out;
    background-color: var(--grey-100);
    border-radius: 0.5rem;
}

.message {
    font-size: 0.8rem;
    line-height: 1rem;
    text-align: center;
    font-weight: 500;
}

.message-warning {
    color: var(--warning-yellow)
}

.message-error {
    color: var(--error-red);
    height: 0.8rem;
}

a {
    text-decoration: none;
    color: var(--primary-500);
    font-weight: 600;
}

@media only screen and (min-width: 1200px) {
    body {
        padding: 2rem;
        height: auto;
    }

    .container {
        background-color: var(--primary-75);
        border-radius: 2rem;
        width: 100%;
        height: calc(100vh - 4rem);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4rem;
        padding-left: 2rem;
        padding-right: 2rem;
        overflow-y: auto;
    }

    .box {
        -webkit-box-shadow: var(--shadow-box);
        -moz-box-shadow: var(--shadow-box);
        box-shadow: var(--shadow-box);
        height: 640px;
        width: 500px;
        margin: auto 4rem auto auto;
        flex-shrink: 0;
    }

    .input-wrapper,
    form {
        gap: 1rem;
    }

    .rec {
        display: block;
        height: calc(100vh - 8rem);
        width: 100%;
        flex-grow: 1;
        position: relative;
    }

    .rec-pill {
        background-color: var(--light-green-bg);
        color: var(--primary-900);
        padding: 0.75rem 1.25rem;
        border-radius: 1rem;
        font-weight: 600;
        font-size: 1rem;
        position: absolute;
        font-family: var(--primary-font);
    }

    .rec-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        height: 100%;
    }

    .rec-image {
        height: calc(100vh - 18rem);
        max-height: 768px;
    }

    .rec-footer {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    .rec-footer-text {
        font-size: 1.2rem;
        color: var(--primary-900);
        font-weight: 600;
        font-family: var(--primary-font);
    }

    .rec-button-primary {
        background-color: var(--primary-900);
        color: var(--grey-100);
    }

    .rec-button-primary:hover {
        background-color: var(--primary-900-hover);
    }


    .rec-button-primary:active {
        background-color: var(--primary-900-active);
    }

    .rec-button-secondary {
        color: var(--primary-900);
    }

    .rec-button-secondary:hover {
        background-color: var(--primary-75-hover);
    }

    .rec-button-secondary:active {
        background-color: var(--primary-75-active);
    }
}