@media (max-width: 1100px) and (min-width: 1000px) {
    header, footer{
        color:red;
    }

}

@media (max-width: 1000px) and (min-width: 800px) {
    header, footer{
        color:rgb(0, 0, 0);
    }

    #links{
        width:100%;
    }

    ul{
        display: flex;
    }

    li{
        margin-block: 1%;
        margin-inline: 5%;
    }

}

@media (max-width: 800px) and (min-width: 500px) {
    header, footer{
        color:rgb(0, 0, 0);
    }

    #links{
        width:100%;
        background-color:transparent
    }

    ul{
        display: flex;
        flex-direction: column;
    }

    li{
        margin-block: 1%;
        background-color: grey;
        text-align: center;
    }

    #wrapper{
        height: fit-content;
    }

}

@media (max-width: 500px) {
    header, footer{
        color:rgb(0, 0, 0);
    }

    #links{
        width:100%;
        background-color:transparent;
    }

    ul{
        display: flex;
        flex-direction: column;
    }

    li{
        margin-block: 1%;
        background-color: grey;
        text-align: center;
    }

    #wrapper{
        height: fit-content;
        width:100%;
    }

    body{
        display: flex;
        flex-direction: column;
    }
    #image{
        width:100%;
    }

}