@font-face {
  font-family: dreamwish;
  src: url(/fonts/dreamwish.ttf);
    }
  
   @font-face {
  font-family: VeniceClassic;
  src: url(/fonts/VeniceClassic.ttf);
    }
    
    @font-face {
  font-family: Another-Birdhouse;
  src: url(/fonts/Another-Birdhouse.ttf);
    }
    
    
    
body {
  justify-content: center;
  color: white;
  background-image:url("/images/backgrounds/IMG_3419.JPG");
  background-size: 100%;
  height: 100%;
  width: 100%;
  }
  
h1 {
  font-family: dreamwish;
  font-size: 3rem;
  }

p {
  font-family: VeniceClassic;
  font-size: 3rem;
  }

.preview-flex {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 1em;
  width: 80%;
  height: auto;
  padding: 20px;
  margin: 20px;
  }

.month {
  width: 300px;
  height: 300px;
  position: relative;
  }

.polaroid-overlay {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 4;
  }

.polaroid-img {
  width: 248px;
  height: auto;
  rotate: -2deg;
  left: 30px;
  top: 40px;
  position: absolute;
  z-index: 2;
  }

.polaroid-text {
  position: absolute;
  left: 40px;
  bottom: 28px;
  font-family: Another-Birdhouse;
  font-size: 24px;
  z-index: 5;
  text-shadow: 1px 1px #4d2600;
  rotate: -2deg;
  }

.rotateF {
  transform: rotate(0deg);
  }
  
.rotateF:hover {
  transform: rotate(5deg);
  cursor: pointer;
  }    
     
.rotateB {
  transform: rotate(-0deg);
  }
  
.rotateB:hover {
  transform: rotate(-5deg);
  cursor: pointer;
  }  
  
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;        
  justify-content: center;
  align-items: center;
}

.overlay.active {
  display: flex;      
}

.month-div {
  position: fixed;

  display: none;      /* hidden initially */
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 1em;

  width: 80%;
  height: 80%;
  overflow-y: auto;
  overflow-x: hidden;

  background-image: url("/images/backgrounds/vintage-overlay-1.jpg");
  padding: 20px;
  }

.photo {
  width: 300px;
  height: auto;
  transition: transform .2s; /* Animation: src w3schools */
  }
  
.photo:hover {
  transform: scale(1.75); /* (1.5 = 150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}