@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 computer container */
   width: 1200px;
}

.computer {  /* computer .png */
    position: relative;
    margin-left: 160px;
    z-index: 2;
}

.screen {  /* computer screen div */
    position:absolute;
    top: 0;
    left: 50%;
    margin-top: 144px;

    transform: translateX(-50%);

    background-color: antiquewhite;
    width: 464px;
    height: 349px;
    z-index: 3;

    overflow:auto;
}

h1 {  /* "my YouTube subscriptions" */
  display: block;
  font-size: 30px;
  margin-left: 22px;
  color: #576A8F;
  filter: drop-shadow(2px 2px #74309169);
}

summary {  /* channel categories */
  font-size: 25px;
  color:#FF7444;
  margin-left: 10px;
}

summary:hover {
  color:#B7BDF7;
}

ul {  /* channels */
    color:#FAB95B;
    font-size: 20px;
}

ul:hover {
  cursor: url("/img/movie-cur2.png"), default;
  color:#B7BDF7;
}

a {  /* links to channels */
  text-decoration: none;  /* removes underline from links */
}

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