@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap");
body {
  z-index: 0;
  position: relative;
  margin: 0;
  font-family: "Atkinson Hyperlegible" !important;
}

.outercontainer {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
}
.outercontainer #controls {
  display: none;
}

.bkg-video {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  text-align: center;
}
.bkg-video video {
  width: auto;
  height: 100%;
  aspect-ratio: 16/9;
}

p {
  width: fit-content;
}

#story.container {
  background: transparent;
}
#story.container .header {
  display: none;
}

#bottomButtons,
#control,
#mySettings {
  z-index: 999999999;
}

#settingsSplit,
#startVideoSplit,
#swapCameraButton,
#swapCameraButton,
#swapCameraButton,
#raiseHandButton,
#lowerHandButton,
#chatButton,
#participantsButton,
#startScreenButton {
  display: none !important;
}

#bottomButtons,
#control {
  display: flex !important;
}

#videoMediaContainer {
  display: none !important;
}

#karaoke-video {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
  object-fit: cover;
  aspect-ratio: auto;
  pointer-events: none;
}

#injected-videos {
  display: grid;
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  place-content: center;
  place-items: center;
  min-height: 100%;
  min-width: 100%;
  max-height: 100%;
  gap: 0.5rem;
  padding: 0.5rem;
  --container-min-column-width: 100%;
  --container-grid-rows: 100%;
}
#injected-videos > div {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
}
@media (orientation: landscape) {
  #injected-videos:has(> div:nth-last-child(1):first-child) {
    grid-template-columns: minmax(0, 100%);
    grid-template-rows: minmax(0, 100%);
  }
  #injected-videos:has(> div:nth-last-child(2):first-child) {
    grid-template-columns: repeat(2, minmax(0, auto));
    grid-template-rows: 1fr;
  }
}
@media (orientation: landscape) and (max-aspect-ratio: 16/9) {
  #injected-videos:has(> div:nth-last-child(2):first-child) {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, auto));
  }
}
@media (orientation: landscape) {
  #injected-videos:has(> div:nth-last-child(3):first-child) {
    grid-template-columns: repeat(3, minmax(0, auto));
    grid-template-rows: 1fr;
  }
}
@media (orientation: landscape) and (max-aspect-ratio: 8/3) {
  #injected-videos:has(> div:nth-last-child(3):first-child) {
    grid-template-columns: repeat(2, minmax(0, auto));
    grid-template-rows: repeat(2, minmax(0, auto));
  }
}
@media (orientation: landscape) {
  #injected-videos:has(> div:nth-last-child(4):first-child) {
    grid-template-columns: repeat(4, minmax(0, auto));
    grid-template-rows: 1fr;
  }
}
@media (orientation: landscape) and (max-aspect-ratio: 32/9) {
  #injected-videos:has(> div:nth-last-child(4):first-child) {
    grid-template-columns: repeat(2, minmax(0, auto));
    grid-template-rows: repeat(2, minmax(0, auto));
  }
}
@media (orientation: landscape) {
  #injected-videos:has(> div:nth-last-child(5):first-child) {
    grid-template-columns: repeat(5, minmax(0, auto));
    grid-template-rows: 1fr;
  }
}
@media (orientation: landscape) and (max-aspect-ratio: 40/9) {
  #injected-videos:has(> div:nth-last-child(5):first-child) {
    grid-template-columns: repeat(3, minmax(0, auto));
    grid-template-rows: repeat(2, minmax(0, auto));
  }
}
@media (orientation: landscape) and (max-aspect-ratio: 16/9) {
  #injected-videos:has(> div:nth-last-child(5):first-child) {
    grid-template-columns: repeat(2, minmax(0, auto));
    grid-template-rows: repeat(3, minmax(0, auto));
  }
}
@media (orientation: portrait) {
  #injected-videos {
    grid-template-columns: repeat(1, minmax(0, auto));
    grid-template-rows: minmax(0, auto);
  }
  #injected-videos > div.injected {
    height: 100%;
    width: auto;
    max-width: none;
    max-height: 100%;
    aspect-ratio: auto;
    width: auto;
    height: 100%;
  }
  #injected-videos video {
    object-fit: cover;
    max-height: 100%;
    height: 100%;
    max-width: none;
    width: auto;
  }
  #injected-videos:has(> div:nth-last-child(1):first-child) {
    grid-template-rows: 1fr;
  }
  #injected-videos:has(> div:nth-last-child(2):first-child) {
    grid-template-rows: repeat(2, minmax(0, 50%));
  }
  #injected-videos:has(> div:nth-last-child(3):first-child) {
    grid-template-rows: repeat(3, minmax(0, 33%));
  }
}
#injected-videos .injected {
  pointer-events: none;
  justify-content: center;
  align-items: center;
  line-height: 0;
}
@media (orientation: portrait) {
  #injected-videos .injected {
    width: 100%;
    height: auto;
  }
}
#injected-videos .injected gif, #injected-videos .injected video {
  position: relative;
  width: max-content;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#stroboscope {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: transparent;
  display: grid;
  place-content: center;
}
#stroboscope #strobo-circle {
  width: min(100vw, 100vh);
  height: min(100vw, 100vh);
  border-radius: 50%;
  opacity: 0;
  --spread: 10%;
  --min-size: 10%;
  --strobo-color: white;
  background: radial-gradient(circle, var(--strobo-color) 0%, rgba(255, 255, 255, 0.5) calc(var(--spread) + var(--min-size)), transparent 60%);
  /* Modern browsers */
  transition: --spread 0.05s ease;
}
@supports (background: color-mix(in srgb, white 50%, transparent)) {
  #stroboscope #strobo-circle {
    background: radial-gradient(circle, var(--strobo-color) 0%, color-mix(in srgb, var(--strobo-color) 50%, transparent) calc(var(--spread) + var(--min-size)), transparent 60%);
  }
}

@property --spread {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 10%;
}
@property --min-size {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 20%;
}
@property --strobo-color {
  syntax: "<color>";
  inherits: false;
  initial-value: red;
}
#session-video {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
}

body.environment #subtitles {
  padding-left: 10vw;
  padding-right: 10vw;
}

#subtitles {
  position: fixed;
  z-index: 99999999;
  bottom: 4rem;
  left: 0;
  width: 100%;
  text-align: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-family: "Atkinson Hyperlegible";
  font-size: min(8vw, 8vh);
  color: yellow;
  -webkit-text-stroke: 0.05em navy;
  text-stroke: 0.05em navy;
  font-weight: bold;
}
#subtitles b {
  font-weight: bold;
}

::cue {
  color: red;
}

.injected-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  z-index: 999;
  background: none;
  pointer-events: none;
}
.injected-overlay.hidden {
  display: none;
}
.injected-overlay .timer {
  display: none;
}
.injected-overlay .enter,
.injected-overlay .trigger-warning {
  pointer-events: all;
}
.injected-overlay .enter.hidden,
.injected-overlay .trigger-warning.hidden {
  display: none;
}
.injected-overlay a:hover {
  color: inherit;
}
.injected-overlay a:visited {
  color: inherit;
}
.injected-overlay video {
  min-height: 100vh;
  object-fit: cover;
  width: auto;
}
.injected-overlay img {
  margin: 0;
  object-fit: cover;
  min-width: 100%;
  width: auto;
  min-height: 100%;
  height: auto;
}
.injected-overlay .call-to-action {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background: none;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  /* box-shadow: 0px 0px 2rem 10vh blue inset,0px 0px 2rem 15vh yellow inset; */
  box-shadow: 0px 0px 2rem min(10vh, 10vw) black inset, 0px 0px 2rem min(15vh, 15vw) yellow inset;
  margin: 0;
}
.injected-overlay .call-to-action h1,
.injected-overlay .call-to-action h2 {
  width: fit-content;
  font-family: "Atkinson Hyperlegible", sans-serif;
  color: red;
  text-decoration-color: blue;
  text-decoration-thickness: 0.3em;
  text-shadow: 0.1em 0.1em yellow;
  font-size: min(20vh, 20vw);
  text-align: center;
  max-width: 80%;
}
.injected-overlay .call-to-action h2 {
  font-size: min(6vh, 6vw);
}

.splash-screen {
  display: none !important;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999;
  background: #eeefff;
  height: 100vh;
  width: 100vw;
  position: relative;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  /* box-shadow: 0px 0px 2rem 10vh blue inset,0px 0px 2rem 15vh yellow inset; */
  box-shadow: 0px 0px 2rem min(10vh, 10vw) blue inset, 0px 0px 2rem min(15vh, 15vw) yellow inset;
  margin: 0;
}
.splash-screen h1 {
  width: min-content;
  font-family: sans-serif;
}
.splash-screen a {
  color: red;
  text-decoration-color: blue;
  text-decoration-thickness: 0.3em;
  text-shadow: 0.1em 0.1em yellow;
  font-size: min(20vh, 20vw);
}

#btn-where-am-i {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 99999999;
  box-shadow: 0px 0px 2em white;
  border-radius: 50%;
  height: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: bold;
}

#where-am-i {
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  overflow: scroll;
  align-items: center;
  background-color: color-mix(in srgb, white 80%, transparent);
}
#where-am-i.hidden {
  display: none;
}
#where-am-i h1, #where-am-i p {
  padding-left: 2rem;
  padding-right: 2rem;
  font-family: "Atkinson Hyperlegible" !important;
}
#where-am-i h1 {
  text-align: center;
  color: red;
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 3rem;
  margin-bottom: 3rem;
  font-size: 300%;
  width: 100%;
}
#where-am-i p {
  font-weight: bold;
  color: blue;
  font-size: 150%;
  width: 50%;
  text-shadow: 0px 0px 0.3em yellow;
}
@media (max-width: 600px) {
  #where-am-i p {
    width: 100%;
  }
}
#where-am-i p.centered {
  text-align: center;
}
#where-am-i p.first-in-footer {
  margin-top: auto;
}
#where-am-i p:last-of-type {
  margin-bottom: 4rem;
}
#where-am-i a {
  color: red;
  font-weight: bold;
  text-decoration-thickness: 0.2em;
}

/*# sourceMappingURL=custom.css.map */