
@media screen and (max-width: 1440px)
{
    .markdownRender 
    {
        width: 90%;
        max-height: 450px;
        height: 450px;
        font-size: 1.5em;
    } 
    .weather-card
    {
        width: 90%;
        height: 450px;
        padding: 10px;
        border-radius: 30px;
        font-size:1.5em ;
    }

    .forecast
    {
        position: relative;
        gap: 20px;
        padding: 10px 25px;
        top: -10px;
        gap: 150px;
    }
    .weatherSection > .closeBtn
    {
        top: 4%;
        right: 8%;
        width: 46px;
        height: 46px;
        font-size: 1.5em;
    }
}



@media screen and (max-width: 1024px)
{
    .markdownRender 
    {
        width: 90%;
        height: 350px;
    } 
    .weather-card
    {
        width: 90%;
        height: 330px;
        padding: 10px;
        border-radius: 30px;
        font-size: 1em;
    }
    .forecast
    {
        position: relative;
        gap: 20px;
        padding: 10px 25px;
        top: -10px;
        gap: 50px;
    }
    .weatherSection > .closeBtn
    {
        top: 5%;
        right: 8%;
        width: 46px;
        height: 46px;
        font-size: 1.5em;
    }
}



@media screen and (max-width: 768px)
{
    .markdownRender 
    {
        width: 700px;
        height: 150px;
        font-size: 1em;
    } 
    .weather-card
    {
        font-size: 1em;
    }
    .weatherSection > .closeBtn
    {
        top: 2%;
        right: 8%;
        width: 36px;
        height: 36px;
        font-size: 1.2em;
    }
}

@media screen and (max-width: 600px)
{
    .markdownRender 
    {
        width: 300px;
        height: 200px;
        font-size: 1em;
    }
    .weather-card
    {
        font-size: 1em;
        width: 90%;
        height: 300px;
        padding: 10px;
        border-radius: 30px;
    }
    .forecast
    {
        position: relative;
        gap: 20px;
        padding: 0px 25px;
        top: -10px;
    }
    .weatherSection > .closeBtn
    {
        top: 2%;
        right: 8%;
        width: 36px;
        height: 36px;
        font-size: 1.5em;
    }
}


/* 
@media screen and (max-width: 2560px)
{
    .markdownRender 
    {
        width: 90%;
        max-height: 700px;
        height: 700px;
        font-size: 3em;
    } 
    .weather-card
    {
        width: 90%;
        height: 900px;
        padding: 10px;
        border-radius: 30px;
        font-size: 3.5em ;
    }

    .forecast
    {
        position: relative;
        gap: 20px;
        padding: 10px 25px;
        top: -10px;
        gap: 150px;
    }
    .weatherSection > .closeBtn
    {
        top: 4%;
        right: 8%;
        width: 96px;
        height: 96px;
        font-size: 4em;
    }
}  */