@media (min-width: 1000px)
{
    body > nav > ul {
        display : flex;
        flex-direction: row;
        justify-content: center;
        list-style-type: none;
        gap : 1% 1%;
        background-color: red;
        margin: 0;
        padding: 0.5%;
    }
    body > nav > ul > li{
        border : 1px solid black;
        padding: 0.3%;
        background-color:rgb(138, 97, 97) ;
        border-radius: 10px;
    }

    .current{
        border : 1px solid black;
        padding: 0.3%;
        background-color:rgb(209, 68, 68) ;
        border-radius: 10px;
    }

    nav > ul > li > a{
        font-family: "Quintessential", serif;
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        color : white;
    }

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

    footer > nav > ul {
        display : flex;
        flex-direction: row;
        justify-content: center;
        list-style-type: none;
        gap : 5% 5%;
        margin: 0;
        padding-bottom: 5px ;
        background-color: rgb(87, 3, 3);
    }

    footer > p {
        display : flex;
        flex-direction: row;
        justify-content: center;
        list-style-type: none;
        margin: 0;
        background-color: rgb(87, 3, 3);
        color: white;
    }

    footer > nav > ul li a {
        color: rgb(196, 140, 149);
    }

    main > section > h1 {
        color: rgb(202, 36, 36);
        display: flex ;
        justify-content: center;
        font-family: "Quintessential", serif;
        font-size: 3em;
    }

    main > section > table {
        display: grid;
        grid-template-columns: max-content ;
        justify-self: center;
    }

    tr > th{
        border : 3px solid rgb(161, 48, 48);
        font-family: "Quintessential", serif;
        font-size: 1.3em;
    }

    tr > td{
        border : 3px solid rgb(0, 0, 0);
        font-size: 1.2em;
    }

}

@media (max-width: 700px){
        body > nav > ul {
        display : flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        list-style-type: none;
        gap : 1% 1%;
        background-color: red;
        margin: 0;
        padding: 0.5%;
    }
    body > nav > ul > li{
        border : 1px solid black;
        padding: 1%;
        background-color:rgb(138, 97, 97) ;
        border-radius: 10px;
        font-size: 1em;
    }

    .current{
        border : 1px solid black;
        padding: 1%;
        background-color:rgb(209, 68, 68) ;
        border-radius: 10px;
        font-size: 1em;
    }

    nav > ul > li > a{
        font-family: "Quintessential", serif;
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        color : white;
    }

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

    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 ;
        background-color: rgb(87, 3, 3);
    }

    footer > p {
        display : flex;
        flex-direction: row;
        justify-content: center;
        list-style-type: none;
        margin: 0;
        background-color: rgb(87, 3, 3);
        color: white;
    }

    footer > nav > ul li a {
        color: rgb(196, 140, 149);
    }

    main > section > h1 {
        color: rgb(202, 36, 36);
        display: flex ;
        justify-content: center;
        font-family: "Quintessential", serif;
        font-size: 3em;
    }

    main > section > table {
        display: grid;
        grid-template-columns: min-content ;
        justify-self: center;
    }

    tr > th{
        border : 3px solid rgb(161, 48, 48);
        font-family: "Quintessential", serif;
        font-size: 1em;
    }

    tr > td{
        border : 3px solid rgb(0, 0, 0);
        font-size: 1em;
    }

}

@media (min-width: 701px) and (max-width: 999px)
{
    body > nav > ul {
        display : flex;
        flex-direction: row;
        justify-content: center;
        list-style-type: none;
        gap : 1% 1%;
        background-color: red;
        margin: 0;
        padding: 0.5%;
    }
    body > nav > ul > li{
        border : 1px solid black;
        padding: 0.3%;
        background-color:rgb(138, 97, 97) ;
        border-radius: 10px;
    }

    .current{
        border : 1px solid black;
        padding: 0.3%;
        background-color:rgb(209, 68, 68) ;
        border-radius: 10px;
    }

    nav > ul > li > a{
        font-family: "Quintessential", serif;
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        color : white;
    }

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

    footer > nav > ul {
        display : flex;
        flex-direction: row;
        justify-content: center;
        list-style-type: none;
        gap : 5% 5%;
        margin: 0;
        padding-bottom: 5px ;
        background-color: rgb(87, 3, 3);
    }

    footer > p {
        display : flex;
        flex-direction: row;
        justify-content: center;
        list-style-type: none;
        margin: 0;
        background-color: rgb(87, 3, 3);
        color: white;
    }

    footer > nav > ul li a {
        color: rgb(196, 140, 149);
    }
 
       main > section > h1 {
        color: rgb(202, 36, 36);
        display: flex ;
        justify-content: center;
        font-family: "Quintessential", serif;
        font-size: 3em;
    }


    main > section > table {
        display: grid;
        grid-template-columns: auto;
        justify-self: center;
    }

    tr > th{
        border : 3px solid rgb(161, 48, 48);
        font-family: "Quintessential", serif;
        font-size: 1.1em;
    }

    tr > td{
        border : 3px solid rgb(0, 0, 0);
        font-size: 1.1em;
        
    }
}