@media (min-width: 1000px)
{
    body{
        margin: 0;
    }
    
    .close{
        display: none;
    }

    img:nth-child(1){
        position: relative;
        top : 0;
        width : 10%;
    }

    nav:nth-child(1) > a:nth-child(1){
        position: sticky;
        z-index: 1;
    }

    footer > nav > ul > li > a{
        font-family: "aerial";
        font-weight: 400;
        font-style: normal;
        text-decoration: underline;
        color : white;
        font-size: 1.2em;
    }

    footer > nav > ul {
        display : flex;
        flex-direction: row;
        justify-content: center;
        list-style-type: none;
        gap : 5% 5%;
        margin: 0;
        padding: 0;
        padding-bottom: 5px ;
        border-top: solid 2px #111;
        border-left: solid 2px #111;
        border-right: solid 2px #111;
    }

    footer > p {
        display : flex;
        flex-direction: row;
        justify-content: center;
        list-style-type: none;
        margin: 0;
        background-color: rgb(94, 147, 247);
        color: white;
        border-bottom: solid 2px #111;
        border-left: solid 2px #111;
        border-right: solid 2px #111;
        font-size: 1.2em;
    }

    footer > nav > ul li a {
        color: orange;
    }

    nav:nth-child(1) > div > ul{
        list-style-type: none;
        display : flex;
        flex-direction: row;
        justify-content: space-around;
        position: relative;
        top: -140px;
    }

    nav:nth-child(1) > div > ul > li > a{
        font-size: 3em;
        text-decoration: none;
        color: white;
    }

    header > nav{
        border: 2px solid black;
    }

    nav:nth-child(1){
        background-color: rgb(94, 147, 247);
    }

    html{
        background-color: rgb(189, 212, 255);
    }

    h1{
        text-align: center;
        font-size: 3.5em;
    }

    main{
        text-align: center;
    }
}

@media (min-width: 701px) and (max-width: 999px)
{
    body{
        margin: 0;
    }

    .close{
        display: none;
    }

    img:nth-child(1){
        position: relative;
        top : 0;
        width : 10%;
    }

    nav:nth-child(1) > a:nth-child(1){
        position: sticky;
        z-index: 1;
    }

    footer > nav > ul > li > a{
        font-family: "aerial";
        font-weight: 400;
        font-style: normal;
        text-decoration: underline;
        color : white;
        font-size: 1.2em;
    }

    footer > nav > ul {
        display : flex;
        flex-direction: row;
        justify-content: center;
        list-style-type: none;
        gap : 5% 5%;
        margin: 0;
        padding: 0;
        padding-bottom: 5px ;
        border-top: solid 2px #111;
        border-left: solid 2px #111;
        border-right: solid 2px #111;
    }

    footer > p {
        display : flex;
        flex-direction: row;
        justify-content: center;
        list-style-type: none;
        margin: 0;
        background-color: rgb(94, 147, 247);
        color: white;
        border-bottom: solid 2px #111;
        border-left: solid 2px #111;
        border-right: solid 2px #111;
    }

    footer > nav > ul li a {
        color: orange;
    }

    nav:nth-child(1) > div > ul{
        list-style-type: none;
        display : flex;
        flex-direction: row;
        justify-content: space-around;
        position: relative;
        top: -85px;
    }

    nav:nth-child(1) > div > ul > li > a{
        font-size: 2em;
        text-decoration: none;
        color: white;
    }

    nav:nth-child(1){
        background-color: rgb(94, 147, 247);
    }

    header > nav{
        border: 2px solid black;
    }

    html{
        background-color: rgb(189, 212, 255);
    }

    h1{
        text-align: center;
        font-size: 2.5em;
    }

    main{
        text-align: center;
    }

    main > img{
        width: 70%;
    }
}

@media (max-width: 700px)
{
    body{
        margin: 0;
    }

    .sidenav {
        height: 100%;
        width: 250px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: -250px;
        background-color: #e8e8e8;
        padding-top: 60px;
        transition: left 0.5s ease;
        }

    .sidenav ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        }

    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
        }

    .sidenav a:hover {
        color: #111;
        }

    .sidenav.active {
        left: 0;
        }

    .sidenav .close {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        }

    .burger-icon span {
        display: block;
        position: relative;
        width: 35px;
        height: 5px;
        background-color: black;
        margin: 6px 0;
        left : 2.5%;
        top: -65px;
        }

    img:nth-child(1){
        position: relative;
        top : 0;
        width : 20%;
        }

    nav:nth-child(1) > a:nth-child(1){
        position: relative;
        top : 0;
        left : 80%;
        }

    footer > nav > ul > li > a{
        font-family: "aerial";
        font-weight: 400;
        font-style: normal;
        text-decoration: underline;
        color : white;
        font-size: 1em;
        }

    footer > nav > ul {
        display : flex;
        flex-direction: row;
        justify-content: center;
        list-style-type: none;
        gap : 5% 5%;
        margin: 0;
        padding: 0;
        padding-bottom: 5px ;
        border-top: solid 2px #111;
        border-left: solid 2px #111;
        border-right: solid 2px #111;
    }

    footer > p {
        display : flex;
        flex-direction: row;
        justify-content: center;
        list-style-type: none;
        margin: 0;
        background-color: rgb(94, 147, 247);
        color: white;
        border-bottom: solid 2px #111;
        border-left: solid 2px #111;
        border-right: solid 2px #111;
    }

    footer > nav > ul li a {
        color: orange;
    }

    nav:nth-child(1){
        background-color: rgb(94, 147, 247);
    }

    header > nav{
        border: 2px solid black;
    }

    html{
        background-color: rgb(189, 212, 255);
    }

    h1{
        text-align: center;
        font-size: 1.5em;
    }

    main{
        text-align: center;
    }

    main > img{
        width: 80%;
    }
}