:root {
    font-family: sans-serif;
}

body {
    background-color : hsl(216, 39%, 19%); /* darker blue-grey shade */
    color            : white;

    display          : flex;
    text-align       : center;
    align-items      : center;
    justify-content  : center;
    
    height    : 100vh;
    width     : 100vw;
    font-size : 1.3em;
    margin    : 0;
}

main {
    margin    : 1em;
    display   : grid;
    gap       : 1em;
    grid-template-columns:
        [cz]   1fr 
        [logo] auto
        [en]   1fr
    ;
}

main > section {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
}

main > section#cz   { grid-area: cz;   }
main > section#en   { grid-area: en;   }
main > section#logo { grid-area: logo; }
main > section#logo > img {
    max-width: 8em;
}

main > #separator {
    grid-area : separator;
    display   : none;
    width     : 100%;
    color     : hsl(216, 39%, 40%);
}

a { color: hsl(207, 90%, 77%); }
p { margin-top: 0.5em; }

@media screen and (width < 1024px) {
    main { max-width: 90vw; }
}

@media screen and (width < 800px) {
    main > #separator { display: unset; }
    main {
        gap: 0;
        grid-template-columns: unset;
        grid-template-rows:
            [logo]      auto
            [cz]        auto
            [separator] auto
            [en]        auto
        ;
    }
}