* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
body{
    background-color: skyblue;
}

@media screen and (max-width: 600px) {
    
    header>h1 {
        background-color: red;
        color: blue;
        text-align: center;
        padding: 20px 20px;
    }

    nav>ul {
        list-style-type: none;
        display: flex;
        flex-direction: column;
    }

    nav>ul>li {
        width: 100%;
    }

    nav>ul>li>a {
        background-color: green;
        color: red;
        display: block;
        text-align: center;
        padding: 10px 0px;
        border: black solid 1px;
    }

    nav>ul>li>a:active {
        background-color: darkgray;
    }

    main>article>h2 {
        background-color: bisque;
        text-align: center;
    }

    main>article>p {
        background-color: aquamarine;
    }

    main>section {
        background-color: aqua;
    }

    footer {
        color: brown;
    }
}

@media screen and (min-width: 601px) {
    header > h1{
        background-color: blue;
        color: red;
        text-align: center;
        padding: 50px 50px;
    }

    nav > ul{
        list-style-type: none;
        display: flex;
        flex-direction: row;
    }

    nav > ul > li{
        width: 100%;
    }

    nav > ul > li > a{
        background-color: green;
        color: red;
        display: block;
        text-align: center;
        padding: 40px 0px;
    }

    nav > ul > li > a:active{
        background-color: yellowgreen;
        color: black;
    }

    main > article > h2 {
        background-color: skyblue;
        text-align: center;
    }

    main  article>p {
        background-color: lightseagreen;
    }

    main > section {
        background-color: skyblue;
    }

    main > section > img{
        border: black 6px solid;
        padding: 20px;
        display: block;
        margin: auto;
    }

    main > section > p{
        background-color: lightseagreen;
    }

    main > section > h2{
        text-align: center;
    }

    footer {
        background-color: black;
        color: white;
    }
}

@media screen and (min-width: 1000px) {
    
    body{
        max-width: 1800px;
    }
    
    header > h1{
        background-color: blue;
        color: red;
        text-align: center;
        padding: 70px 70px;
        border: black 4px solid;
    }

    nav > ul{
        list-style-type: none;
        display: flex;
        flex-direction: row;
    }

    nav > ul > li{
        border: black 4px solid;
        width: 100%;
    }

    nav > ul > li > a{
        background-color: green;
        color: red;
        display: block;
        text-align: center;
        padding: 60px 0px;
    }

    nav > ul > li > a:active{
        background-color: lightgreen;
        color: black;
        padding: 70px 0px;
    }

    main > article > h2 {
        background-color: skyblue;
        text-align: center;
    }

    main  article> p {
        background-color: lightseagreen;
    }

    main > section{
        display: flex;
        gap: 50px;
    }
    main > section > img{
        border: black 6px solid;
        padding: 20px;
        display: block;
        margin: auto;
    }

    main > section > p{
        background-color: lightseagreen;
    }

    main > section > h2{
        text-align: center;
    }

    footer{
        background-color: black;
        color: white;
    }
}