html,
body {
margin: 0;
padding: 2;
font-family: "Oswald", sans-serif;
color: white;
}
.container {
background-color: powderblue;
display: flex;
flex-direction: column;\
height: 100%;
}
.left-justify {
justify-items: left;
}
.center-justify {
align-self: center;
}
.item {
display: flex;
align-items: center;
min-height: 2.75rem;
}
header {
display: flex;
align-items: center;
background-color: powderblue;
border-color: white;
border-width: 2px;
order: 1;
}
header > * {
display: flex;
background-color: gray;
width: 33%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
main {
background-color: beige;
color: black;
width: 79%;
order: 2;
padding: 5px;
}
aside {
background-color: powderblue;
color: #222;
flex-direction: column;
order: 3;
}
aside.aside-two {
background-color: powderblue;
color: #333;
order: 4;
}
footer {
background-color: powderblue;
color: #333;
justify-content: flex-end;
flex-direction: column;
align-items: center;
border: 2px solid #000;
border-color: black;
order: 5;
}
@media (min-width: 600px) {
.container {
flex-flow: row wrap;
}
header {
grid-template-rows: subgrid;
flex: 0 0 100%;
min-height: 210px;
border: 2px solid #000;
border-color: black;
}
.centerbox {
min-width: 410px;
min-height: 210px;
text-align: center;
padding: 5px;
height: 205px;
background-color: powderblue;
}
.box {
flex: 1; /* Forces all boxes to grow/shrink equally */
text-align: center;
padding: 5px;
height: 205px;
background-color: powderblue;
}
main {
flex: 1 0 auto;
order: 3;
height: auto;
}
aside {
flex: 0 0 9%;
border-width: 2px;
border-color: black;
border: 2px solid #000;
border-color: black;
order: 2;
}
aside.aside-two {
flex: 0 0 10%;
order: 4;
}
footer {
flex: 1 0 100%;
height: 100px;
border-width: 2px;
border-color: black;
align-items: flex-end;
}
}