html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background: #444;
  overflow: hidden;
}

@font-face {
  font-family: "Atkinson-Hyperlegible";
  src: url("Aktinson/atkinson-hyperlegible-regular-101-webfont.woff")
}

.hidden {
  display: none !important;
}

#gameContainer {
  width: 100vw;
  height: 100vh;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* try to handle mobile dialog */

canvas+* {
  z-index: 2;
}

h1 {
  font-family: "Atkinson-Hyperlegible";
  /* font-weight: bolder; */
  color: black;
  /* stroke-width: 1rem; */
  margin: 0;
  font-weight: 100;
  font-size: 15vh;
}

h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bolder;
  font-size: 4.3vh;
  margin-top: 50px;
  margin-bottom: 10px;
}

h5 {
  font-family: "Atkinson-Hyperlegible";
  margin: 0;
  font-size: 3vh;
  font-weight: 100;
}

a {
  text-decoration: none;
}

nav {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

.dark {
  color: black;
}

.light {
  color: white;
}

.tranparent-dark {
  background-color: rgba(0, 0, 0, 0.2);
}

.logo {
  position: absolute;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50vw;
  max-height: 100vh;
  z-index: 5;
}

.logo-img {
  background: url(../Images/PrismLogo-blacknofill.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 60vw;
  height: 60vh;
  background-position: center;
}

.logo-img-white {
  background: url(../Images/PrismLogo-whitenofill.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 60vw;
  height: 60vh;
  background-position: center;
}

#prism-logo {
  width: 5vh;
  height: 5vh;
  background: url(../Images/favicon/PrismLogo-pinknofill-thick.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border: 0;
  outline: none;
  margin-left: 25px;
}

.webgl {
  width: 100vw;
  height: 100vh;
}

.progress {
  /* margin: 3em; */
  /* border: 1px solid #323b40; */
  width: 100vw;
  height: 100vh;
  display: none;
  /* background-color: #323b40; */
  background-color: black;
}

.progress .full {
  /* margin: 2px; */
  background: #ee266e;
  height: 100vh;
  transform-origin: top left;
}

#layoutsFiles {
  position: absolute;
  top: 1%;
  left: 50%;
}

#contextFiles {
  position: absolute;
  top: 1%;
  left: 50%;
}

#loader {
  /* background: #1b2121; */
  background-color: black;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.spinner, .spinner:after {
  border-radius: 50%;
  width: 5em;
  height: 5em;
}

.spinner {
  margin: 10px;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  transform: translateZ(0);
  animation: spinner-spin 1.1s infinite linear;
}

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

.overlay {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
}

.container {
  flex-direction: column;
}

.logo-overlay {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  
  z-index: 2; 
}

.panel {
  background-color: #1A2020;
  display: flex;
  color: white;
  font-family: "Atkinson-Hyperlegible";
  font-size: 0.9rem;
}

.form {
  display: grid;
  padding: 3rem;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  height: 10vh;
  min-height: 35px;
}

.systems-diagram-container {
  width: 100vw;
  height: 100vh;  
  background-color: black;
}
.systems-diagram{
  background-image: url(../Images/SystemsEvaluation_review.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.input-url {
  font-family: "Atkinson-Hyperlegible";
  background-color: #313B3D;
  border: none;
  margin: 10px 0px;
  height: 25px;
  outline: none;
  padding: 5px;
  color: white;
}

.input-url:hover {
  background-color: #EE266E;
  border: none;
}

.submit-btn {
  border: none;
  color: white;
  background-color: #313B3D;
  font-family: "Atkinson-Hyperlegible";
  height: 25px;
  outline: none;
}

.submit-btn:hover {
  background-color: #EE266E;
}

.x-btn {
  width: 20px;
  height: 20px;
  border: none;
  color: white;
  background-color: rgba(255, 255, 255, 0);
  outline: none;
}

.footer-button {
  color: white;
  font-family: "Atkinson-Hyperlegible";
  font-size: 2.5vh;
  font-weight: 100;
  background-color: black;
  border: none;
  /* padding: 20px; */
  margin: 0;
  width: inherit;
}

.footer-button:hover {
  background-color: #EE266E;
}

.BWlogo {
  width: 23vw;
  height: 8vh;
  background: url(../Images/companyLogos/BrydenWood_Full_Logo_white.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.castlogo {
  width: 23vw;
  height: 8vh;
  background: url(../Images/companyLogos/Cast_Full_Logo_white.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.online {
  position: absolute;
  bottom: 1.5vh;
  right: 7vw;
  width: 2.5vw;
  height: 2.5vh;
  background: url(../Images/signal_wifi_off-white-48dp.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#index-video {
  /* height: 100%; */
  /* width: 100%;
  object-fit: cover;
  z-index: -100; */
 
}