body {
    padding: 0%;
    margin: 0%;
    border-radius: 0%;
    max-width: none;
    max-height: none;
    width: 100%;
}

#dirt1 {
  display: none;
  position: absolute;
  min-width: none;
  width: 100%;
  height: auto;
  z-index: 4;
}
#dirt2 {
    display: none;
    position: absolute;
    min-width: none;
    width: 100%;
    height: auto;
    z-index: 4;

  }
  .loadinggif {
    display: block;
    position: absolute;
    margin-left: 35vw;
    margin-top: 20%;
    place-items: center;
    max-width: 25vw;
    mix-blend-mode: multiply;
    z-index: 3000;
  }

.loadinggif img {
    width: 100%;
    height: 100%;
}

.whiteOut{
  position: absolute;
  background-color: white;
  width: 100vw;
  height: 100vh;
  z-index: 2500;
  opacity: 1;
  transition: opacity 10s ease-in-out;
}

.interface{
  display: inline;
  justify-content: center;
}

#gameboy {
    position: absolute;
    height: auto;
    width: 100%;
    padding: 0%;
    border-radius: 0%;
    z-index: 2;
}

#redButton {
   position: absolute;
   width: 10.6%;
   margin-top: 86%;
   margin-left: 73.3%;
   height: auto;
   z-index: 3;
}

  #redButton:active {
    transform: scaleY(-1);
  }

  #aboutButton {
    position: absolute;
    width: 4%;
    margin-top: 30%;
    margin-left: 6%;
    height: auto;
    z-index: 4;
    
 }

 #aboutButton:active {
  transform: translateX(5%);
}

  #onButton {
    position: absolute;
    width: 23.5%;
    height: auto;
    max-width: auto;
    max-height: auto;
    margin-top: 108%;
    margin-right: auto;
    margin-left: 37.5%;
    z-index: 4;
  }
  #onButton:active {
    transform: scaleX(-1);
  }
  #blueButton {
    position: absolute;
    width: 23%;
    height: auto;
    max-width: auto;
    max-height: auto;
    margin-top: 82.2%;
    margin-right: auto;
    margin-left: 14.5%;;
    z-index: 3;
  }

  #blueButton:active {
    transform: scaleX(-1);
  
  }

  #throwSwitch {
    position: absolute;
    width: 13%;
    height: auto;
    max-width: auto;
    max-height: auto;
    margin-top: 103%;
    margin-right: auto;
    margin-left: 72%;
    z-index: 3;
  }

  #throwSwitch:active {
    transform: scaleY(-1);
  }

  #musicJack {
    position: absolute;
    width: 16.5%;
    height: auto;
    max-width: auto;
    max-height: auto;
    margin-top: 75%;
    margin-right: auto;
    margin-left: 50%;
    z-index: 3;
  }

#scrollVid {
  position: absolute;
  width: 53%;
  height: auto;
  max-width: auto;
  max-height: auto;
  margin-top: 11.5%;
  margin-right: auto;
  margin-left: 23.3%;
  z-index: 1;
}

#srLoop {
  display: none;
  position: absolute;
  width: 53%;
  height: auto;
  max-width: auto;
  max-height: auto;
  margin-top: 11.5%;
  margin-right: auto;
  margin-left: 23.3%;
  z-index: 1;
}
#shopLoop {
  display: none;
  position: absolute;
  width: 53%;
  height: auto;
  max-width: auto;
  max-height: auto;
  margin-top: 11.5%;
  margin-right: auto;
  margin-left: 23.3%;
  z-index: 1;
}
#galleryLoop {
  display: none;
  position: absolute;
  width: 53%;
  height: auto;
  max-width: auto;
  max-height: auto;
  margin-top: 11.5%;
  margin-right: auto;
  margin-left: 23.3%;
  z-index: 1;
}
#contactLoop {
  display: none;
  position: absolute;
  width: 53%;
  height: auto;
  max-width: auto;
  max-height: auto;
  margin-top: 11.5%;
  margin-right: auto;
  margin-left: 23.3%;
  z-index: 1;
}

#aboutLoop {
  display: none;
  position: absolute;
  width: 53%;
  height: auto;
  max-width: auto;
  max-height: auto;
  margin-top: 11.5%;
  margin-right: auto;
  margin-left: 23.3%;
  z-index: 1;
}

/* 760px width BREAKPOINT*/

@media screen and (min-width: 760px) {
  #gameboy {
  max-width: 80%;
  margin-left: 10%;
  align-items: center;
  }
#aboutButton {
    position: absolute;
    width: 3.6%;
    margin-top: 24%;
    margin-left: 14.5%;
    height: auto;
    z-index: 4;
 }  
#redButton {
  width: 8.5%;
  margin-top: 69%;
  margin-left: 68.7%;
}
#musicjack {
  width: 14%;
  margin-top: 59%;
  margin-left: 50%;
}
#throwswitch {
  width: 11%;
  margin-top: 83%;
  margin-left: 67%;
}
#bluebutton {
  width: 18%;
  margin-top: 66%;
  margin-left: 21.8%;
}
#onbutton {
  width: 20.5%;
  margin-top: 86%;
  margin-left: 38.5%;
}
#scrollVid{
  width: 42.5%;
  margin-top: 9%;
  margin-left: 28.6%;
}
#srLoop{
  width: 42.5%;
  margin-top: 9%;
  margin-left: 28.6%;
}
#galleryLoop{
  width: 42.5%;
  margin-top: 9%;
  margin-left: 28.6%;
}
#contactLoop{
  width: 42.5%;
  margin-top: 9%;
  margin-left: 28.6%;
}
#shopLoop{
  width: 42.5%;
  margin-top: 9%;
  margin-left: 28.6%;
}

#aboutLoop{
  width: 42.5%;
  margin-top: 9%;
  margin-left: 28.6%;
}
}

/* LANDSCAPE BREAKPOINT*/
@media (orientation: landscape) {

  .loadinggif {
    margin-left: 35vw;
    margin-top: 10%;
}

  #gameboy {
    max-width: 40%;
    margin-left: 30%;
  }
  #redButton {
    max-width: 4.3%;
    margin-left: 59.4%;
    margin-top: 34.4%;
    }
  #aboutButton {
    position: absolute;
    width: 2%;
    margin-top: 11.5%;
    margin-left: 32%;
    height: auto;
      z-index: 4;
      }
  #musicjack {
    width: 6.5%;
    margin-top: 30%;
    margin-left: 50%;
    }
    #throwswitch {
      width: 5.5%;
      margin-top: 41.5%;
      margin-left: 59%;
    }
    #bluebutton {
      width: 9%;
      margin-top: 32.8%;
      margin-left: 36%;
    }
    #onbutton {
      width: 10%;
      margin-top: 43.2%;
      margin-left: 44.5%;
    }
    #scrollVid{
      width: 21%;
      margin-top: 4.7%;
      margin-left: 39.3%;
    }
    #srLoop{
      width: 21%;
      margin-top: 4.7%;
      margin-left: 39.3%;
    }
    #galleryLoop{
      width: 21%;
      margin-top: 4.7%;
      margin-left: 39.3%;
    }
    #contactLoop{
      width: 21%;
      margin-top: 4.7%;
      margin-left: 39.3%;
    }
    #shopLoop{
      width: 21%;
      margin-top: 4.7%;
      margin-left: 39.3%;
    }
    #aboutLoop{
      width: 21%;
      margin-top: 4.7%;
      margin-left: 39.3%;
    }
    #dirt2 {
      display: inline;
      position: absolute;
      margin-left: 72%;
      margin-top: 15%;
      width: 20%;
    }
    #dirt1 {
      display: inline;
      margin-left: 10%;
      margin-top: 26%;
      position: absolute;
      width: 17%;
    }
}