/* Zoom the background */
@keyframes zoom {
    from {background-size: 100% auto;}
    to {background-size: 120% auto;}
}

@keyframes unzoom {
    from {background-size: 120% auto;}
    to {background-size: 100% auto;}
}

/* No scrollbars ever! */
html {
    overflow: hidden;
}

/* Black background */
html {
    background-color: #303030;
}

/* Animations for background */
@media screen and (min-width: 769px) and (min-aspect-ratio: 8/5) {
    html {
        background-image: url("/static/images/login.e14b70ba11ea.png");
        background-size: 100% auto;

        animation-name: unzoom;
        animation-duration: 0.7s;
        /*animation-delay: 0.4s;*/
        animation-fill-mode: forwards;
        animation-timing-function: ease-out;
    }

    html:focus-within {
        animation-name: zoom;
        animation-delay: 0.25s;
        animation-duration: 0.7s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-out;
    }

}

/* Mobile device responsiveness */
@media screen and (max-aspect-ratio: 8/5) {
    .columns {
        justify-content: center;
    }

    .column.is-offset-2 {
        margin-left: 0%;
    !important
    }
}

.columns.is-90vh {
    min-height: 90vh;
}

@media screen and (max-width: 769px) {
    .field {
        margin-left: 20%;
        margin-right: 20%;
    }
}

.field.field-username {
    margin-top: 4%;
}

.field.field-password {
    margin-bottom: 4%;
}

p.is-red {
    text-align: center;
    vertical-align: middle;
    color: #b34c4c;
    margin-bottom: 4%;
}