* {
margin: 2px;
box-sizing: border-box;
}
body {
height: 95vh;
background-color: #ffffff
font-family: Arial, sans-serif;
text-align: center;
color: white;
font-size: 24px;
display: flex;
flex-direction: column;
}
header {
background-color: #21417a ;
padding: 2em 0;
}
.main {
display: flex;
flex: 1;
}
.left {
background-color: #21417a ;
padding: 3em 0;
flex: 1 1 100px;
}
main {
background-color: #21417a ;
padding: 3em 0;
flex: 5 5 150px;
}
.right {
background-color: #21417a ;
padding: 3em 0;
flex: 1 1 200px;
}
footer {
background-color: #21417a ;
padding: 1em 0;
}
@media all and (max-width: 550px) {
.main {
flex-direction: column;
}
main {
padding: 5em 0;
}
}