body {
  font-family: Palatino, serif;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

a, a:visited { text-decoration: none; }
a:hover, #cBtn:hover { cursor: pointer; }

.modal, .index-modal {
   display: none;
   position: fixed;
   z-index: 5;
   bottom: 0;
   left: 0;
   top: 0;
   right: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
}

.modal { padding-top: calc(20px + 15vh + 1vw); }
.index-modal { padding-top: calc(20px + 7vh + 1vw); }

.modal-content {
   background-color: #F0F7FF;
   margin: auto;
   padding: calc(12px + 0.35vw + 0.35vh);
   width: 67.5%;
   overflow: auto;
   overflow-y: auto;
   border: calc(0.15vw + 0.15vh) solid #3CB371;
   font-size: calc(8px + 0.75vw);
   text-align: left;
   color: #333333;
   line-height: 1.25em;
}

#myBtn { color: #FF6F61; }

#back {
  top: 0;
  left: calc(0.5vw + 0.5vh);
  color: #FF6F61;
  position: fixed;
  font-size: calc(35px + 1vw);
}

.close {
   float: right;
   font-size: calc(20px + 1.25vw + 1.25vh);
   font-weight: bold;
   color: #FF6F61;
   margin-left: calc(1.5vw + 1.5vh);
   margin-bottom: calc(1.5vw + 1.5vh);
}

.close:hover, #back:hover {
   color: #3CB371;
   text-decoration: none;
   cursor: pointer;
}

.gap { padding-bottom: calc(2vh + 1vw); }
.smallgap { padding-bottom: calc(1vh + 0.5vw); }

.flex-gallery {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 415px) {
  .modal { padding-top: calc(20px + 17.5vh + 2.5vw); }
  .index-modal { padding-top: calc(20px + 3.5vh + 1vw); }
  .modal-content { width: 70%; }
}