/* Small Mobile Phones */
@media (max-width:320px) {
    /* Header */
    .header{
        align-items: flex-start;
    }

    .header h1{
        text-align: center;
        margin-inline: auto;
    }

    .inputField{
        font-size: 0.8rem;
        width: 60vw;
    }

    .submitButton{
        width: 20vw;
    }

    .cityNameField{
        font-size: 1.6rem;
        margin-top: 3vh;
    }

    /* Main Body */
    .mainBody{
        justify-content: flex-start;
    }

    .mainLogo{
        width: 25vw;
    }

    .tempField{
        font-size: 1.2rem;
    }

    /* Cards Section */
    .weatherDetails{
        width: 100%;
    }

    .card{
        width: 29vw;
        font-size: 0.8rem;
        text-align: center;
        height: 15vh;
    }

    /* Error display Card */
    .cityNotFound{
        width: 60%;
        left: 20%;
    }

    .warnLogo{
        width: 30vw;
    }
}

/* Normal Mobile Phones */
@media (min-width:321px) and (max-width:600px) {
    /* Disable overflow in document body */
    body{
        overflow: hidden;
    }

    /* header */
    .header{
        /* border: 2px solid red; */
        gap: 10vw;
    }

    .inputField{
        height: 5vh;
    }

    .submitButton{
        height: 5vh;
        width: 20vw;
        margin-right: 12vw;
    }

    /* main body */
    .mainBody{
        justify-content: space-around;
    }

    .displayWeather{
        width: 50vw;
        height: 25vh;
    }

    .mainLogo{
        width: 30vw;
    }

    .descriptionField{
        font-size: 1.3rem;
    }

    .card{
        width: 25vw;
        font-size: 0.8rem;
        text-align: center;
    }

    .weatherDetails2{
        margin-bottom: 10vw;
    }

    /* Error Display Box */
    .cityNotFound{
        width: 60vw;
        position: absolute;
        left: 76.50px;
    }

    .warnLogo{
        width: 20vw;
        height: 10vh;
    }

}

/* Small Tablets */
@media (min-width:601px) and (max-width:768px) {
    /* Header */
    .inputField{
        width: 60vw;
        height: 5vh;
        font-size: 1.2rem;
    }

    .submitButton{
        width: 13vw;
        height: 5.5vh;
        font-size: 1.2rem;
    }

    /* Main Body */    
    .mainBody{
        justify-content: center ;
    }

    .cityNameField{
        margin-top: 4vh;
        font-size: 2.1rem;
    }

    .mainLogo{
        width: 15vw;
    }

    .descriptionField{
        font-size: 1.2rem;
    }

    .card{
        font-size: 1.1rem;
        text-align: center;
        width: 19vw;
        height: 13vh;
    }

    /* Error display field */
    .cityNotFound{
        width: 40vw;
        font-size: 1.2rem;
        left: 30%;
    }

    .warnLogo{
        width: 15vw;
    }
}

/* For Normal Tablets */
@media (min-width:769px) and (max-width:1024px) {
    /* Header */
    .header h1{
        font-size: 2.5rem;
    }
    
    .inputField{
        height: 5vh;
    }

    .submitButton{
        width: 11vw;
        height: 5.2vh;
    }

    /* Main Body */
    .mainBody{
        justify-content: flex-start;
    }

    .mainLogo{
        width: 15vw;
    }

    .mainBody h1{
        margin-top: 5vh;
    }

    .descriptionField{
        font-size: 1.2rem;
        margin-bottom: 10vh;
    }
    
    .card{
        text-align: center;
        font-size: 1.2rem;
        width: 17vw;
    }

    /* Error Display Field */
    .cityNotFound{
        font-size: 1.2rem;
    }
    .warnLogo{
        width: 10vw;
        height: 10vh;
    } 
}