:root {
    background-color: rgb(28, 27, 34);
    color: rgb(251, 251, 254);
    font-family: Poppins;
}

a {
    color: rgb(0, 96, 223);
}

main {
    width: 600px;
    margin: auto;
}

h1 {
    text-align: center;
    font-size: 5vw;
    margin: 0;
}

video {
    width: 960px;
    height: 540px;
    margin: 0 auto 0 auto;
    display: block;
}

nav {
    text-align: center;
    font-size: 2em;
}

article {
    background-color: rgb(28, 42, 72);
    border-radius: 1em;
    padding: 0.2em 1.2em 0.2em 1.2em;
    margin-top: 0.5em;
}

article:target {
    outline: solid 0.1em rgb(0, 96, 223);
}

em.sbox {
    font-style: normal;
    background-color: rgb(0, 96, 223);
    padding: 0.1em;
    border-radius: 0.4em;
    text-wrap: nowrap;
}

em.button {
    font-style: normal;
    background-color: rgb(231, 231, 231);
    padding: 0.1em;
    border-radius: 0.4em;
    outline: solid 0.1em black;
    color: black;
}

@media (orientation: portrait) {
    :root {
        font-size: 2em;
    }

    h1 {
        font-size: 7vw;
    }

    main {
        width: 100%;
    }
}