body {
    background: gray;
}



/* THIS GETS ACTIVATED AND BLOCKS ALL INPUT */ 
#input-blocker {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height:1080px;
    pointer-events: none;
    visibility: hidden;
    z-index: 5001;
}
#input-blocker.active {
    pointer-events: all;
    visibility: visible;

}
#input-blocker.active.debug {
    /** Debug **/
    background-color: rgba(128, 0, 255, 0.187); 
}

.hitbox_debug {
    background-color: transparent!important;
}


.LangSelectionEnglish {
    background-image: url(/assets/images/ui/buttons/lang/Lang-Button.png);
    position: absolute;
    left: 2166px;
    top: 1248px;
    width: 793px;
    height: 330px;
    z-index: 9;
  }

  

#KioskScreen {
    /* background-image: url(/assets/images/refs/popups.jpg); */
    background-image: url(/assets/images/refs/main-menu/Desk_ZoomedIn.jpg);
    background-repeat: no-repeat;
    height: 1080px;
    width: 1920px;
}  

/** When Aligning Elements I use a ref image under them. **/
#KioskScreen.reference {
    /* background-image: url(/assets/images/refs/popups.jpg); */
    background-image: url(/assets/images/refs/Intro-LangSel.png);
    background-repeat: no-repeat;
    height: 1080px;
    width: 1920px;
}

.button {
    padding: 30px;
    border-radius: 10px;
    background-color: rgb(255, 254, 185);
    color: black;
    text-align: center;
    width: 200px;
    display: inline-block;
    margin: 10px;
    z-index: 10;
    pointer-events: all;
}

#KioskScreen {
    width: 1920px;
    height: 1080px;
}

#main_buttons_container {
    width: 500px;
    display: block;
    transform: translate(-50%, -50%);
    position: relative;
    top: 50%;
    left: 50%;
}

#main_buttons_wrapper {
    background: rgba(0, 0, 0, 0.14);
    /* color: white; */
    /* width: 50%;
transform: translate(-50%, -50%);
position: relative;
top: 50%;
left: 50%; */
    /* padding: 20px; */
    /* resize: both; */
    /* overflow: hidden; */
    text-align: center;
}
/* Disable Ptr Events on the video bg */

video#background_vid {
    pointer-events: none;
    width: 1920px;
    height: 1080px;
    padding: 0;
    margin: 0;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}

#language_selection.button {
    position: relative;
    transform: translate(0, 0);
    z-index: 100;
}

#home_zoom_in.button {
    position: relative;
    transform: translate(0, 0);
    z-index: 100;
}




.btn_LanguageSelect {
    z-index: 100;
    width: 393px;
    /* opacity: .75; */
}
#langSelectEnglish {
    position: absolute;
    transform: translate(545px, 630px);
}
#langSelectSpanish {
    position: absolute;
    transform: translate(1085px, 630px);
}


#lang_introduction_text {
    color: rgb(0, 0, 0);
    text-align: left;
    position: absolute;
    left: 515px;
    top: 230px;
    width: 600px;
    height: 491px;
    z-index: 15;
}


#selectLangStartExploring {
    color: rgb(0, 0, 0);
    text-align: left;
    position: absolute;
    left: 559px;
    top: 425px;
    width: 600px;
    height: 491px;
    z-index: 15;
}

/* I want to change this to an adjustable SVG. */
.mainmenu_jack_balloon {
    background-image: url(/assets/images/ui/speech_balloon.png);
    position: absolute;
    left: 524px;
    top: 204px;
    width: 722px;
    height: 322px;
    z-index: 2;
    background-size: 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* I may / will change these graphics to actual size, unless they are blurry. */
.mainmenu_jack_language_select {
    background-image: url(/assets/images/ui/jack_ref.png);
    position: absolute;
    left: 1242px;
    top: 261px;
    width: 228px;
    height: 340px;
    z-index: 13;
    background-size: 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}