/* 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;
}
.selected{
  color: white;
  margin-top: 15px;
  float: right;
  text-align: right;
  margin-left: 20px;
  margin-right: 0;
  text-decoration: none;
  font-weight: 700;
  font-size: 28px;
}
/* navbar buttons */
.navbutton{
  margin-top: 15px;
  float: right;
  text-align: right;
  margin-left: 20px;
  margin-right: 0;
  color: dodgerblue;
  text-decoration: none;
  font-family: Verdana;
  font-size: 28px;
  font-weight: 700;
  
}
.movie-container{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding-top: 30px;
    height: 650px;
    width: 100%;
    overflow: hidden;
}
  .info-text{
    padding-right: 80px;
    flex-wrap: wrap;
    margin-bottom: 50px;
 
}
/* 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: 'Verdana';
  font-size: 28px;
}

/* 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; 
}

.text-manager{
  display: flex;
  justify-content: space-between;
  width: 100%;
  
}
.text-managements{
  text-align:center;
  
  overflow-wrap: break-word;
  
}
.app-orginizer{
  flex-direction: row;
  display: flex;
}

.app{
  flex:1;
  height: 80px;
  width: 80px;
  justify-content: space-between;
  text-align: center;
  
  
}
.app-icon{
  border-radius: 10px / 10px; 

}

/* settings for everything under the meimage div. makes sure things are centered */
.meimage{
  position:relative;
  padding-top: 70px;
  text-align: center;
  height: 700px;
  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: 2;
  height: 120px; width:120px;
 
}

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

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

/**/
.musicbutton{
  content: url(images/updated-icons/cd.webp);
  height: 120px; 
  z-index: 2;
}

.musicbutton:focus{
  content: url(images/updated-icons/cdhover.webp);
  height: 120px; 
  z-index: 2;
}
.musicbutton:hover{
  content: url(images/updated-icons/cdhover.webp);
  height: 120px; 
  z-index: 2;
}

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

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

/**/
.gamebutton{
  content: url(images/updated-icons/controller.webp);
  height: 120px; 
  z-index: 2;
}
.gamebutton:hover{
   content: url(images/updated-icons/controllerhover.webp);
   height: 120px; 
  z-index: 2;
  
}

.gamebutton:focus{
   content: url(images/updated-icons/controllerhover.webp);
   height: 120px; 
  z-index: 2;
  
}

.app-icon:hover{
  border-color: blue;
  border-style: solid;
  
}