body{
    margin: auto;
    color: #fff;
    background: #224;
    font-family: sans-serif;
    display: flex; flex-direction: column;
    height: 100vh;
    overflow-y: scroll;
}

* { transition: background-color 0.3s ease-in; }

nav > a{ color: #fff; text-decoration: none; padding: 1vh 5vw; border-radius: 5px; }
nav > a:hover{ background-color: #38f3;}
nav {
    padding: 2vh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: sticky;
    top:0;
    background: #137;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

main {
    max-width: 800px;
    margin: 0 auto;
}
@media only screen and (max-width: 840px) {
    main {padding: 20px; max-width: calc(100vw - 40px); }
}

@media only screen and (max-height: 1000px) {
    p { font-size:medium; }
    h1{ font-size: 24px }
    h2{ font-size: 18.75px }
    h3{ font-size: 16px }
}