body {
font-family:sans-serif;
color: #582c4d;
background-color: #ece2d0;
line-height: 1.3em;
margin: 0;
}

header {
min-height: 38vh;
background-color: #D5B9B2;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}

header>* {
line-height: 1.3em;
margin: 0;
position: relative;
}

h2 {
font-size: 10vw;
order: -1;
}


ul.toplinks {
list-style: none;
padding: 0;
display: flex;
flex-flow:row;
gap: 0.5em;
}

.toplinks a {
text-decoration: none;
border: 1px solid #A26769;
border-radius: 10px;
background-color: #ece2d0;
padding:.25em ;
box-shadow: 0 0.2em  #A26769;
}

.toplinks li {

}

main {
margin: 1em;
display: flex;
flex-flow: column; /*combo of flex-direction and flex-wrap*/
}

.one {
flex: 1 ;
}

.two {
flex: 3 ;
}

@media screen and (min-width: 768px) {
main {
 flex-flow: row;
align-items:center;
 }
body {
width: 960px;
margin: 0 auto;
box-shadow: 0 0 1em #A26769;
border-radius: 10px;
 }
h2 {font-size: 96px;}
}