@import url(reset.css);

body {
    background-color: pink;
}

.printOnly {
    display: none;
}

@media screen and (min-width: 300px) {

.container {
    display: flex;
    flex-flow: column nowrap;
    min-height: 100vh;
}

.header {
    background-color: blueviolet;
    min-height: 33.33vh;
}

.main {
    background-color: greenyellow;
    min-height: 33.34vh;
}

.footer {
    background-color: plum;
    min-height: 33.33vh;
}

} /*End Phone*/

@media screen and (min-width: 650px) {

.container {
    flex-flow: row wrap;
}

.header {
    flex: 1 0 100%;
    min-height: 200px;
}

.main, .footer {
    flex: 1 0 50%;
    min-height: 80vh;
}

} /*End Tablet*/

@media screen and (min-width: 1100px) {

body {
    font-family: verdana;
}
.container .child {
    flex: 1 0 0;
}

img {
    max-width: 100%;
}

} /*End Computer*/