* {margin: 0; padding: 0; border: 0; box-sizing: border-box;}

body{background-color: skyblue; font-family: Verdana, Geneva, Tahoma, sans-serif;}
.header {background-color: blue; display:flex; align-items: center; justify-content: center;}
.header h1 {background-color: rgba(39, 145, 245, 0.692); padding: 20px; color:#eee;}
.navigation {background-color: orange; display: flex; align-items: center; justify-content: space-evenly;}
.navigation div {background-color: rgb(133, 72, 15); padding: 1vh 4vw; color:#eee; border: solid black 2px; border-radius: 20px; font-size: 2vw; font-weight: bold;}
.navigation div a {color:#eee;}
.content {background-color: #ffc;}


@media screen and (min-width: 320px) {
    body {display: flex; flex-flow: column wrap;}
    .header {height: 15vh; font-size: 2vw;}
    .navigation {height: 10vh; flex-direction: row; flex-wrap: wrap;}
    .content {height: 75vh; font-size: 3vw;}
    .content img {width: 100vw; aspect-ratio:6/4;}
    
}

@media screen and (min-width: 950px) {
    .header {height: 15vh; font-size: 1vw;}
    .main {display: flex; flex-direction: row;}
    .navigation {width: 20vw; min-height: 85vh; flex-direction: column;}
    .content {width: 80vw; min-height: 85vh; font-size: 1.5vw;}
    .content img {width: 35vw;}

}