@media only screen and (min-width: 270px) {
    /* Footer */
    #Underground nav .orangeBlob{
        width: 15%;
    }
}

@media only screen and (min-width: 330px) {
    /* Footer */
    #Underground nav .orangeBlob{
        width: 10%;
    }
}

@media only screen and (min-width: 490px) {
    /* Footer */
    #Underground nav .orangeBlob{
        width: 8%;
    }
}

@media only screen and (min-width: 660px) {
    /* Footer */
    #Underground nav .orangeBlob{
        width: 7%;
    }
}

@media only screen and (min-width: 700px) {
    /* Footer */
    #Underground nav .orangeBlob{
        width: 6%;
    }
}

@media only screen and (min-width: 800px) and (min-height: 700px) {
    :root{
        --fs-normal: 1.5rem;
    }

    #Underground{
        height: 70%;
    }
}

@media only screen and (min-width: 800px) {
    /* Footer */
    #Underground nav .orangeBlob{
        width: 5%;
    }

    #tower-wrapper{
        gap: 25%;
    }
}

@media only screen and (min-width: 1100px) {
    /* Footer */
    #Underground nav .orangeBlob{
        width: 4%;
    }

    #tower-wrapper{
        gap: 30%;
    }
}

@media only screen and (min-width: 1200px) and (min-height: 700px) {
    #Underground nav a{
        font-size: var(--fs-big);
    }
}


@media only screen and (min-width: 1500px) {
    #Underground nav .orangeBlob{
        width: 3%;
    }

    #tower-wrapper{
        gap: 35%;
    }
}

@media only screen and (min-width: 2800px) and (min-height: 1500px) {
    :root{
        --fs-big: 2.5rem;
    }

    #Underground nav .orangeBlob{
        width: 2%;
    }
}

@media only screen and (min-width: 4500px) and (min-height: 2000px) {
    :root{
        --fs-big: 3rem;
    }
}

@media only screen and (min-width: 5700px) and (min-height: 3000px) {
    :root{
        --fs-big: 3.5rem;
    }
}

@media only screen and (min-width: 6500px) and (min-height: 4000px) {
    :root{
        --fs-big: 4.5rem;
    }
}