@font-face { 
   font-family: PTMONO; 
   src: url('PTMono.ttc'); 
}


* {
    box-sizing: border-box;
}

.color_ex{
    letter-spacing: 1px;
    font-family: 'Fira Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    //color: orange;
    color:white;
    position: absolute;
    top:500px;
    left:1400px;
    position:fixed;
}


.color1_ex{
    letter-spacing: 1px;
    font-family: 'Fira Mono', monospace;
    font-weight: 400;
    font-size: 8.5px;
    //color: orange;
    color:white;
    position: absolute;
    top:600px;
    left:1400px;
    position:fixed;
}

.color2_ex{
    letter-spacing: 1px;
    font-family: 'Fira Mono', monospace;
    font-weight: 400;
    font-size: 8.5px;
    //color:deepskyblue;
    color:white;
    position: absolute;
    top:620px;
    left:1400px;
    position:fixed;
}
.color3_ex{
    letter-spacing: 1px;
    font-family: 'Fira Mono', monospace;
    font-weight: 400;
    font-size: 8.5px;
    //color: limegreen;
    color:white;
    position: absolute;
    top:640px;
    left:1400px;
    position:fixed;
}
.color4_ex{
    letter-spacing: 1px;
    font-family: 'Fira Mono', monospace;
    font-weight: 400;
    font-size: 8.5px;
    //color: mediumpurple;
    color:white;
    position: absolute;
    top:660px;
    left:1400px;
    position:fixed;
}
.color5_ex{
    letter-spacing: 1px;
    font-family: 'Fira Mono', monospace;
    font-weight: 400;
    font-size: 8.5px;
    //color: blue;
    color:white;
    position: absolute;
    top:680px;
    left:1400px;
    position:fixed;
}
.color6_ex{
    letter-spacing: 1px;
    font-family: 'Fira Mono', monospace;
    font-weight: 400;
    font-size: 8.5px;
    //color: deeppink;
    color:white;
    position: absolute;
    top:700px;
    left:1400px;
    position:fixed;
}
.color7_ex{
    letter-spacing: 1px;
    font-family: 'Fira Mono', monospace;
    font-weight: 400;
    font-size: 8.5px;
    //color: darkturquoise;
    color:white;
    position: absolute;
    top:720px;
    left:1400px;
    position:fixed;
}
.color8_ex{
    letter-spacing: 1px;
    font-family: 'Fira Mono', monospace;
    font-weight: 400;
    font-size: 8.5px;
    //color: yellow;
    color:white;
    position: absolute;
    top:740px;
    left:1400px;
    position:fixed;
}
.color9_ex{
    letter-spacing: 1px;
    font-family: 'Fira Mono', monospace;
    font-weight: 400;
    font-size: 8.5px;
    //color: red;
    color:white;
    position: absolute;
    top:760px;
    left:1400px;
    position:fixed;
}
.color10_ex{
    letter-spacing: 1px;
    font-family: 'Fira Mono', monospace;
    font-weight: 400;
    font-size: 8.5px;
    //color: peachpuff;
    color:white;
    position: absolute;
    top:780px;
    left:1400px;
    position:fixed;
}

.extraverted_y{
    letter-spacing: 50px;
    writing-mode: tb-rl;
   font-family: 'Fira Mono', monospace;
    font-weight: 400;
    font-size: 20px;
    color: white;
    position: absolute;
    top:130px;
    left:250px;
   }


.introverted_x{
    letter-spacing: 50px;
    font-family: 'Fira Mono', monospace;
    font-weight: 400;
    font-size: 20px;
    color: white;
    position: absolute;
    top:870px;
    left:450px;
    margin-bottom: 50px;
   }

.introverted_scale{
    letter-spacing: 10px;
    font-family: 'Fira Mono', monospace;
    font-weight: 400;
    font-size: 10px;
    color: white;
    position: absolute;
    top:200px;
    left:1180px;
   }
.extraverted_scale{
    letter-spacing: 10px;
    font-family: 'Fira Mono', monospace;
    font-weight: 400;
    font-size: 10px;
    color: white;
    position: absolute;
    top:600px;
    left:1180px;
   }
.slidecontainer {
    width: 100%; /* Width of the outside container */
} 
.slider {
    -webkit-appearance: none;
    -webkit-transform: rotate(90deg);
    position: absolute;
    left: 1100px;
    top: 400px;
    width: 20%;
    height: 1px; 
    background: white;
    -webkit-transition: .2s;
    transition: opacity .2s;
    
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}


.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    -webkit-transform: rotate(90deg);
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%; 
    background: white;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
}
/* 30 buttons */

/*.name {
    border: none;
    background-color: inherit;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
} 
#nameDJ{
  color:white;
  
} */

.container {
  position: absolute;
  width: auto;
  height: auto;
  top: 50px;
  left: 130px;
    padding: 0;

}
.image {
  display: block;
  width: 200;
  height: 200px;
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}
.container:hover .overlay {
  opacity: 0.9;
}

.text {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 16px;
    letter-spacing: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container2 {
  position: absolute;
  width: auto;
  height: auto;
  top: 50px;
  left: 450px;
    padding: 0;
}

.image2 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container2:hover .overlay2 {
  opacity: 0.9;
}

.text2 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container3 {
  position: absolute;
  width: auto;
  height: auto;
  top: 50px;
  left: 770px;
    padding: 0;
}

.image3 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay3 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container3:hover .overlay3 {
  opacity: 0.9;
}

.text3 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}



.container4 {
  position: absolute;
  width: auto;
  height: auto;
  top: 50px;
  left: 1090px;
    padding: 0;
}

.image4 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay4 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container4:hover .overlay4 {
  opacity: 0.9;
}

.text4 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container5 {
  position: absolute;
  width: auto;
  height: auto;
  top: 360px;
  left: 130px;
    padding: 0;
}

.image5 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay5 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container5:hover .overlay5 {
  opacity: 0.9;
}

.text5 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}



.container6 {
  position: absolute;
  width: auto;
  height: auto;
  top: 360px;
  left: 450px;
    padding: 0;
}

.image6 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay6 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container6:hover .overlay6 {
  opacity: 0.9;
}

.text6 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container7 {
  position: absolute;
  width: auto;
  height: auto;
  top: 360px;
  left: 770px;
    padding: 0;
}

.image7 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay7 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container7:hover .overlay7 {
  opacity: 0.9;
}

.text7 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container8 {
  position: absolute;
  width: auto;
  height: auto;
  top: 360px;
  left: 1090px;
    padding: 0;
}

.image8 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay8 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container8:hover .overlay8 {
  opacity: 0.9;
}

.text8 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container9 {
  position: absolute;
  width: auto;
  height: auto;
  top: 670px;
  left: 130px;
    padding: 0;
}

.image9 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay9 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container9:hover .overlay9 {
  opacity: 0.9;
}

.text9 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container10 {
  position: absolute;
  width: auto;
  height: auto;
  top: 670px;
  left: 450px;
    padding: 0;
}

.image10 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay10 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container10:hover .overlay10 {
  opacity: 0.9;
}

.text10 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container11 {
  position: absolute;
  width: auto;
  height: auto;
  top: 670px;
  left: 770px;
    padding: 0;
}

.image11 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay11 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container11:hover .overlay11 {
  opacity: 0.9;
}

.text11 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}



.container12 {
  position: absolute;
  width: auto;
  height: auto;
  top: 670px;
  left: 1090px;
    padding: 0;
}

.image12 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay12 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container12:hover .overlay12 {
  opacity: 0.9;
}

.text12 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container13 {
  position: absolute;
  width: auto;
  height: auto;
  top: 980px;
  left: 130px;
    padding: 0;
}

.image13 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay13 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container13:hover .overlay13 {
  opacity: 0.9;
}

.text13 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container14 {
  position: absolute;
  width: auto;
  height: auto;
  top: 980px;
  left: 450px;
    padding: 0;
}

.image14 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay14 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container14:hover .overlay14 {
  opacity: 0.9;
}

.text14 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container15 {
  position: absolute;
  width: auto;
  height: auto;
  top: 980px;
  left: 770px;
    padding: 0;
}

.image15 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay15 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container15:hover .overlay15 {
  opacity: 0.9;
}

.text15 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container16 {
  position: absolute;
  width: auto;
  height: auto;
  top: 980px;
  left: 1090px;
    padding: 0;
}

.image16 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay16 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container16:hover .overlay16 {
  opacity: 0.9;
}

.text16 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container17 {
  position: absolute;
  width: auto;
  height: auto;
  top: 1290px;
  left: 130px;
    padding: 0;
}

.image17 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay17 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container17:hover .overlay17 {
  opacity: 0.9;
}

.text17 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}



.container18 {
  position: absolute;
  width: auto;
  height: auto;
  top: 1290px;
  left: 450px;
    padding: 0;
}

.image18 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay18 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container18:hover .overlay18 {
  opacity: 0.9;
}

.text18 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}



.container19 {
  position: absolute;
  width: auto;
  height: auto;
  top: 1290px;
  left: 770px;
    padding: 0;
}

.image19 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay19 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container19:hover .overlay19 {
  opacity: 0.9;
}

.text19 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container20 {
  position: absolute;
  width: auto;
  height: auto;
  top: 1290px;
  left: 1090px;
    padding: 0;
}

.image20 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay20 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container20:hover .overlay20 {
  opacity: 0.9;
}

.text20 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container21 {
  position: absolute;
  width: auto;
  height: auto;
  top: 1600px;
  left: 130px;
    padding: 0;
}

.image21 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay21 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container21:hover .overlay21 {
  opacity: 0.9;
}

.text21 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container22 {
  position: absolute;
  width: auto;
  height: auto;
  top: 1600px;
  left: 450px;
    padding: 0;
}

.image22 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay22 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container22:hover .overlay22 {
  opacity: 0.9;
}

.text22 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container23 {
  position: absolute;
  width: auto;
  height: auto;
  top: 1600px;
  left: 770px;
    padding: 0;
}

.image23 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay23 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container23:hover .overlay23 {
  opacity: 0.9;
}

.text23 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}



.container24 {
  position: absolute;
  width: auto;
  height: auto;
  top: 1600px;
  left: 1090px;
    padding: 0;
}

.image24 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay24 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container24:hover .overlay24 {
  opacity: 0.9;
}

.text24 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container25 {
  position: absolute;
  width: auto;
  height: auto;
  top: 1910px;
  left: 130px;
    padding: 0;
}

.image25 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay25 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container25:hover .overlay25 {
  opacity: 0.9;
}

.text25 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container26 {
  position: absolute;
  width: auto;
  height: auto;
  top: 1910px;
  left: 450px;
    padding: 0;
}

.image26 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay26 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container26:hover .overlay26 {
  opacity: 0.9;
}

.text26 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container27 {
  position: absolute;
  width: auto;
  height: auto;
  top: 1910px;
  left: 770px;
    padding: 0;
}

.image27 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay27 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container27:hover .overlay27 {
  opacity: 0.9;
}

.text27 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container28 {
  position: absolute;
  width: auto;
  height: auto;
  top: 1910px;
  left: 1090px;
    padding: 0;
}

.image28 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay28 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container28:hover .overlay28 {
  opacity: 0.9;
}

.text28 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container29 {
  position: absolute;
  width: auto;
  height: auto;
  top: 2220px;
  left: 130px;
    padding: 0;
}

.image29 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay29 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container29:hover .overlay29 {
  opacity: 0.9;
}

.text29 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container30 {
  position: absolute;
  width: auto;
  height: auto;
  top: 2220px;
  left: 450px;
    padding: 0;
}

.image30 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay30 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container30:hover .overlay30 {
  opacity: 0.9;
}

.text30 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container31 {
  position: absolute;
  width: auto;
  height: auto;
  top: 2220px;
  left: 770px;
    padding: 0;
}

.image31 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay31 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container31:hover .overlay31 {
  opacity: 0.9;
}

.text31 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container32 {
  position: absolute;
  width: auto;
  height: auto;
  top: 2220px;
  left: 1090px;
    padding: 0;
}

.image32 {
  display: block;
  width: 200px;
  height: 200px;
}

.overlay32 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container32:hover .overlay32 {
  opacity: 0.9;
}

.text32 {
  font-family: 'Fira Mono', monospace;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

#buttondata{
    font-family: 'Fira Mono', monospace;
    letter-spacing: 5px;
    font-size: 8px;
    color:white;
    opacity: 0;
    position:absolute;
    top: -12px;
    left: px;

    /* I just added it in to make hover effects smoother,
    feel free to take this out/change it lmao */
    transition: 0.5s; 
}

/* When you hover over a button, the button's 
child's opacity changes */
.button:hover #buttondata {
    opacity: 1;
}

.button:hover {
    /* Makes it so that when you're hovering over a 
    button, it isn't covered by another button*/
    z-index: 100;
}

.button1 {
    top: 730px;
    left: 990px;
}
.button2 {
    top: 300px;
    left: 605px;
}

.button3 {
    top: 300px;
    left: 600px;
}

.button4 {
    top: 660px;
    left: 940px;
}

.button5 {
    top: 305px;
    left: 610px;
}

.button6 {
    top: 213px;
    left: 490px;
}

.button7 {
    top: 450px;
    left: 748px;
}

.button8 {
    top: 230px;
    left: 510px;
}

.button9 {
    top: 300px;
    left: 603px;
}

.button10 {
    top: 220px;
    left: 508px;
}

.button11 {
    top: 520px;
    left: 790px;
}

.button12 {
    top: 560px;
    left: 820px;
}

.button13 {
    top: 364px;
    left: 640px;
}


.button14 {
    top: 515px;
    left: 780px;
}
.button15 {
    top: 115px;
    left: 388px;
}

.button16 {
    top: 415px;
    left: 685px;
}

.button17 {
    top: 415px;
    left: 687px;
}

.button18 {
    top: 364px;
    left: 643px;
}

.button19 {
    top: 295px;
    left: 594px;
}

.button20 {
    top: 525px;
    left: 800px;
}

.button21 {
    top: 363px;
    left: 645px;
}

.button22 {
    top: 470px;
    left: 755px;
}
.button23 {
    top: 275px;
    left: 575px;
}
.button24 {
    top: 650px;
    left: 930px;
}
.button25 {
    top: 660px;
    left: 943px;
}
.button26 {
    top: 360px;
    left: 646px;
}
.button27 {
    top: 213px;
    left: 494px;
}

.button28 {
    top: 613px;
    left: 885px;
}

.button29 {
    top: 415px;
    left: 688px;
}

.button30 {
    top: 660px;
    left: 945px;
}

.button31 {
    top: 580px;
    left: 840px;
}

.button32 {
    top: 450px;
    left: 747px;
}



.zoom {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: white;
    transition: transform .2s; 
}

/*.zoom {
    height: 8px;
    width: 8px;
    background-color: white;
    border-radius: 50%;
    display: inline-block;
    transition: transform .2s;
    margin-top: 200;
    margin-left: 800;
  
}
*/
.zoom:hover {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5);
    background-color: blue;
}

/* 32 Overlays */

#overlay_01 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_02 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_03 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_04 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_05 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_06 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_07 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_08 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_09 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_10 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_11 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_12 {
position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_13 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_14 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_15 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_16 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_17 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_18 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_19 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_20 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_21 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_22 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_23 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_24 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_25 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_26 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_27 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_28 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_29 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_30 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_31 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}
#overlay_32 {
    position: fixed;
    display: none;
    width: 95%;
    height: 100%;
    top: 20px;
    left: 70px;
    background-color: black;
    z-index: 2;
    cursor: pointer;
}



#textName{
    position: absolute;
    font-family: 'Fira Mono', monospace; 
    top: 5%;
    left: 88%;
    font-size: 16px;
    color: white;
    //transform: translate(-50%,-50%);
    //-ms-transform: translate(-50%,-50%);
}

#textType{
    position: absolute;
    font-family: 'Fira Mono', monospace; 
    top: 55%;
    left: 88%;
    font-size: 12px;
    color: white;
    //transform: translate(-50%,-50%);
    //-ms-transform: translate(-50%,-50%);
}

#textInfo{
    position: absolute;
    font-family: 'Fira Mono', monospace; 
    top: 60%;
    left: 88%;
    font-size: 12px;
    color: white;
}

#textInfo_2{
    position: absolute;
    font-family: 'Fira Mono', monospace; 
    top: 63%;
    left: 88%;
    font-size: 12px;
    color: white;
}
#textInfo_3{
    position: absolute;
    font-family: 'Fira Mono', monospace; 
    top: 66%;
    left: 88%;
    font-size: 12px;
    color: white;
}
#textInfo_4{
    position: absolute;
    font-family: 'Fira Mono', monospace; 
    top: 69%;
    left: 88%;
    font-size: 12px;
    color: white;
}
#textInfo_5{
    position: absolute;
    font-family: 'Fira Mono', monospace; 
    top: 72%;
    left: 88%;
    font-size: 12px;
    color: white;
}
#textInfo_6{
    position: absolute;
    font-family: 'Fira Mono', monospace; 
    top: 75%;
    left: 88%;
    font-size: 12px;
    color: white;
}
#textInfo_7{
    position: absolute;
    font-family: 'Fira Mono', monospace; 
    top: 78%;
    left: 88%;
    font-size: 12px;
    color: white;
}
#textInfo_8{
    position: absolute;
    font-family: 'Fira Mono', monospace; 
    top: 81%;
    left: 88%;
    font-size: 12px;
    color: white;
}
#textInfo_9{
    position: absolute;
    font-family: 'Fira Mono', monospace; 
    top: 84%;
    left: 88%;
    font-size: 12px;
    color: white;
}
#textInfo_10{
    position: absolute;
    font-family: 'Fira Mono', monospace; 
    top: 87%;
    left: 88%;
    font-size: 12px;
    color: white;
}
.exit{
    position: absolute;
    font-family: 'Fira Mono', monospace; 
    top: 2%;
    left: 98%;
    font-size: 15px;
    color: white;
    //transform: translate(-50%,-50%);
    //-ms-transform: translate(-50%,-50%);
}

.imagesize{
    height:85%;
    width:85%;
}

.video_placement{
    position: absolute;
    top: 18%;
    left: 8%;
}
#graph {
    position: absolute;
    top: 25px;
    left: 350px;
}

.hundred {
    font-size: 10px;
    color: white;
    font-family: 'Fira Mono', monospace;
    position: absolute;
    top: 120px;
    left: 355px;
}
/*.ninety {
   font-size: 10px;
    color: white;
    font-family: 'PTMONO';
    position: absolute;
    top: 120px;
    left: 410px;
} */

.eighty {
    font-size: 10px;
    color: white;
    font-family: 'Fira Mono', monospace;
    position: absolute;
    top: 250px;
    left: 360px;
}

.sixty {
    font-size: 10px;
    color: white;
    font-family: 'Fira Mono', monospace;
    position: absolute;
    top: 385px;
    left: 360px;
}

.fourty {
    font-size: 10px;
    font-family: 'Fira Mono', monospace;
    position: absolute;
    top: 518px;
    left: 364px;
}

.twenty {
  font-size: 10px;
    color: white;
    font-family: 'Fira Mono', monospace;
    position: absolute;
    top: 650px;
    left: 364px;
}

.zero {
    font-size: 10px;
    color: white;
    font-family: 'Fira Mono', monospace;
    position: absolute;
    top: 795px;
    left: 370px;
}

.twenty1 {
    font-size: 10px;
    color: white;
    font-family: 'Fira Mono', monospace;
    position: absolute;
    top: 795px;
    left: 510px;
}

.fourty1 {
    font-size: 10px;
    color: white;
    font-family: 'Fira Mono', monospace;
    position: absolute;
    top: 795px;
    left: 643px;
}

.sixty1 {
    font-size: 10px;
    color: white;
    font-family: 'Fira Mono', monospace;
    position: absolute;
    top: 795px;
    left: 775px;
}

.eighty1 {
    font-size: 10px;
    color: white;
    font-family: 'Fira Mono', monospace;
    position: absolute;
    top: 795px;
    left: 910px;
}

.hundred1 {
    font-size: 10px;
    color: white;
    font-family: 'Fira Mono', monospace;
    position: absolute;
    top: 795px;
    left: 1040px;
}



body {
    background-color: black;
    zoom: 90%;
}

/* Dropdown Button */
.dropbtn {
    background-color: white;
    padding: 2px 25px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: white;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: absolute;
    top: 40px;
    left: 1450px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: black;
    min-width: 50px;
    top: 20px;
    z-index: 1;
    margin-left:-70%
}

/* Links inside the dropdown */
.dropdown-content a {
    color: white;
    font-size: 10px;
    font-family: 'Fira Mono', monospace;
    padding: 18px 26px;
    text-decoration: none;
    text-align: center;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: none}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

/* video */

.wrapper {
  height: 50vh;
  display: flex;
  align-items: center;
  color: #FFF;
  
}

.video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  overflow: hidden;
  
}

.video-wrap video {
  min-width: 50%;
  min-height: 50%;
  
}