/* body grid adjustments */
body{
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    grid-auto-rows: minmax(5px, auto);
    grid-template-areas: "title title buttons buttons"
                        "intro intro intro intro"
                        "mappanel mappanel mappanel mappanel"
                        "description description description description"
                        "snapshotTitle snapshotTitle reportTitle reportTitle"
                        "snapshot snapshot chart chart";
}

/* start of fonts + styles */

h1 {
	font-family: Arial, Helvetica, sans-serif;
	color: darkslategrey;
    font-size: 60px;
    text-align: left;
    line-height: 135%;
    font-weight: bold;
    margin-left: 20%;

    margin-bottom: 0px; /* delete space at bottom of title*/
    margin-top: 10px;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	color: rgb(61, 61, 61);
    font-size: 24px;
    margin-left: 10%;
    margin-right: 10%;
    line-height: 175%;
    font-weight: normal;
    justify-content: left;
    text-align: left;
}
h3 {
	font-family: Arial, Helvetica, sans-serif;
	color: rgb(61, 61, 61);
    font-size: 24px;
    margin-left: 10%;
    margin-right: 10%;
    line-height: 175%;
    font-weight: bolder;
    justify-content: left;
    text-align: left;

    margin-top: 0px; /* delete space at top of question*/
}

h4 {
    font-family: Arial, Helvetica, sans-serif;
	color: rgb(61, 61, 61);
    font-size: 18px;
    margin-left: 10%;
    margin-right: 10%;
    line-height: 175%;
    font-weight: bold;
    justify-content: left;
    text-align: left;

}

h5 {
    font-family: Arial, Helvetica, sans-serif;
	color: rgb(45, 73, 126);
    font-size: 16px;
    margin-left: 10%;
    margin-right: 10%;
    line-height: 175%;
    font-weight: bold;
    justify-content: left;
    text-align: left;

}

p, li{
	font-family: Arial, Helvetica, sans-serif;
	color: rgb(61, 61, 61);
    font-size: 18px;
    margin-left: 10%;
    margin-right: 10%;
    line-height: 175%;
    font-weight: normal;
    justify-content: left;
    text-align: left;
}

a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

/* end of fonts + styles */

/* start Body's elements styling */

/*
header{
    margin-top: 5%;
    grid-area: header;
}
*/
.title{
    margin-top: 60px;
    grid-area: title;
}

.buttons{
    display: flex;
    grid-area: buttons;
    margin-left: 10%;
    margin-right: 0;
    margin-top: 10%;
    height: 50px;
}

.buttons > a{
    border: 2px solid #3A95FF;
    color: #3A95FF;
    border-radius: 15px;
    margin: 10px;
    padding: 5px 50px;
    background-color: #EAF4FF;
    text-decoration: none;
}

.buttons > a:hover{
    cursor: pointer;
    border: 2px solid #3A95FF;
    color:white;
    border-radius: 15px;
    margin: 10px;
    padding: 5px 50px;
    background-color: #3A95FF;
    text-decoration: none;
}

.intro{
    grid-area: intro;
}

#map{
    height: 70vh;
    margin-left: 10%;
    margin-right: 10%;
    grid-area: mappanel;
    z-index: 1;
}

.decription{
    margin-bottom: 60px;
    grid-area: description;
}

#snapshotTitle{
    grid-area: snapshotTitle;
}

#snapshotTitle > p{
    font-weight: bold;
    margin-left: 50%;
}

/* chart (report) title */
#reportTitle{
    grid-area: reportTitle;
}

#reportTitle > p{
    font-weight: bold;
    margin-left: 35%;
}
/* end chart (report) title */

/* chart section*/
.chart{
    grid-area: chart;
    padding-right: 20%;
    text-align: center;
}

.chart > a{
    border: 2px solid #2ea3d9;
    color: #2ea3d9;
    border-radius: 15px;
    margin: 10px;
    padding: 10px;
    background-color: #f8f9fa;
}

.chart > a:hover{
    cursor: pointer;
    box-shadow: 0px 0px 10px silver;
}
/* end chart section */

#snapshot{
    word-wrap: break-word;
    height: 60vh;
    overflow-y: auto;
    grid-area: snapshot;
    margin-left: 10%;
}

/* customize scrollbar for snapshot */
::-webkit-scrollbar {
    width: 20px;
}
::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
}
::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
}
::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
}
/* end scrollbar customized*/

/* user stories */
.stories{
    padding: 20px;
    border: 1px solid rgb(172, 182, 202);
    margin-top: 15px;
    box-shadow: 0.5px 0.5px 9px 2px #e0e7e7;
    font-family: Arial, Helvetica, sans-serif;
	color: rgb(56, 56, 56);
    font-size: 16px;
    margin-left: 10%;
    margin-right: 10%;
    line-height: 175%;
    font-weight: normal;
    justify-content: left;
    text-align: left;

    
    /* HANDLE LONG WORD THAT BREAKS DIV WIDTH */
    font-family: Arial, Helvetica, sans-serif;
    line-height: 150%;
    -ms-word-break: break-all;
    word-break: break-all;
    /* Non standard for webkit */
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
/* end user stories */

/* start modal contents */
.modal {
    display: none;
    position: fixed;
    z-index: 50;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 10px;
    border: 1px solid #888;
    width: 60%;
    display: block;
    height: 70%;
}

.modal-content>a{
    color: black;
    text-decoration: none;
    padding: 7px;
    font-size: 20px;
    text-align: center;
    background-color: #ddd;
}

.modal-content > a:hover{
    background-color: #888;
    color: white;
}

/* The Close Button */

.aboutClose{
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.aboutClose:hover, .aboutClose:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* end modal */

canvas {
    width:100% !important;
    height:80% !important;
    margin-top: 20px;
}

embed {
    height: 90% !important;
    width: 100% !important;
}
/* end body's elements styling */

/* resources section */

.resource_card{
    padding-top: 30px;
    padding-bottom: 30px;
    margin-left: 10%;
    margin-right: 10%;
    border: 1px solid rgb(228, 228, 228);
    box-shadow: 0.5px 0.5px 9px 2px #e0e7e7;
}

.container {
    overflow: hidden;
  }
  
  .filterDiv {

    float: left;
    background-color: #ffffff;
    color: #ffffff;
    margin-left: 10%;
    margin-right: 10%;
    text-align: center;
    margin: 2px;
    display: none; /* Hidden by default */
  }
  
  /* The "show" class is added to the filtered elements */
  .show {
    display: block;
  }
  
  /* Style the buttons */
  .btn {
    border: none;
    outline: none;
    padding: 12px 16px;
    background-color: #f1f1f1;
    cursor: pointer;
  }
  
  /* Add a light grey background on mouse-over */
  .btn:hover {
    background-color: #ddd;
  }
  
  /* Add a dark background to the active button */
  .btn.active {
    background-color: rgb(22, 37, 121);
    color: white;
  }

  #myBtnContainer{
    margin-top: 40px;
    margin-bottom: 20px;
    margin-left: 10%;
    margin-right: 8%;

  }


/* For phone screen*/

@media (max-width: 600px) {
    h1{
        font-size: 40px;
    }

    .buttons{
        display: flex;
        flex-wrap: wrap;   
    }

    .buttons > a{
        padding: 5px 15px;
    }

    .buttons > a:hover{
        cursor: pointer;
        border: 2px solid #3A95FF;
        color:white;
        border-radius: 15px;
        margin: 10px;
        padding: 5px 15px;
        background-color: #3A95FF;
        text-decoration: none;
    }

    body{
        display: grid;
        grid-template-columns: repeat(4, 1fr); 
        grid-auto-rows: minmax(5px, auto);
        grid-template-areas: "title title buttons buttons"
                            "intro intro intro intro"
                            "mappanel mappanel mappanel mappanel"
                            "description description description description"
                            "snapshotTitle snapshotTitle snapshotTitle snapshotTitle"
                            "snapshot snapshot snapshot snapshot"
                            "reportTitle reportTitle reportTitle reportTitle"
                            "chart chart chart chart"
    }

    #snapshotTitle > p{
        text-align: center;
        margin: 10px 0px;
    }

    #snapshot{
        margin-left: 5%;
    }

    #snapshot{
        height: 40vh;
    }

    .chart{
        padding: 0 10%;
        height: 350px;
        display: flex;
        flex-wrap: wrap;
    }

}