* {
    box-sizing: border-box;
    transition: all 300ms;
}
html, body {
    background: black;
    padding: 0;
    margin: 0;
}
#app {
    background: center / cover no-repeat url('../img/bg-lg.jpg');
    margin: 0 auto;
    height: 100vh;
    width: 100vw;
    max-width: 850px;
    justify-content: flex-start;
    display: grid;
    grid-template-areas: 'header' 'modal';
    grid-template-columns: 1fr;
    align-items: start;
}
#app > header {
    grid-area: header;
    max-width: 850px;
}
#app > main {
    grid-area: modal;
    max-width: 850px;

}
.flex-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
#app > header img {
    width: 50%;
    margin: 1.5rem auto;
}