.page-2 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  z-index: -2;
}

.page-2-bar {
  position: fixed;
  display: flex;
  flex-direction: row;
  height: 105px;
  width: 100%;
  background-color: rgb(239, 127, 64);
  z-index: 5;
}

.projects-button, .about-button, .contact-button, .quit-button {
  height: 100%;
  width: 25%;
  background-color: rgb(239, 127, 64);
  color: black;
  border: none;
  font-family: ITC-avant-garde-gothic;
  font-size: 45px;
  margin-left: 0px;
  margin-right: 0px;
  user-select: none;

  transition: background-color .1s;
}

.projects-button:hover, .about-button:hover, .contact-button:hover, .quit-button:hover {
  cursor: pointer;
  background-color: rgb(250, 220, 196);
}

.active {
  background-color: rgb(250, 220, 196);
}

.line-2 {
  width: 6px;
  height: 100%;
  user-select: none;
}

.projects-frame, .about-frame, .contact-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
}

@media (width <= 1000px) {
  .page-2-bar {
    position: fixed;
    display: flex;
    flex-direction: row;
    height: 130px;
    width: 100%;
    background-color: rgb(239, 127, 64);
    z-index: 5;
  }
}