@font-face {
  font-family: Coolvetica;
  src: url("../Fonts/coolvetica/coolvetica rg.otf");
}

@font-face {
  font-family: Garet;
  src: url("../Fonts/garet/Garet-Book.otf");
}

@font-face {
  font-family: EdoSZ;
  src: url("../Fonts/edo_sz/edosz.ttf");
}

.modal {
  display: none; 
  position: fixed;
  z-index: 1;
  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 {
  font-family: "Coolvetica";
}

@media only screen and (max-width: 800px) {
  .modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #888;
    width: 75%;
  }
}

@media only screen and (min-width: 801px) {
  .modal-content {
    background-color: #fefefe;
    margin: 3% auto;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #888;
    width: 55%;
  }
}

#m_imgContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 352px;
}

#m_img {
  max-height: 100%;
  max-width: 100%;
}

#m_LRBtnContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

#m_leftBtn {
  font-family: "Coolvetica";
  font-size: x-large;
  color:white;
  margin: 20px 60px 20px 0px;
  width: 70px;
  height: 70px;
  border-radius: 40px;
  background-color: rgb(106, 106, 106);
  cursor: pointer;
}

#m_rightBtn {
  font-family: "Coolvetica";
  font-size: x-large;
  color:white;
  margin: 20px 0px 20px 60px;
  width: 70px;
  height: 70px;
  border-radius: 40px;
  background-color: rgb(106, 106, 106);
  cursor: pointer;
}

#closeModalBtn:hover {
  cursor: pointer;
}

.modal-content a {
  color: blue;
  text-decoration: underline;
}