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

body{background-color: lightgoldenrodyellow; font-family: Verdana, Geneva, Tahoma, sans-serif;}

.navigation {background-color: orange; display: flex; align-items: center; justify-content: space-evenly;}
.navigation div {background-color: #074722; padding: 1vh 4vw; color:#eee; border: solid white 2px; font-size: 1.5vw; font-weight: regular;}
.navigation div a {color:#eee;}
.content {background-color: rgb(99, 177, 109);}


@media screen and (min-width: 320px) {
    body {display: flex; flex-flow: column wrap;}
    .navigation {height: 10vh; flex-direction: row; flex-wrap: wrap;}
    .content {width: 100%; min-height: 90vh; position: relative;}
    .box1 {background-color: lightcoral; height: 35vh; aspect-ratio: 2/1; position: absolute; top: 12%; left: 10%;}
    .box2 {background-color: aqua; height: 40vh; aspect-ratio: 1/1; position: absolute; top: 48%; left: 55%;}

    
}

@media screen and (min-width: 950px) {
    body {display: flex; flex-direction: row;}
    .navigation {width: 20%; min-height: 100vh; flex-direction: column;}
    .content {width: 80%; min-height: 100vh; position: relative;}
    .box1 {background-color: lightcoral; height: 35vh; aspect-ratio: 2/1; position: absolute; top: 15%; left: 10%;}
    .box2 {background-color: aqua; height: 40vh; aspect-ratio: 1/1; position: absolute; top: 45%; left: 55%;}

}