/* styles.css 
   Project: 
   Author: 
   Date: 
*/

/*google font*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat:wght@300;400&display=swap');

/*main css*/


* {
   box-sizing: border-box;
}

img, video {
   width: 100%;
   display: block;
}

body {
   background-color: black;
   font-family: 'Montserrat', sans-serif;
   /*font-family: 'Montserrat', sans-serif;*/
}

/*popup modal*/

.overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  overflow-y: scroll;
  z-index:  1000;
}

.modal {
  position: relative;
  width: 70%;
  margin: 20vh auto;
}

.modaltext {
   background-color: white;
   padding: 4%;
   text-align: center;
}

.closer {
  position: absolute;
  right: -5vh;
  top:  -5vh;
  width: 10%;
  cursor: pointer;
}


#map { 
   height: 100vh;
   width: 100vw;
   margin: auto;
}

.leaflet-popup-content-wrapper {
   background-color: rgba(0,0,0,0.8);
}

.leaflet-popup-content {
   width: 16vw;
   margin: 2vw 1vw;
   text-align: center;
}

.leaflet-popup-content a {
   color: white;
}

.leaflet-popup-content video {
   border: 1px solid white;
}

.leaflet-container a.leaflet-popup-close-button {
   color: white;
}

.my-custom-icon {
   border: 1px solid whitesmoke;
}

.my-custom-icon video, .my-custom-icon img {
   height: 100%;
   object-fit: cover;
}

/*media query for responsive design */

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

   .leaflet-popup-content {
      width: 40vw;
   }

   .modal {
      margin: 15vh auto;
      width: 80%;
   }

   .closer {
      width: 20%;
   }

}