html, body {
    height: 100%;
    margin: 0;
}
#map {
        height: 90%;
        width: 100vw;
    }

h1, p{
    padding-left: 5px;
    font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

.content {
    background-color:#fafafa;
    padding: 10px 5px 10px 5px;
    margin: 0px 0px 5px 0px;
}

.container {
    width:85vw;
    display:flex;
    
}

/* really small screens, motoG4 for example */

@media screen and (max-width:600px) {
   
    .container {
        flex-direction:column;
        height:400px;
        overflow:auto;    
    }

    .popupImg {
        height:225px;
        max-width:300px;
        overflow:hidden;
        
    }
}

/* In between screens, modern phones, pixel iphone plus etc */
@media screen and (min-width:400px) and (max-width:599px) {

    .container {
        flex-direction:column;
        height:480px;
        overflow:auto;    
    }

    .popupImg {
        height:255px;
        max-width:340px;
        overflow:hidden;   
    }

    
}

/*big screens with a viewport larger than 600px */
@media screen and (min-width:600px) {

    .content {
        margin-right: 10px;
    }

    .popupImg {
        height:400px;
        max-width:532px;
        overflow:hidden;
    }

}