@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;
    }

    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);
    }

    footer > nav > ul li:nth-child(2) a {
        color: rgb(224, 70, 96);
    }

    h1{
        color: rgb(44, 44, 233);
        display: flex ;
        justify-content: center;
        font-family: "Quintessential", serif;
        font-size: 3em;
    }

    form {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    div{
        margin-bottom: 1%;
        font-family: "Quintessential", serif;
        font-size: 1.5em;
        background-color: lightblue;
    }

    div:nth-child(1){
        border-left : 1px solid rgb(62, 171, 207);
        border-top : 1px solid rgb(62, 171, 207);
        border-bottom : 1px solid rgb(62, 171, 207);
    }

    div:nth-child(2){
        border-right : 1px solid rgb(62, 171, 207);
        border-top : 1px solid rgb(62, 171, 207);
        border-bottom : 1px solid rgb(62, 171, 207);
    }

    fieldset{
        font-size: 1em;
        margin-left: 7%;
        border: 0;
        padding: 0;
    }

    fieldset > fieldset{
        margin: 0;
    }

    div:nth-child(1) > input{
        margin-bottom: 10.9%;
    }

    main > section > form > div > fieldset  > #condition-id + label + br + input{
        padding: 0 43%;
    }
}

@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;
    }

    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);
    }

    footer > nav > ul li:nth-child(2) a {
        color: rgb(224, 70, 96);
    }
}

@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;
    }

    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);
    }

    footer > nav > ul li:nth-child(2) a {
        color: rgb(224, 70, 96);
    }

    h1{
        color: rgb(44, 44, 233);
        display: flex ;
        justify-content: center;
        font-family: "Quintessential", serif;
        font-size: 3em;
    }

    form {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    div{
        margin-bottom: 1%;
        font-family: "Quintessential", serif;
        font-size: 1.5em;
        background-color: lightblue;
    }

    div:nth-child(1){
        border-left : 1px solid rgb(62, 171, 207);
        border-top : 1px solid rgb(62, 171, 207);
        border-bottom : 1px solid rgb(62, 171, 207);
    }

    div:nth-child(2){
        border-right : 1px solid rgb(62, 171, 207);
        border-top : 1px solid rgb(62, 171, 207);
        border-bottom : 1px solid rgb(62, 171, 207);
    }

    fieldset{
        font-size: 1em;
        margin-left: 7%;
        border: 0;
        padding: 0;
    }

    fieldset > fieldset{
        margin: 0;
    }

    div:nth-child(1) > input{
        margin-bottom: 10.9%;
    }

    main > section > form > div > fieldset  > #condition-id + label + br + input{
        padding: 0 43%;
    }
}