/* universal settings, fonts, ect */
body {
  padding-left: 200px; padding-right: 200px;
  background-color: white;
  color: dodgerblue;
  font-family: Verdana;
  z-index: 1;
}

/* navbar margin */
.navbar{
   margin-top: 20px;
}
/* navbar buttons */
.navbutton{
  margin-top: 15px;
  float: right;
  text-align: right;
  margin-left: 20px;
  margin-right: 0;
  color: dodgerblue;
  text-decoration: none;
  font-family: 'Copperplate';
  font-size: 30px;
  
}
/* navbar buttons when hovered */
.navbutton:hover{
  margin-top: 15px;
  float: right;
  text-align: right;
  margin-left: 20px;
  margin-right: 0;
  color: blue;
  text-decoration: none;
  font-family: 'Copperplate';
  font-size: 30px;
}

/* class for the elements that pop up when buttons are clicked */
.overlay{
  margin:-70px;
  position:absolute;
  height: 700px;
  z-index: 0;
  display: none;
  text-align: center;
  justify-content: center; 
}


/* settings for everything under the meimage div. makes sure things are centered */
.meimage{
  position:relative;
  padding-top: 70px;
  text-align: center;
  height: 800px;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  z-index: 1
}

/* class for the pairs of buttons on both sides */
.image-column {
  padding-top:100px;
  padding-right:20px;
  padding-left:20px;
  display: flex;
  flex-direction: column; /* Stacks items vertically */
  gap: 70px; /* Space between images */
  z-index: 1;
  height: 120px; width:120px;
 
}


.bookbutton{
 content: url(images/updated-icons/book.webp);
 height: 120px; 
  
}

.bookbutton:focus:hover{
 content: url(images/updated-icons/bookhover.webp);
 height: 120px; 
  
}







.videobutton{
 content: url(images/updated-icons/tape.webp);
 height: 120px; 
  
}
.videobutton:hover{
 content: url(images/updated-icons/tapehover.webp);
 height: 120px; 
  
}

.videobutton:focus{
 content: url(images/updated-icons/tapehover.webp);
 height: 120px; 
  
}