@media only screen and (max-width: 770px) {
    .weather-cont{
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(0%, 0%);
        width: 100vw;
        max-width: 100vw;
        height: 70vh;
    }
    .det-condinitons-cont{
        width: 102%;
        left: 2px;
    }
}
@media only screen and (max-width: 440px) {
    .weather-cont{
        position: absolute;
        top: 0px;
        left: 0;
        transform: translate(0%, 0%);
        width: 100vw !important;
        max-width: 100vw;
        height: 70vh;
        grid-template-rows: calc(100%/8) calc(100%/8) calc(100%/8) calc(100%/8) auto calc(100%/12) calc(100%/8) calc(100%/16);
    }
    .days-cont{
        margin: 0;
    }
    .main-icon{
        height: 50px;
    }
    .temp{
        font-size: 70px; 
        margin-right: 5px; 
    }
    .address-cont{
        justify-content: center;
    }
    .desc{
        display: none;
    }
    .det-condinitons-cont{
        width: 98%;
        left: 10px;
    }
    .det-condition > img{
        position: relative;
        left: 50%;
        transform: translate(-50%);
        
        max-height: 30%
    }
}

@media only screen and (max-height: 440px) {
    .weather-cont{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100vw ;
        max-width: 200vh;
        height: 100vh;
        min-height: 0;
        padding: 20px;
        grid-template-rows: calc(100%/9) calc(100%/9) calc(100%/9) calc(100%/9) auto calc(100%/12) calc(100%/9) calc(100%/16);
    }
    .day>div>img{
        height: 80%;
    }
    .det-condinitons-cont{
        position: relative;
        top: -5px;
    }
    .main-icon{
        height: 50px;
    }
    .temp{
        font-size: 50px;
    }
}