/* || FONTS */

@font-face {
    font-family: basicFont;
    src: url("../assets/fonts/Fresh\ Lychee.ttf");
}

/* || GENERAL */

*
{
    margin:0;padding:0;
}

.container {
  width: 100vw; 
  height: calc(100vw * 9 / 16);

  /* align center */
  margin: auto;
  position: absolute;
  top: 0px; right: 0px; bottom: 0px; left: 0px;

  /* visual indicators */
  /* background:
    url(data:image/gif;base64,R0lGODlhAgAUAIABAB1ziv///yH5BAEAAAEALAAAAAACABQAAAIHhI+pa+EPCwA7) repeat-y center top,
    url(data:image/gif;base64,R0lGODlhFAACAIABAIodZP///yH5BAEAAAEALAAAAAAUAAIAAAIIhI8Zu+nIVgEAOw==) repeat-x left center,
    silver; 
    background-color: cornflowerblue;*/
    z-index: -10;
}

/* 100 * 16/9 = 177.778 */
@media (min-width: 177.778vh) {
  .container {
    height: 100vh;
    width: calc(100vh * 16 / 9);

    font-size: calc(10vh * 16 / 9);
  }
}

/* || UI */

.ui {
    width: 100%;
    height: 100%;
}

/* .dialogue-panel {
    position: absolute;
    bottom: 
    left: 25%;
    width: 50%;
} */

/* .dialogue-text {

} */

#titleText {
    position: absolute;
    top:20%;
    left:50%;

    /*filter: invert(99%) sepia(0%) saturate(0%) hue-rotate(310deg) brightness(102%) contrast(102%);*/
}

#playButton {
    height: 50px;
    margin-top: -25px;
    width: 140px;
    margin-left: -70px;
    background:none;
    border:none;
    position: absolute;
    top: 85%;
    left: 50%;
    font-size: 3.5vw;
    display: inline;
    color: whitesmoke;
    font-family: inherit;
    cursor: pointer;
    opacity: 0.5;
    pointer-events: none;
}

#playButton:hover {
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,Color='#444')";
    filter: url(#drop-shadow);
    -webkit-filter: drop-shadow(0 0 4px rgb(255, 255, 255));
    filter: drop-shadow(0 0 4px rgb(255, 255, 255));
    transition: .1s ease-in-out;
}

#nameInput {
    height: auto;
    margin-top: auto;
    width: 60%;
    margin-left: -30%;
    background: whitesmoke;
    border:none;
    position: absolute;
    top: 70%;
    left: 50%;
    font-size: 2.5vw;
    color: black;
    border-radius: 0.3vw;
    font-family: inherit;
    padding: 0.5%;
}

#labelName {
    height: auto;
    margin-top: auto;
    width: 60%;
    margin-left: -30%;
    border:none;
    position: absolute;
    top: 63%;
    left: 50%;
    font-size: 2.5vw;
    color: whitesmoke;
    border-radius: 0.3vw;
}

.square {
    width: 75px;
    height: 100px;
    background-color: green;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
}

.npc {
    height: auto;
    position: absolute;
    /* top: 50%;
    left: 35%; */
    z-index: -2;
    transform-origin: bottom;
    /*border-radius: 5px;*/
    border: black;
}

.escenari {
    position: absolute;
}

.cadira {
    position: absolute;
    z-index: -3;
    margin-left: -7%;
    pointer-events: none;
}

.taula {
    position: absolute;
    z-index: -1;
    margin-left: -12%;
    pointer-events: none;
}

.surface {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

#examContent {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 101;
    font-size: 1.2vw;
    pointer-events: none;
    opacity: 0;
}

#examQuestions {
    position: absolute;
    top: 26%;
    left: 50%;
    height: 73%;
    width: 40%;
    margin-left: -20.5%;
    /*background-color: chocolate;*/
    font-size: 1.4vw;
}

#examName {
    font-size: 1.7vw;
}

#taquilla {
    width: 5%;
    height: auto;
    position: absolute;
    /* top: 50%;
    left: 35%; */
    z-index: 0;
    transform-origin: bottom;
    /*border-radius: 5px;*/
    border: black;
}

.npc:hover {
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,Color='#444')";
    filter: url(#drop-shadow);
    -webkit-filter: drop-shadow(0 0 6px rgba(24, 201, 255, 0.747));
    filter: drop-shadow(0 0 6px rgba(24, 201, 255, 0.747));
    transition: .2s ease-in-out;
}

#dialogueBox {
    background-color: rgba(230, 55, 55, 0.527);
    z-index: 1;
    visibility: visible;
    position: absolute;
    bottom: 0;
    padding: 1%;
    width: 90%;
    height: 25%;
    border-radius: 1vw;
    text-align: justify;
    text-justify: auto;
    color: rgb(255, 255, 255);
    display: none;
    margin-left: -45%;
    left: 49%;
    opacity: 0;
}

#dialogueContent {
    position: relative;
    overflow: hidden;
    scrollbar-color: blue transparent;
    scrollbar-width: thick;
    font-size: 2vw;
    /* display: none; */
    opacity: 0;
}

#buttonsContainer {
   width: 100%;
   position: relative;
   text-align: center;
   z-index: 2;
   display: flex;
   align-items: center;
   margin-top: 2%;
}

.optionButtons {
    height: 100%;
    width: 20%;
    margin: 0 1%;
    margin: 0 1%;
    border-radius: 1vw;
    font-family: 'Nerko One';
    color: palegoldenrod;
    font-size: 1.3vw;
    padding: 1%;
    background-color: rgb(21, 168, 124);
    border: 2px solid palegoldenrod;
    text-align: start;
    cursor: pointer;
    
    /* Transition on hover leave */
    -webkit-filter: none;
    filter: none;
    transition: .50s ease-in-out;
}

.optionButtons:hover,
.settingsButton:hover {
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,Color='#444')";
    filter: url(#drop-shadow);
    -webkit-filter: drop-shadow(0 0 4px rgba(251, 255, 24, 0.747));
    filter: drop-shadow(0 0 4px rgba(251, 255, 24, 0.747));
    transition: .2s ease-in-out;
}

.settingsButton {
    position: absolute;
    z-index: 2;
    top: 2%;
    right: 1%;
    border-radius: 1vw;
    font-family: 'Nerko One';
    color: palegoldenrod;
    font-size: 1.3vw;
    padding: 1%;
    background-color: rgb(21, 168, 124);
    border: 2px solid palegoldenrod;
    text-align: start;
    cursor: pointer;

    /* Transition on hover leave */
    -webkit-filter: none;
    filter: none;
    transition: .50s ease-in-out;
}

.settingsContainer {
    width: 100%;
    height: 100%;
    position: relative;
    top: 25%;
    left: 25%;
    display: none;
}

.settingsMenu {
    width: 50%;
    height: 50%;
    background-color: rgba(230, 55, 55, 1);
    border-radius: 25px;
    border: 5px solid palegoldenrod;
    color: white;
    text-align: center;
    font-size: 3vw;
}

.slider {
    width: 75%;
    height: 25px;
    background: white;
    outline: none;
    border-radius: 5px;
}

.slider::-webkit-slider-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}


html, body {
    font-family: 'Nerko One', cursive;
    overflow: hidden;
    background-color: black;
}

#menuTitle {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -100px;
    font-size: 2em;
}