@media only screen and (min-width: 1025px) {
    .main-container {
        height: 100vh;
    }
}

@media only screen and (max-width: 1024px) {

    #weather-container {
        margin: 50px 20px 0 20px;
    }

    h1, h2 {
        font-size: 60px;
    }

    #map {
        width: 100%;
        height: 370px;
    }

    #date {
        font-size: 25px;
    }

    #feels-temperature {
        font-size: 69px;
    }

    #wind, #humidity, #pressure {
        font-size: 19px;
    }
}

@media only screen and (max-width: 768px) {

    .row {
        display: inline-block;
    }

    .column {
        width:100%;
    }

    #day1, #day2, #day3 {
        margin: 0 5px;
        padding: 10px;
    }

    #map {
        width: 95%;
    }
}

@media only screen and (max-width: 584px) {
    #day1, #day2, #day3 {
        margin: 0 5px;
        padding: 0px;
    }
}

@media only screen and (max-width: 425px) {
    #weather-container {
        margin: 0; 
    }

    h1, h2 {
        font-size: 50px;
    }
    
    #day1, #day2, #day3 {
        margin:4px;
        padding:0px;
    }

    #map {
        width: 90%;
        height:280px;
    }

    #long, #lat {
        font-size: 20px;
    }

    #coord {
        width:70%;
    }
}

@media only screen and (max-width: 352px) {
    h1, h2 {
        font-size: 25px;
    }

    #map {
        height: 200px;
    }

    #feels-temperature {
        margin-left: 43px;
    }

    #days-weather img {
        width: 80%;
    }

    #days-weather p {
        font-size: 18px;
        padding:2px;
    }

    #searchInput {
        font-size:13px;
    }

    #searchBtn {
        font-size: 12px;
    }

    #long, #lat {
        font-size: 17px;
    }
}

@media only screen and (max-width: 352px) {
    #feels-temperature {
        margin-left: 20px;
        font-size: 66px;
    }
}