body {
    background-color: lightgrey;
}

#wrapper {
    background-repeat: no-repeat;
    margin:  8px auto;
    padding: 6px 0;
    overflow: hidden;
    width: 100%;
    max-width: 1024px;
}
header,
footer {
    background-color: white;
    opacity: 0.74;
    border-radius: 28px;
    height: 108px;
    margin: 10px 36px;
    padding-top: 10px;
}
header > h1 {
    width: fit-content;
    margin: 0 0 0 20px;
}
nav {
    margin: 20px 0 0 20px;
}
nav > a {
    padding: 8px 20px;
    background-color: black;
    border-radius: 20px;
    color: white;
    text-decoration: none;
}
#content {
    background-color: white;
    opacity: 0.74;
    border-radius: 28px;
    min-height: 450px;
    margin: 25px 36px;
    padding: 10px 0 10px 20px;
}
#content > * {
    padding: 0;
    margin: 10px;
}
#content > h2 {
    font-size: x-large;
}
#content > h3 {
    font-size: large;
}
#content > p {
}

@media screen 
and (max-width: 19.99em) {
    header { height: 84px; }
    header > h1 { font-size: 1em; }
}

 @media screen 
 and (min-width: 20em) and (max-width: 41.99em) {
    nav > a { border-radius: 0px; }
    header { height: 84px; }
    header > h1 { font-size: 1em; }
 }

 @media screen 
 and (min-width: 20em) and (max-width: 41.99em)
 and (orientation : portrait) {
    header, #content { margin: 8px 0; }
    header { height: 80px; }
    header > h1 { font-size: 0.9em; }
    nav > a {
        border-radius: 12px;
        padding: 6px;
    }
 }
 @media screen 
 and (min-width: 20em) and (max-width: 41.99em)
 and (orientation : landscape) {
     nav > a { border-radius: 10px 0; }
     header, #content { margin: 0; }
     header { height: 84px; }
     header > h1 { font-size: 1em; }
 }
 @media screen 
 and (min-width: 42em)
 and (max-width: 60em) {
     header, #content { margin: 10px 0; }
     header { height: 84px; }
     header > h1 { font-size: 1em; }
 }