/* Fonts for title and inner text */
@font-face {
	font-family: 'Kanit';
	src: url('fonts/Kanit-Light.ttf');
}

@font-face {
   font-family: 'Orbitron';
	src: url('fonts/Orbitron-VariableFont_wght.ttf');
}

/* Title styling */
h1 {
   font-family: 'Orbitron';
   color: #f8f8ff;
   font-size: 250% !important;
   padding-top: 15px;
   padding-left: 20px;
}

/* Margin, padding and font for whole body */
body {
   font-family: 'Kanit';
   padding-left: 35px;
   margin-left: auto;
   margin-right: 0 !important;
   margin-bottom: 20px;
}

/* Grid wrapper containing all 4 boxes */
.wrapper {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: .8fr .8fr 1.5fr .6fr;
    grid-template-rows: .7fr 1fr 1fr;
    
}

/* General styling for box */
.box {
    border-radius: 5px;
    padding-left: 20px;
    padding-top: 20px;
    padding-right: 20px;
    font-size: 150%;
}



/* Input box styling */
.a {
    width: 81%;
    text-shadow: 1px 1px black;
    margin-left: 30px;
    margin-top: 25px;
    background-color: #222;
    color: white;
    grid-area: 1 / 1 / 2 / 3;
    
}

/* Slider bar width and shadow */
.a input {
    width: 95%;
    box-shadow: 0.25rem 0.25rem black;
}

/* Model box styling */
.b {
    padding-right: 25px;
    padding-left: 80px;
    
}

.b .layers {
    width: 100%;
    height: auto;
}

.b .layers canvas {
    height: auto;
    width: 100%;
}

/* Tick graph box styling */
.c {
    width: 87%;
    padding-left: 30px;
    padding-top: 5px;
    grid-area: 3 / 1 / 4 / 3;
}

/* Percentage burnt graph box styling */
.d {
    display: inline;
    gap: 0px;
    width: 87%;
    padding-left: 30px;
    padding-top: 5px;
    grid-area: 2 / 1 / 3 / 3;
}

/* Input button styling */
.butto {
    text-align: right;
    padding-top: 15px;
    padding-bottom: 10px;
}

  #rangeValue {
    position: relative;
    display: block;
    text-align: center;
    font-size: 6rem;
    color: #999;
    font-weight: 400;
}
/* Range slider - cross-platform (iOS, Chrome, Firefox, Edge) */
input[type='range'] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    margin: 18px 0;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(to right, #43e5f7 var(--slider-pct, 50%), #4C4E52 var(--slider-pct, 50%));
    outline: none;
    cursor: pointer;
    touch-action: manipulation;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 28px;
    width: 14px;
    border-radius: 3px;
    background: #ffffff;
    border: 1px solid #000;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    cursor: pointer;
}

input[type=range]::-moz-range-thumb {
    height: 28px;
    width: 14px;
    border-radius: 3px;
    background: #ffffff;
    border: 1px solid #000;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    cursor: pointer;
}

input[type="range"]::-moz-range-track {
    background: transparent;
    height: 12px;
}

a.button3 {
    display: inline-block;
    padding: 0.1em 1.0em;
    border-radius: 2em;
    box-sizing: border-box;
    font-family: 'Kanit';
    color: #ffffff;
    background-color: #367ebd;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer !important;
}
a.button3:hover {
    background-color: #134663;
}


/* Login form */
#pageCover {
    position:fixed; 
    z-index:100; 
    width:100vw; 
    height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes blurAnim {
   0% {
      filter: blur(.25px);
   }
   20% {
      filter: blur(.75px);
   }
   40% {
      filter: blur(1.5px);
   }
   60% {
      filter: blur(2px);
   }
   80% {
      filter: blur(3px);
   }
   100% {
      filter: blur(4px);
   }
}
.blur {
   animation: blurAnim 1.5s 1 normal forwards;
}

#loginForm {
   padding-top: 2%;
   padding-bottom: 2%;
   text-align: center;
   overflow: hidden;
   position: absolute;
   width: 40vw;
   min-width: 600px;
   height: auto;
   border: 3px solid grey;
   background-color: #161616;
   z-index: 10000;
   
}

.inputBox {
   margin-right: 17%;
   margin-left: 5px;
   display: flex;
   float: right;
   position: relative;
   top: 1px;
   background-color: #2f3030;
   border: 1px solid grey;
   padding-left: 10px;
   font-family: 'Kanit';
   color: #f8f8ff;
}

.subtitle {
    margin-top: 0;
    padding-top: 1%;
    font-family: 'Kanit';
    color: #f8f8ff;
    font-weight: 600;
    font-size: 185%;
    text-align: center;
}

.prompt {
    padding-left:10%;
    font-family: 'Kanit';
    color: #f8f8ff;
    font-weight: 500;
    font-size: 130%;
    padding-top: 5px;
}


.createBtn {
    margin-top: 5%;
    margin-bottom: 5%;
    width: 60%;
    padding: 0.2em 1.2em;
    border-radius: 3em;
    box-sizing: border-box;
    font-family: 'Kanit';
    color: #ffffff;
    background-color: #367ebd;
    text-align: center !important;
    transition: all 0.2s;
    cursor: pointer !important;
    

}

.shareLink {
    text-decoration: none;
    font-size: 60%;
    display: flex;
    width: 70%;
    max-width: 250;
    max-height: 30;
    margin-left: 15%;
    justify-content: center;
    margin-top: 3%;
    padding: 0.2em 1.2em;
    border-radius: 3em;
    box-sizing: border-box;
    font-family: 'Kanit';
    color: #ffffff;
    background-color: #367ebd;
    text-align: center !important;
    transition: all 0.2s;
    cursor: pointer !important;
    overflow: hidden;
   
}

.shareLink:hover {
    background-color: #134663;
}


.rightSide {
   grid-area: 1 / 3 / 4 / 5;
   /* overflow-y: hidden; */
}

.showExperimentID {
   position: relative;
   padding-bottom: 5px;
   margin-bottom: 0;
   text-align: center;
   padding-top: 5%;
   color: white;
   font-weight: 700;
   font-size: 1.2vw;
}

.green {
    background-color: #1ED30C;
}

@media all and (max-width: 30em) {
    a.button3 {
        display: block;
        margin: 0.2em auto;
    }
}

@media (max-width: 1455px) {
    .shareLink {
       font-size: 50% !important;
    }
    .linkShowing {
       font-size: 50% !important;
    }
}

/* Formatting for mobile devices */
@media (max-width: 480px) {
    html {
        font-size: 100%;
    }
    body {
        padding-left: 5px;
        padding-right: 5px;
    }
    h1 {
        padding-left: 7px !important;
        text-align: center;
    }
    .wrapper {
        display: grid !important;
        grid-gap: 5px;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }
    .a {
        width: auto;
        padding: 15px 10px !important;
        margin: 0 5px !important;
        grid-row: auto !important;
        grid-column: 1 !important;
    }
    .a input {
        width: 95%;
    }
    .b {
        padding: 10px 5px !important;
        margin: 0 !important;
    }
    .rightSide {
        grid-column: 1 !important;
        grid-row: auto !important;
        overflow-y: hidden;
    }
    .c {
        padding: 5px 5px !important;
        margin: 0 5px !important;
        width: auto;
        grid-row: auto !important;
        grid-column: 1 !important;
    }
    .d {
        padding: 5px 5px !important;
        margin: 0 5px !important;
        width: auto;
        grid-row: auto !important;
        grid-column: 1 !important;
    }
    .butto {
        text-align: center;
    }
    #pageCover {
        left: 0 !important;
    }
    #loginForm {
        width: 95vw !important;
        min-width: auto !important;
        padding: 3% !important;
    }
    .testdiv {
        width: 100%;
    }
    .onlineStatus {
        width: 48% !important;
        height: auto !important;
        max-height: 70% !important;
    }
    .onlineText {
        width: 90% !important;
        height: auto !important;
        max-height: 28% !important;
        margin-bottom: 50px !important;
    }
    .inviteBox {
        width: 48% !important;
    }
    .inputBox {
        width: 90%;
        font-size: 16px;
        padding: 10px;
        margin: auto;
        display: block;
        float: none;
    }
    .shareLink {
        margin: 2% auto !important;
        font-size: 4vw !important;
    }
    .ghostSlider {
        top: 55px !important;
    }
    .imgContainer {
        width: 90vw !important;
        height: auto !important;
        left: 5vw;
    }
    .linkShowing {
        width: 95% !important;
    }
    #createOTL {
        margin: 10px auto !important;
    }
    .showExperimentID {
        font-size: 150%;
        text-align: center;
        margin-right: 0 !important;
    }
    .loginBody {
        background: #1e1e1f !important;
    }
    .buttonHolder {
        width: 90% !important;
        margin: 10% auto !important;
        flex-direction: column;
        gap: 15px;
    }
    .loginBtn {
        width: 100% !important;
        max-height: 200px !important;
        height: 70px !important;
    }
    .loginHolder {
        max-width: 90vw !important;
        width: 85vw !important;
        min-height: auto !important;
        margin: 0 auto !important;
        padding: 15px !important;
    }
    .hostBox {
        width: 100% !important;
        margin: 10px 0 !important;
    }
}


@media (min-width: 480px) {
    html {
        font-size: 100%;
    }
}

@media (min-width: 992px) {
    html {
        font-size: 80%;
    }
}
.testdiv {
    width: 542px;
    height: 55%;
    
}
.onlineStatus {
    float: left;
    overflow-y: auto;
    min-height: 40%;
    color: #ffffff;
    background-color: #222;
    height: auto;
    max-height: 40%;
    width: 48%;
    border: 2px solid #373738;
    margin-top: 3%;
    text-align: center;
    padding-top: 1%;
    margin-right: 0 !important;
}

.onlineText {
    background-image: linear-gradient(to right bottom, #2a2a2b, #3e3e40);
    color: #ffffff;
    height: auto;
    max-height: 40%;
    text-align: left;
    padding-left: 3%;
}

.inviteBox {
    float: right;
    overflow-y: auto;
    min-height: 40%;
    color: #ffffff;
    background-color: #222;
    height: auto;
    max-height: 40%;
    width: 50%;
    border: 2px solid #373738;
    margin-top: 3%;
    text-align: center;
    padding-top: 1%;
    margin-right: 0 !important;
}

li {
    color: green;
}
li span {
    color: #ffffff;
}

.sliderBox {
    position: relative;
}

.ghostSlider {
    position: absolute;
    white-space: nowrap;
    left: 99%;
    top: 30px;
    font-size: 75%;
    color: #11EEEF;
    text-shadow: 3px 3px 3px black;
    visibility: hidden;
}


.fadeInOut {
  /* Start out with the element hidden */
  opacity: 0;

  /* Use a transition to make the element fade in and out smoothly */
  transition: opacity 2s;

  /* Use keyframes to hold the element visible for 5 seconds */
  animation: hold 5s;
}

.fadeOut {
   animation: fadeOut .5s normal forwards;
}

@keyframes fadeOut {
   0% {
      opacity: 1;
   }
   100% {
      opacity: 0;
   }
}
@keyframes hold {
  50% {
    opacity: 1;
  }
}

.imgContainer {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   border: 15px solid white;
   background-color: white;
   z-index: 10000;
}

.linkShowing {
   width: 90%;
   height: auto;
   margin-left: 5%;
   padding-left: 0;
   margin-top: 1%;
   background-color: #121211;
   padding-right: 0;
   margin-right: 0;
   border: 1px solid white;
   font-size: 65%;
}

#showRoomID {
   position: relative;
   color: white;
   font-size: 60%;
   padding-bottom: 0;
   margin-bottom: 0;
}

#onlineList {
   margin-top: 1%;
}

.subtitle2 {
   color: white;
   font-size: 120%;
   padding-bottom: 3%;
   text-align: center;
}

.inputHolder {
   width: 65%;
   min-width: 383;
   display: inline-block;
   text-align: center;
}

.invalidLink {
   background: linear-gradient(to right bottom, #2a2a2b, #3e3e40);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 400%;
   color: white;
   font-weight: 500;
}

#createOTL {
   position: relative;
   top: 2%;
   margin-left: 25%;
   overflow-y: show;
}


.loaderBody {
    background: linear-gradient(to right bottom, #2a2a2b, #3e3e40);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader {
  border: 16px solid #676b6b; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 75px;
  height: 75px;
  animation: spin 1.5s linear infinite;
  margin-left: 43%;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loginBody {
   background: linear-gradient(to bottom right, #29292b 0%, #1e1e1f 100%);
   background-size: contain;
}
@-moz-document url-prefix() {
   .loginBody {
        background: linear-gradient(to right, #29292b 0%, #1e1e1f 100%);
  }
  .body {
       -moz-background-size: cover !important;
  }
}

.loginTitle {
   padding-left: 0 !important;
   opacity: 0;
   text-align: center;
   text-shadow: 5px 5px 5px black;
   font-size: 600% !important;
}

.buttonHolder {
   display: flex;
   width: 70%;
   height: 30%;
   /*border: 2px solid red;*/
   margin: 0 auto;
   margin-top: 10%;
   align-items: center;
   justify-content: space-around;
}

.loginBtn {
   opacity: 0;
   background-color: #dbd6d5;
   font-family: 'Kanit';
   font-weight: 500;
   border-radius: 25px;
   font-size: 125%;
   height: 30%;
   width: 25%;
   min-width: 250px;
   box-shadow: 0 4px 8px 0 #e87c1e, 0 3px 9px 0 #f24f18;
   transition: all 0.4s;
}

.loginBtn:hover {
   background-color: #3d3d40;
   color: white;
   box-shadow: 0 6px 8px 0 red, 0 4px 9px 0 #f73707;
   cursor: pointer;
}

.loginBtn:active {
   background-color: #2f2f30;
   font-size: 140%;
   transition: 0.1s !important;
   box-shadow: 0 4px 6px 0 red, 0 2px 6px 0 #f73707;
}

.fadeInSlow {
   animation: fadeIn 4.5s 1 normal .6s forwards;
}

.fadeInFast{
   animation: fadeIn 2.2s 1 normal forwards;
}

@keyframes fadeIn {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

.loginHolder {
   opacity: 0;
   display: inherit;
   background: linear-gradient(to bottom right, #29292b, #1e1e1f);
   box-shadow: 8px 11px #171616;
   padding: 20px 30px 20px 30px;
   font-size: 150%;
   margin: 0 auto;
   max-width: 25%;
   min-height: 60% !important;
   border: 2px solid #141414;
   border-radius: 25px;
   text-align: center;
   color: white;
   justify-content: center;
}

.loginInput {
   background: transparent;
   padding: 3px 3px 3px 3px;
   color: #d9d3d2;
   border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom-style: groove;
    width: 50%;
    margin: 0 auto;
    margin-top: 15%;
}

.loginInput:active {
   outline: none;
}

.loginInput::placeholder {
   color: #c9c9c9;
}

.hostCont {
   margin-top: 15%;
   font-size: 100%;
   height: 7%;
   width: 45% !important;
   min-width: 130px;
}
.hostCont:active {
   font-size: 90%;
}

.backBtn {
   display: inherit;
   position: relative;
   margin-top: 20%;
   margin-bottom: 3px !important;
   background: transparent;
   border: none;
   color: white;
   font-size: 80%;
}

.backBtn:hover {
   cursor: pointer;
   font-size: 90%;
}

.hostBox {
   margin: 0 auto;
   display: grid;
   grid-template-columns: auto / span 2;
    width: 172%;
    text-shadow: 1px 1px black;
    margin-left: 30px;
    margin-top: 25px;
    background-color: #222;
    color: white;
    border: 1px solid #373738;
    border-radius: 3px;
    text-align: center;
    justify-content: center;
}

.expClosed {
    position:fixed; 
    z-index:-5; 
    width:100vw; 
    height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.closedMsg {
   opacity: 1;
   visibility: visible;
    display: flex;
   color: white;
   font-size: 300%;
   z-index: 10000000;
   background-color: #222;
   width: 50%;
   height: 50%;
   border: 4px solid black;
   border-radius: 15px;
   justify-content: center;
   align-items: center;
}

.hostBtn {
    text-decoration: none;
    font-size: 60%;
    display: block;
    width: 100%;
    max-width: 400;
    max-height: 40;
    justify-content: center;
    margin-top: 3%;
    margin-bottom: 5%;
    padding: 0.2em 1.2em;
    border-radius: 3em;
    box-sizing: border-box;
    font-family: 'Kanit';
    color: #ffffff;
    background-color: #367ebd;
    font-size: 100%;
    text-align: center !important;
    transition: all 0.2s;
    cursor: pointer !important;
    overflow: hidden;
}
.hostBtn:hover {
   background-color: #134663;
}