/* right arrow placement */
.right-arrow {  
  position: absolute;
  top: 40%;
  right: 10%;
  border: solid white;
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 5px; 
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.right-arrow:hover {
  cursor: pointer;
  border-width: 0 8px 8px 0;
  padding: 8px;
}

/* left arrow placement */
.left-arrow {
  position: absolute;
  top: 40%;
  left: 10%;
  border: solid white;
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 5px; 
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.left-arrow:hover {
  cursor: pointer;
  border-width: 0 8px 8px 0;
  padding: 8px;
}

/* CSS  */
#dl {width:50px; }

#cover2 {top: 10%; }
#cover2:hover {cursor: pointer;}

#mediaButton {position: absolute; object-fit: contain; top: 25%; left:42%; width: 16%; opacity: 0.8; z-index: 100; overflow: hidden; }
#mediaButton:hover {cursor: pointer; }

#player {top: 50%; }

/* ----------previous and next info mouse over boxes  -------------------------------- */
#rightInfoBox {position: absolute; display: block; right: 12%; top: 37%; visibility: hidden; color: black; background-color: white; padding: 5px; }
#leftInfoBox {position: absolute; display: block; left: 12%; top: 37%; visibility: hidden; color: black; background-color: white; padding: 5px; }