html, body {
    padding: 10px;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }

 body {
     display: grid;
     grid-template-columns: 1fr 1fr; 
     grid-auto-rows: minmax(5px, auto); /* add rows for our header/footer */
     grid-template-areas: "translate translate" "header header" "description description" "mappanel contentpanel" "footer footer";
     justify-content: center;
     background-color: rgb(245, 244, 244);
     color:rgba(0, 0, 0, 0.959);
     padding: 10px;
 }

header{
    grid-area: header;
    justify-content: center;
    text-align: center;
    background-color: rgb(245, 244, 244);
    color:rgba(0, 0, 0, 0.959);
    font-size: x-large;
    padding:1px;

}

.description{
    grid-area: description;
    justify-content: center;
    text-align: center;
    font-size:medium;
    width: 97%;
    border-radius: 5px;
    border: 3px solid #496197;
    margin: .5rem;
    padding:10px;
}

#google_translate_element{
    grid-area: translate;
    justify-content:end;
}

#leftcontent{
    grid-area: mappanel;
    display: grid;
    grid-template-areas: "box1" "map";
    grid-template-rows: minmax(3px, auto);
}

#box1{
    grid-area: box1;
}

#map{
    height:80vh;
    border-radius: 5px;
    border: 2px solid #5E6472;
    grid-template-columns: repeat(3, minmax(0,1fr));
    grid-template-rows: repeat(3, minmax(0,1fr));
    align-items: end;
    justify-items: center;
} 

#legend{
    grid-column: 1;
    grid-row: 3;
    z-index: 9999;
    padding:10px;
}

#rightcontainer {
    grid-area: contentpanel;
    overflow-y:scroll;  /*adds a vertical scroll-bar to this div */
    }

#box1{
    grid-area: box1;
    padding:10px;
    overflow-y:scroll; /* adds a vertical scroll-bar to this div */

}

#box2{
    grid-area: box2;
    overflow-y:scroll; /* adds a vertical scroll-bar to this div */

}
/* use these cards 
https://www.w3schools.com/howto/howto_css_cards.asp
*/

button{
    background-color: rgba(207, 207, 207, 0.621);
    font-size: 20px;
    border-radius: 5%;
}

/* use these cards 

https://www.w3schools.com/howto/howto_css_cards.asp
*/

.card{
    background-color:lavender ;
    border-radius: 5px; /* 5px rounded corners */
    padding:10px;
    overflow-y:scroll; /* adds a vertical scroll-bar to this div */

}
#state{
    padding:10px;
    text-align: center;
}
div.skiptranslate:nth-child(1){
    display: none;
}

footer{
    grid-area: footer;
}