@import url(reset.css);

/* ======================================== */
/* ===== ALL STYLES ======================= */
html {
    font-size: 15px;
}

body {
    font-family: verdana;
    font-size: 1.2rem;
    background-color: hotpink;
}


/* ======================================== */
/* ===== PHONES =========================== */
@media screen and (min-width: 350px) {

body {
    background-color: sandybrown;
}

.pageWrapper {
    width: 100%;
    border: 5px solid white;
    margin: 0 auto;
}

header {
    min-height: 120px;
    background-color: rgba(250,250,250,.6);
}

header h1 {
    font-size: 2rem;
}

nav {
    min-height: 60px;
    background-color: rgba(210,210,210,.6);
}

nav a {
    display: block;
    text-align: center;
}

main {
    min-height: 350px;
    background-color: rgba(170,170,170,.6);
}

footer {
    min-height: 100px;
    background-color: rgba(130,130,130,.6);
}

aside {
    display: none;
}
}/* END OF PHONE STYLES */


/* ======================================== */
/* ===== TABLETS ========================== */
@media screen and (min-width: 750px) {

body {
    background-color: #345678;
}

.centralContent {
    display: flex;
    flex-flow: row wrap;
}

nav {
    flex: 0 1 220px;
}

main {
    flex: 1 0 auto;
}

header h1 {
    font-size: 2.2rem;
}

}/* END OF TABLET STYLES */


/* ======================================== */
/* ===== DESKTOPS ========================= */
@media screen and (min-width: 1100px) {

body {
    background-color: orange;
}

aside {
    display: block;
    background-color: #FFC;
    width: 180px;
}

}/* END OF DESKTOP STYLES */