*{
    box-sizing: border-box;
}


.container{
    display:flex;
    flex-direction:column;
    border: solid gray;
    border-radius: 2px;
    padding: 20px 20px 20px;
}

#user-input {
    display:block;
    font-size:24px;
    background-color: indianred;
    font-weight:5;
    height:auto;
    width:100%;
    padding:0px 10px 20px 15px;

}
.hidden{
    display: none;
}

#map { width: auto; height: 500px; padding: 20px 20px 40px;}

#results {
    background-color: rgb(6, 97, 6);
    height:auto;
    width:auto;
    font-weight:3;
    color:rgb(51, 4, 4);
}

.description{
    font-size: 15px;
    font-weight: 3;
    text-align: center;
}

.h3{
    text-align: center;
}

#results-display{
    width:100%;
    height:auto;

}

#weather{
    height:360px;
    width:auto;
    font-weight:5;
    background-color: indianred;
    font-size:24px;
}
.main {
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

#weather-text {
        height:250px;
        width:auto;
        align-items:flex-start;
        font-weight:5;
        font-size:24px;
    }

   



@media only screen and(min-width:440px) {
    .main{
        display:inline-flex;
        flex-direction:row;
        align-items:flex-start;
        text-align:center;
    }

    #map {
        width:200px;
        height:500px;
    }
    #weather{
        align-self:flex-end;
    }
}

@media only screen and (min-width:1000px) {
    .container{
        display:flex;
        flex-direction:row;
        align-items:center;
        text-align:center;
        width:1200px;
        
    }
    #weather{
        display:block;
        align-items:flex-end;
        font-weight:5;
        height:665px;
        width:100%;
        margin-right:20px;
        margin-left:2px;
    }
    #map{
        align-items:flex-start;
        width:480px;
        height:600px;
        padding:20px 20px 60px;
    }

    #intro {
        font-size:15px;
        font-weight:3;
        height:auto;
        width:auto;
        margin-right:10px;
        margin-left:20px;
        display:flex;
        flex-direction:column;
    }


    #user-input {
        align-self:flex-start;
        align-content:space-between;
        height:auto;
        border:2px black;
    }

    #address {
        margin-top:40px;
        margin-bottom:30px;
    }

    #city {
        margin-top:40px;
        margin-bottom:30px;
    }

    #input-button {
        margin-top:40px;
        margin-bottom:40px;
    }
    
}