@font-face {
  font-family: 'Pixellari';
  src: local(''),
    url('/fonts/Pixellari.ttf');
}

body {
    display: grid;
    justify-content: center;
    background-color: antiquewhite;
    cursor: url("/img/movie-cur.png"), default;
    font-family:'Pixellari', Cochin, Georgia, Times, 'Times New Roman', serif;
    background-image: url("/img/groovy\ bg.gif");
}

.nav-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position:relative;  /* to keep nav bar position fixed relative to esc button */
  height: auto;
  width: auto;
}

#esc {
  position: absolute;  /* allows movement of esc button along nav bar div without moving nav bar buttons */
  transform: translateX(-800%);
}

#esc:hover {
  cursor: url("/img/movie-cur2.png");  /* broken, why? */
}

#esc-button {
  height: 40px;
}


.container {  /* width of tv container */
  display: grid;
  width: 1200px;
}

.tv {
  position: relative;
  height: 70%;
  margin: auto;
  margin-top: 25px;

}

.screen {
  position:absolute;
  top: 0;
  left: 50%;
  margin-top: 250px;

  transform: translateX(-50%);

  background-color: rgb(212, 212, 212);
  width: 600px;
  height: 450px;

  overflow:scroll; 
  scrollbar-color: #8FD14F;  /* change color of scroll bar -- fix later */
}

#heading {
  margin-left: 150px;
  color: #3291B6;
  filter: drop-shadow(2px 2px #604cc377);
}

.anime {
  height: 250px;
  width: 166.667px;
  margin-left: 17px;


  z-index: 3;
}

.anime:hover {
  transform: scale(2);  /* fix so photos aren't cut off (they are constrained by .screen)  - maybe just do a hover banner and link to imdb page or something */
}

/* BUTTONS */
.buttons {
  display: flex;
  align-items: center;
}

.library-button,
.grooves-button,
.home-button,
.essays-button,
.telescope-button,
.wiw-button,
.trinkets-button {
  background-color: antiquewhite;
  font-family: Ms Gotchic;
  font-size: 100%;
  color: #2d442c;
  height: 50px;
  width: 50px;
  margin: 10px;
  border-radius: 10px;
  border-color: #9928ca;
  border-width: 3.5px;
  cursor: url("/img/movie-cur.png"), default;
}

.library-button:hover,
.grooves-button:hover,
.home-button:hover,
.essays-button:hover,
.wiw-button:hover,
.telescope-button:hover,
.trinkets-button:hover {
  background-color: bisque;
}

.library-button:active,
.grooves-button:active,
.home-button:active,
.essays-button:active,
.wiw-button:active,
.telescope-button:active,
.trinkets-button:active {
  opacity: 0.7;
}  
/* END BUTTONS */