html, body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    background: var(--colour-primary);
    background: linear-gradient( 45deg, var(--colour-primary) 0%, var(--colour-secondary) );
    /*background: linear-gradient(35deg, #23376470 0%, #00adef14);*/
    /*background: linear-gradient(60deg, rgb(35 55 100 / 24%) 0%, rgba(0, 173, 239, 0.078));*/
    overflow-x: hidden; /* Due to editor-bar width. */
}

.build-info {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1;
    background-color: var(--colour-cyan);
    color: white;
}

main#login-page,
main#register-page{
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing);
    color: var(--colour-primary)
}

.login-card,
.register-card {
    z-index: 1;
    display: flex;
    flex-direction: column;
    background: var(--colour-primary);
    backdrop-filter: blur(10px);
    width: 400px;
    max-width: 100%;
    padding: var(--spacing);
    box-shadow: var(--box-shadow-strong);
    border-radius: var(--border-radius);
    color: var(--colour-white);

    @media( min-width: 600px ) {
        padding: 50px;
    }

    .logo {
        padding: var(--spacing);
        margin-bottom: 20px;
        max-height: 200px;
        img {
            display: block;
            height: 100%;
            width: 100%;
            object-fit: contain;
        }
    }

    h1 {
        margin: 0 0 20px;
        font-weight: bold;
        text-align: center;
    }

    form {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: var(--spacing);

        input, button {
            border-radius: var(--border-radius);
            border: none;
            padding: 10px;
        }

        button[type=submit] {
            display: block;
            font-weight: bold;
            width: 100%;
            font-size: 1.2em;
            background-color: var(--colour-secondary);
            transition: background-color 0.3s ease;

            &:hover {
                /*background-color: var(--colour-secondary-darker);*/
                filter: brightness(85%);
            }
        }
        a,
        .forgot-password-link,
        .register-link {
            width: 100%;
            text-align: center;
            margin-top: var(--spacing);
            color: var(--colour-white);

            &:hover {
                span {
                    border-bottom-color: var(--colour-primary);
                }
            }
            &:visited {
                text-decoration: none;
                color: unset;
            }

            span {
                font-weight: bold;
                border-bottom: 1px solid transparent;
                transition: border-bottom-color var(--transition-duration) ease;
            }
        }
    }

    .info-text {
        color: #FFFFFF;
    }

    button {
        display: block;
        font-weight: bold;
        width: 100%;
        font-size: 1.2em;
        background-color: var(--colour-secondary);
        transition: background-color 0.3s ease;
        border-radius: var(--border-radius);
        border: none;
        padding: 10px;

        &:hover {
            /*background-color: var(--colour-secondary-darker);*/
            filter: brightness(85%);
        }
    }
}


.failure {
    background: var(--colour-failure);
    color: var(--colour-white);
    border-radius: var(--border-radius);
    border: none;
    padding: 10px;
}


.not-you {
    margin-top: 2px;
    text-align: center;
}
.not-you a { color: white; }
.not-you a:hover { text-decoration: underline; font-weight: bold; }


footer {
    padding: var(--spacing);
    text-align: center;
    color: var(--colour-white);
    font-size: 0.9em;
}