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


* {
    box-sizing: border-box;
}


.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:155px;
    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:470px;
    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:1190px;
   }
.extraverted_scale{
    letter-spacing: 10px;
    font-family: 'Fira Mono', monospace;
    font-weight: 400;
    font-size: 10px;
    color: white;
    position: absolute;
    top:600px;
    left:1190px;
   }
.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 */

.button {
    background-color: white;
    border: none;
    padding: 1px;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 50%;
    position:absolute;
}


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

    /* 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: 270px;
    left: 530px;
}
.button2 {
    top: 370px;
    left: 625px;
}

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

.button4 {
    top: 220px;
    left: 480px;
}

.button5 {
    top: 400px;
    left: 660px;
}

.button6 {
    top: 275px;
    left: 545px;
}

.button7 {
    top: 365px;
    left: 620px;
}

.button8 {
    top: 390px;
    left: 660px;
}

.button9 {
    top: 370px;
    left: 620px;
}

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

.button11 {
    top: 410px;
    left: 684px;
}

.button12 {
    top: 440px;
    left: 690px;
}

.button13 {
    top: 410px;
    left: 680px;
}


.button14 {
    top: 320px;
    left: 580px;
}
.button15 {
    top: 715px;
    left: 1010px;
}

.button16 {
    top: 220px;
    left: 485px;
}

.button17 {
    top: 505px;
    left: 780px;
}

.button18 {
    top: 275px;
    left: 540px;
}

.button19 {
    top: 245px;
    left: 525px;
}

.button20 {
    top: 210px;
    left: 465px;
}

.button21 {
    top: 310px;
    left: 590px;
}

.button22 {
    top: 550px;
    left: 800px;
}
.button23 {
    top: 390px;
    left: 665px;
}
.button24 {
    top: 410px;
    left: 685px;
}
.button25 {
    top: 385px;
    left: 640px;
}
.button26 {
     top: 445px;
    left: 698px;
}
.button27 {
    top: 365px;
    left: 625px;
}

.button28 {
    top: 180px;
    left: 440px;
}

.button29 {
    top: 270px;
    left: 535px;
}

.button30 {
    top: 355px;
    left: 605px;
}

.button31 {
    top: 410px;
    left: 685px;
}

.button32 {
    top: 390px;
    left: 665px;
}



.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;
    z-index: 1;
    top:20px;
    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%;
  
}