@import "reset.css";


main{
    display:grid;
    grid-template-areas:
    'header header header header'
    'part1 part2 part3 part4'
    'footer footer footer footer';
    margin-left:auto;
    margin-right:auto;
    width:1200px;
    background-image: url("images/clouds.jpg");
}

header{
    grid-area:header;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align:center;
    font-size:xx-large;
    padding:10px;
    margin:10px;
    flex-flow: row nowrap;
    justify-content:space-around;
    background-color: beige;
    width: 90%;
    margin-right:auto;
    margin-left:auto;
}

nav{
    width:90%;
    display:flex;
    flex-flow: row nowrap;
    justify-content:space-around;
    text-align:center;
    padding:10px;
    margin-top:10px;
    background-color:bisque;
    margin-right:auto;
    margin-left:auto;
}

section{
    width:22.5%;
    background-color:brown;
    margin-left:10px;
    margin-right:10px;
    padding:15px;
}

h2{
    font-size: x-large;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    color:yellow;
}

p{
    font-size:large;
    color:white;
}

footer{
    grid-area:footer;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align:center;
    font-size:xx-large;
    padding:10px;
    margin:10px;
    flex-flow: row nowrap;
    justify-content:space-around;
    background-color: beige;
    width: 90%;
    margin-right:auto;
    margin-left:auto;
}

@media screen  and (min-width: 601px) and (max-width:1199px) {
    section{
        font-size: xx-large;
        background-color: red;
        width:50%
    }

    p{
        font-size: x-large;
    }
      .part3{
        display:none;
    }
      .part1{
        display:none;
    }
}

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

    section{
        font-size: xx-large;
        background-color: green;
    }

    p{
        font-size: large;
    }
}

@media screen and (max-width:600px){
    section{
        background-color: blue;
        width:100%;
    }

    p{
        font-size: x-large;
        font-family:sans-serif;
    }

    #media {
        display: none;
      }

    .part2{
        display:none;
    }

    .part3{
        display:none;
    }

    .part4{
        display:none;
    }
}