@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.main {
    display: flex;
    flex-direction: column;
    width: 100vw;
    min-height: 100vh;
    background-image: url("../../images/login-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    animation: fadein 1s;
}

/* Header */
header {
    height: 5rem;
    padding: 2rem;
    display: flex;
    justify-content: center;
}

/* Context */
.content {
    flex: 1;
    padding: 2rem;
}

@media (min-width: 801px){

    body > div.main {
        flex-direction: row;
        background-image: none;
    }

    header {
        height: 100vh;
        flex: 1;
        max-width: 500px;
        padding: 3rem 0;

        background-image: url("../../images/login-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .content {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media (max-width: 450px) {

    .main {
        max-height: max-content;
    }

}