button_ABOUT {
  position: fixed;
  text-align: left;
  float: left;
  background-color: orange;
  opacity: .0;
  width: clamp(80px, 15.5vw, 125px);
  height: clamp(4px, 4.5vw, 38px);
  cursor: crosshair;
  overflow: hidden;
  margin-bottom: 20px;
  margin-left: 20px;
  vertical-align: 0px;
  bottom:0;
  z-index: 9000;
}

button_X {
  position: fixed;
  text-align: right;
  float: right;
  background-color: green;
  opacity: .0;
  width: clamp(7px, 3.5vw, 29px);
  height: clamp(4px, 4.5vw, 38px);
  cursor: crosshair;
  overflow: hidden;
  margin-top: 20px;
  margin-right: 20px;
  z-index: 9000;
  right: 0%;
}

button_IG {
  position: absolute;
  text-align: left;
  float: left;
  background-color: green;
  opacity: .0;
  width: clamp(3px, 5.5vw, 44px);
  height: clamp(4px, 4.5vw, 38px);
  cursor: crosshair;
  overflow: hidden;
  margin-top: 20px;
  margin-left: 20px;
  z-index: 9000;
}

button_EMAIL {
  position: absolute;
  text-align: right;
  float: right;
  background-color: blue;
  opacity: .00;
  width: clamp(75px, 14.5vw, 115px);
  height: clamp(4px, 4.5vw, 38px);
  cursor: crosshair;
  overflow: hidden;
  margin-bottom: 20px;
  margin-right: 20px;
  vertical-align: 0px;
  bottom:0;
  right:0%;
  z-index: 9000;
}

button_home {
  position: fixed;
  text-align: center;
  float: none;
  background-color: red;
  opacity: .0;
  width: clamp(200px, 37.5vw, 308px);
  height: clamp(4px, 4.5vw, 38px);
  cursor: crosshair;
  overflow: hidden;
  margin-top: 20px;
  z-index: 9000;
  left: 50%;
  transform: translateX(-50%);
}


h6.text {
  position: absolute;
  bottom: 0;
  right: 0;
  color: white;
  font-family: ZZFont, "Arial Black", sans-serif;
  font-size: clamp(10px, 3.5vw, 23px);
  margin-bottom: 20px;
  margin-right: 20px;
  text-align: right;
  align-content: end;
  mix-blend-mode: difference;
}


h5.text {
  position: absolute;
  bottom: 0;
  left: 0;
  color: white;
  font-family: ZZFont, "Arial Black", sans-serif;
  font-size: clamp(10px, 3.5vw, 23px);
  margin-bottom: 20px;
  margin-left: 20px;
  text-align: left;
  vertical-align: -90px;
  align-content: end;
  mix-blend-mode: difference;
}

h4.text {
  position: absolute;
  text-align:right;
  float:right;
  text-align: right;
  color: white;
  font-family: ZZFont, "Arial Black", sans-serif;
  font-size: clamp(10px, 3.5vw, 23px);
  top:20px;
  right: 20px;
  mix-blend-mode: difference;
}

h3.text {
  position: absolute;
  text-align:left;
  float:left;
  text-align: left;
  color: white;
  font-family: ZZFont, "Arial Black", sans-serif;
  font-size: clamp(10px, 3.5vw, 23px);
  top:20px;
  left: 20px;
  z-index: 5000;
  mix-blend-mode: difference;
}


h2.text {
  position: absolute;
  text-align:center;
  width: 100%;
  height:10%;
  color: white;
  font-family: ZZFont, "Arial Black", sans-serif;
  font-size: clamp(10px, 3.5vw, 23px);
  top:20px;
  z-index: 5000;
  mix-blend-mode: difference;
}



canvas{
  position:absolute;
  display:block;
  z-index:100;
  padding-top: 0;
}



*{
  margin:0;
  padding:0;
}

body{
  background-color:black;

}

#video1 {
  height:100%;
  width:100%;
  object-fit: cover;
  background-color: black;
}

#video2 {
  height:100%;
  width:100%;
  object-fit: cover;
  background-color: black;
}

@media only screen and (max-width: 1026px) {
  #video1 {
    display: none;
  }
  #video2 {
    display: block;
  }
}

@media only screen and (min-width: 1027px) {
  #video1 {
    display: block;
  }
  #video2 {
    display: none;
  }
}