:root {
  --transition-time: 0.3s ease;
  --ui-opacity: 0.3;
  --palette-bg: white;
  /* Overridden by js */
  --palette-fg: black;
  /* Overridden by js */
  --palette-pop: red;
  /* Overridden by js */
  --palette-darker: grey;
  /* Overridden by js */
  --palette-lighter: gray;
  /* Overridden by js */
  background-color: var(--palette-darker); }

* {
  margin: 0;
  padding: 0;
  font-family: "marlide-display-variable", sans-serif;
  font-variation-settings: "wght" 400;
  color: #2a2a2a;
  /* Disable text selection */
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
   supported by Chrome, Edge, Opera and Firefox */
  pointer-events: none; }

#loading {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--palette-darker);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center; }

#loading img {
  width: 80%;
  max-width: 40rem;
  margin-bottom: 5rem; }

#three_canvas_container canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1; }

[class^="three_canvas"] {
  cursor: pointer;
  pointer-events: auto; }

#three_canvas-rightEye {
  clip-path: polygon(NaN% 0%, NaN% 100%, 0% 100%);
  z-index: 1; }

#three_canvas-leftEye {
  clip-path: polygon(NaN% 0%, NaN% 100%, 100% 0%);
  z-index: 1; }

/* INTERACT PROMPT */
#prompt {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  font-size: 1.2rem;
  text-align: center; }

#prompt h1, #prompt h4 {
  margin-top: 45%;
  font-weight: 400;
  width: 70%;
  padding: 1rem;
  border: 1px solid var(--palette-darker);
  background-color: var(--palette-lighter);
  color: var(--palette-darker); }

#prompt_text {
  /* border-radius: 1.5rem; */
  /* opacity: 0.7; */ }

#badge_mode {
  position: absolute;
  top: 3rem;
  transition: top var(--transition-time); }

#badge_mode.hidden {
  top: -5rem; }

/* UI */
#credits {
  width: 6rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  position: absolute;
  top: -2.8rem;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 200;
  margin-top: 0.5rem;
  pointer-events: auto; }

#credits svg {
  margin-top: 2.6rem;
  width: 3rem;
  fill: var(--palette-lighter);
  transition: fill var(--transition-time);
  pointer-events: auto; }

.loaded #credits svg {
  fill: var(--palette-darker); }

#fs_button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  cursor: pointer; }

#sona_name {
  position: absolute;
  bottom: 3rem;
  width: 100%;
  max-width: 50rem;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 10; }

#sona_name svg {
  /* filter: drop-shadow(0 0 3rem hsla(0, 0%, 0%, 0.38)); */ }

#sona_name svg path.logo_background {
  fill: var(--palette-lighter); }

#sona_name svg path.logo_foreground {
  fill: var(--palette-bg); }

.interactive {
  opacity: var(--ui-opacity);
  cursor: pointer;
  transition: opacity var(--transition-time); }

.interactive:hover {
  opacity: 1; }

.cursor_grab {
  cursor: move !important; }

.fade_out {
  opacity: 0 !important;
  transition: opacity 0.5s ease; }

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