/** BUTTONS **/

.elevatorButton {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid #000000;
    background-color: #f1f1f1;
    color: #000000;
    padding: 1px;
    font-size: 20px;
    text-align: center;
    line-height: 218%;
    box-shadow: inset 0 0 10px #2e2e2e;
    filter: drop-shadow(0px 0px 3.5px rgba(0, 0, 0, .7));
    display: block;
    }

    .elevatorButton:hover + .hide {
      opacity: 1;
      position: absolute;
      z-index: 100;
      color: white;
    }
  
 .elevatorButton2 {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 4px solid #000000;
      background-color: #f1f1f1;
      color: #000000;
      padding: 1px;
      font-size: 20px;
      text-align: center;
      line-height: 218%;
      box-shadow: inset 0 0 10px #2e2e2e;
      filter: drop-shadow(0px 0px 3.5px rgba(0, 0, 0, .7));
      display: block;
      }
  
 .elevatorButton3 {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 4px solid #000000;
        background-color: #f1f1f1;
        color: #000000;
        padding: 1px;
        font-size: 20px;
        text-align: center;
        line-height: 218%;
        box-shadow: inset 0 0 10px #2e2e2e;
        filter: drop-shadow(0px 0px 3.5px rgba(0, 0, 0, .7));
        display: block;
        }
  
  .elevatorButton {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid #000000;
    background-color: #f1f1f1;
    color: #000000;
    padding: 1px;
    font-size: 20px;
    text-align: center;
    line-height: 218%;
    box-shadow: inset 0 0 10px #2e2e2e;
    filter: drop-shadow(0px 0px 3.5px rgba(0, 0, 0, .7));
    display: block;
    }
   .elevatorButton4 {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 4px solid #000000;
      background-color: #f1f1f1;
      color: #000000;
      padding: 1px;
      font-size: 20px;
      text-align: center;
      line-height: 218%;
      box-shadow: inset 0 0 10px #2e2e2e;
      filter: drop-shadow(0px 0px 3.5px rgba(0, 0, 0, .7));
      display: block;
      }
  
   .elevatorButton5 {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 4px solid #000000;
        background-color: #f1f1f1;
        color: #000000;
        padding: 1px;
        font-size: 20px;
        text-align: center;
        line-height: 218%;
        box-shadow: inset 0 0 10px #2e2e2e;
        filter: drop-shadow(0px 0px 3.5px rgba(0, 0, 0, .7));
        display: block;
        }
  
   .elevatorButton6 {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: 4px solid #000000;
          background-color: #f1f1f1;
          color: #000000;
          padding: 1px;
          font-size: 20px;
          text-align: center;
          line-height: 218%;
          box-shadow: inset 0 0 10px #2e2e2e;
          filter: drop-shadow(0px 0px 3.5px rgba(0, 0, 0, .7));
          display: block;
          }
  
   .elevatorButton7 {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 4px solid #000000;
            background-color: #f1f1f1;
            color: #000000;
            padding: 1px;
            font-size: 20px;
            text-align: center;
            line-height: 218%;
            box-shadow: inset 0 0 10px #2e2e2e;
            filter: drop-shadow(0px 0px 3.5px rgba(0, 0, 0, .7));
            display: block;
            }
  
  
  .elevatorButton8 {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              border: 4px solid #000000;
              background-color: #f1f1f1;
              color: #000000;
              padding: 1px;
              font-size: 20px;
              text-align: center;
              line-height: 218%;
              box-shadow: inset 0 0 10px #2e2e2e;
              filter: drop-shadow(0px 0px 3.5px rgba(0, 0, 0, .7));
              display: block;
              }

/** RED GLOW **/

 .elevatorButton:hover {
      opacity: 1;
      box-shadow: inset 0 0 10px #f81900;
    }

 .elevatorButton2:hover {
      opacity: 1;
      box-shadow: inset 0 0 10px #f81900;
    }
  
    .elevatorButton3:hover {
      opacity: 1;
      box-shadow: inset 0 0 10px #f81900;
    }
  
    .elevatorButton4:hover {
      opacity: 1;
      box-shadow: inset 0 0 10px #f81900;
    }
  

    .elevatorButton5:hover {
      opacity: 1;
      box-shadow: inset 0 0 10px #f81900;
    }
  

    .elevatorButton6:hover {
      opacity: 1;
      box-shadow: inset 0 0 10px #f81900;
    }
  

    .elevatorButton7:hover {
      opacity: 1;
      box-shadow: inset 0 0 10px #f81900;
    }
  

    .elevatorButton8:hover {
      opacity: 1;
      box-shadow: inset 0 0 10px #f81900;
    }
  

/********** PAGE SELECTOR STUFF *********/

.pageSelector {
  position: fixed;  
  line-height: 0;
  margin: auto;
  text-align: center;
  background: #a7b7d1;
  border: 4px solid #4d4c4c;
  border-radius: 8px;
  padding: 15px;
  width: 50%;
  height: 8rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  bottom: 0;
  left: 25%;
  margin-bottom: 0.75rem;
background-image: url("/assets/textures/metal2.jpg");
 background-size: 100%;
 display: grid;
  grid-template-columns: auto auto auto auto;
  overflow: hidden;
  box-shadow: inset 0 0 10px #2e2e2e;
  filter: drop-shadow(0px 0px 3.5px rgba(0, 0, 0, .7));
  z-index: 100; /* Always keeps selector in front */
}

.pageScreen {
  position: fixed;
  margin: auto;
  text-align: center;
  background: #689873;
  border: 4px solid #4d4c4c;
  border-radius: 8px;
  padding: 15px;
  width: 4.4%;
  height: .6rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  bottom: 60;
  left: 46.7%;
  margin-bottom: 0.75rem;
  overflow: hidden;
  box-shadow: inset 0 0 10px #2e2e2e;
  filter: drop-shadow(0px 0px 3.5px rgba(0, 0, 0, .7));
  z-index: 100; /* Always keeps title in front */
  opacity: 1;
  display:block;
  z-index: 101;
}

.pageTitle {
  opacity: 0;
}

.pageSelector a {
  display: block;
  width: 82%;
  height: 8.5vh;
  justify-content: center;
  display: grid;
  z-index: 50;
}
  
.pTitle {
  opacity: 0;
  display: block;
  position: absolute;
  top: 9;
  font-family: "Font2", sans-serif; 
  font-size: x-large;
  font-weight: bold;
  color: #3c4f42;
  text-shadow: 0 0.1rem #2b383066;
}


.elevatorButton:hover + .pTitle {
  display: block;
  font-family: "Font2", sans-serif; 
  font-size: x-large;
  font-weight: bold;
  color: #3c4f42;
  text-shadow: 0 0.1rem #2b383066;
}