@charset "UTF-8";
:root {
  --font-w-thin: 100;
  --font-w-light: 300;
  --font-w-regular: 400;
  --font-w-bold: 800;
  --fs-200: 1.05vh;
  --fs-300: 1.25vh;
  --fs-400: 1.5vh;
  --fs-500: 2vh;
  --fs-600: 3vh;
  --fs-700: 4vh;
  --fs-800: 5vh;
  --fs-900: 6.5vh;
  scroll-behavior: smooth;
  --app-height: 100%;
  --blue-gradient: linear-gradient(
      rgb(0, 88, 238) 0%,
      rgb(53, 147, 255) 4%,
      rgb(40, 142, 255) 6%,
      rgb(18, 125, 255) 8%,
      rgb(3, 111, 252) 10%,
      rgb(2, 98, 238) 14%,
      rgb(0, 87, 229) 20%,
      rgb(0, 84, 227) 24%,
      rgb(0, 85, 235) 56%,
      rgb(0, 91, 245) 66%,
      rgb(2, 106, 254) 76%,
      rgb(0, 98, 239) 86%,
      rgb(0, 82, 214) 92%,
      rgb(0, 64, 171) 94%,
      rgb(0, 48, 146) 100%
  );
  --light-gradient: linear-gradient(
      0deg,
      rgb(54, 95, 190) 0%,
      rgb(69, 120, 223) 3%,
      rgb(58, 116, 233) 5%,
      rgb(65, 123, 248) 42%,
      rgb(92, 145, 249) 94%,
      rgb(96, 156, 245) 97%,
      rgb(119, 171, 248) 100%
  );
  --bottomright-gradient: linear-gradient(
          rgb(12, 89, 185) 1%,
          rgb(19, 158, 233) 6%,
          rgb(24, 181, 242) 10%,
          rgb(19, 155, 235) 14%,
          rgb(18, 144, 232) 19%,
          rgb(13, 141, 234) 63%,
          rgb(13, 159, 241) 81%,
          rgb(15, 158, 237) 88%,
          rgb(17, 155, 233) 91%,
          rgb(19, 146, 226) 94%,
          rgb(19, 126, 215) 97%,
          rgb(9, 91, 201) 100%
      );
  --windows-blue: #2378bd;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  width: 100vw;
  height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-family: "Times New Roman", Times, serif;
  overflow-x: hidden;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

[hidden] {
  display: none;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100vw;
  display: block;
  image-rendering: pixelated;
  user-select: none;
  -webkit-user-drag: none;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

html,
body {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100vw;
  -webkit-font-smoothing: never;
  font-smooth: never;
  text-rendering: geometricPrecision;
  -webkit-print-color-adjust: exact;
}

body {
  background-color: black;
}
body:before {
  content: "";
  position: fixed;
  width: 100vw;
  height: 100vh;
  inset: 0;
  opacity: 0;
  background-color: #000;
  transition: opacity 2800ms;
  z-index: 10000;
  pointer-events: none;
}
body.flash:before {
  content: "";
  opacity: 1;
}

*::selection {
  background: rgba(195, 0, 255, 0.2431372549);
}

a {
  color: #fff;
  font-weight: 400;
}
a:visited {
  color: #fff;
  font-weight: 400;
}

use {
  pointer-events: none;
}

ul {
  padding-inline-start: 0;
  margin-block-end: 0;
  margin-block-start: 0;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar:horizontal {
  height: 12px;
}

::-webkit-scrollbar-track {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}

::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
  display: block;
}

::-webkit-scrollbar-button:vertical:start {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v12h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:vertical:end {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v12h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:horizontal:start {
  width: 12px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v12h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:horizontal:end {
  width: 12px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v12h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E");
}

input[type=range] {
  appearance: none;
  width: 80px; /* Largeur ajustée pour correspondre à la rotation */
  height: 8px; /* Épaisseur de la piste */
  background: linear-gradient(to right, #ffcc00, #ff6600); /* Adapté pour la rotation */
  border-radius: 5px;
  outline: none;
  transition: opacity 0.2s;
  padding: 0;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background: linear-gradient(to right, #0dff00, #ff6600);
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: 8px;
  height: 20px;
  border: 2px outset #00aeff;
  background-color: #00b7ff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  margin-top: -6px; /* Ajustement pour l'alignement */
}

input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #000;
  border: 2px solid #ffcc00;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 8px;
  background: linear-gradient(to right, #ffcc00, #ff6600);
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

*::before, *::after {
  image-rendering: pixelated;
}

.theme__miamo {
  --clr-name-miamo: ;
  --clr-miamo-white: #fffdfa;
  --clr-miamo-black: #17181e;
}

.transition__open {
  opacity: 1;
  transform: rotateY(180deg);
}

.hide {
  opacity: 0;
  pointer-events: none;
}

.disabled {
  display: none !important;
}

.page {
  min-height: 100%;
  position: relative;
  height: 100%;
  width: 100%;
  font-size: 1.25rem;
  line-height: auto;
  transition: opacity 500ms;
  isolation: isolate;
}

#templates {
  display: none;
}

.canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  image-rendering: pixelated;
  z-index: 1000000000000;
}

canvas {
  image-rendering: pixelated;
}

.threedeecanvas {
  position: absolute;
  inset: 0;
  z-index: 10000000;
}

.cursor {
  position: fixed;
  pointer-events: none;
  z-index: 100000000000000000000;
}
.cursor * {
  position: absolute;
  left: 0;
  top: 0;
  image-rendering: crisp-edges;
}
.cursor__hammer {
  width: 5rem;
}

.information {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  color: var(--clr-miamo-white);
  display: none;
  text-align: center;
  z-index: 5000;
}

.narrator {
  position: absolute;
  width: 4vw;
  z-index: 11000;
  transition: opacity 500ms, transform 500ms, left 6500ms, top 6500ms;
  color: var(--clr-miamo-white);
  font-size: var(--fs-300);
  z-index: 10000000000;
}
.narrator[hidden] {
  display: block;
  opacity: 0;
  transform: scale(0);
}
.narrator__ernest {
  width: 100%;
  min-width: 5rem;
}
.narrator__subtitles {
  position: absolute;
  bottom: 95%;
  right: -22vw;
  width: 70ch;
  min-height: 12ch;
  height: fit-content;
  transition: opacity 500ms;
  text-align: left;
  padding: 0.5rem 0.75rem;
  padding-bottom: 2.5rem;
  background-image: url("../assets/sprites/ernestbubble.png");
  background-size: 100% 100%;
  image-rendering: pixelated;
  color: #000;
  -webkit-text-stroke: 0;
  text-shadow: none;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  font-size: 13px;
}
.narrator__quiz {
  position: absolute;
}

@media (orientation: portrait) {
  .information {
    display: flex;
  }
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  paint-order: stroke;
  overflow: hidden;
}

.main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.main__content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.main__bandicam {
  position: fixed;
  top: 0.5rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  z-index: 5000000000000;
}
.main__important {
  position: absolute;
  inset: 0;
  margin: auto;
  text-align: center;
  align-content: center;
  color: #000;
  z-index: 100;
  pointer-events: none;
  font-size: 4rem;
  font-weight: 700;
  text-transform: uppercase;
}
.main__cam {
  position: fixed;
  right: 24px;
  bottom: 6.5vw;
  width: 24vw;
  height: 28vh;
  transition: right 5.5s, bottom 5.5s, width 5.5s, height 5.5s, opacity 0.5s;
}
.main__cam-minecraft {
  bottom: 24vw;
}
.main__cam-grosse {
  bottom: 25%;
  right: 19%;
  width: 61vw;
  height: 80vh;
}
.main__cam::after {
  content: "";
  background-image: url("/assets/sprites/Layout.png");
  width: 100%;
  height: 100%;
  z-index: 10;
  background-size: 100% 100%;
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  transform: scale(1.1);
}
.main__cam video, .main__cam canvas {
  width: 103%;
  height: 88%;
  object-fit: fill;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  position: relative;
  bottom: -13.2%;
  left: -1.5%;
  z-index: 11;
}
.main__cam-smileys {
  position: absolute;
  top: -2.25rem;
  left: -0.5rem;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: row;
  z-index: 15;
  gap: 2px;
}
.main__cam-smiley {
  width: 1.5rem;
}
.main__cam-burger {
  position: absolute;
  bottom: -0.5rem;
  right: -0.5rem;
  width: 3rem;
  z-index: 11;
}

.console {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1%;
  background-color: #121212;
  color: #cdcdcd;
}
.console__title {
  font-size: 9vw;
  font-weight: 700;
}
.console__button {
  background-color: #232323;
  border: solid 1px #323232;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-size: 7vw;
  transition: transform 0.2s ease-in-out;
}
.console__button:hover {
  transform: scale(0.95);
}
.console__button:active {
  transform: scale(0.85);
}

.portal {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1%;
  background-color: #121212;
  color: #cdcdcd;
}
.portal__title {
  font-size: 7vw;
  font-weight: 700;
}
.portal__button {
  background-color: #232323;
  border: solid 1px #323232;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-size: 8.5vw;
  transition: transform 0.2s ease-in-out;
}
.portal__button:hover {
  transform: scale(0.95);
}
.portal__button:active {
  transform: scale(0.85);
}
.portal__loading {
  position: absolute;
  inset: 0;
  background-color: #121212;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  align-content: center;
  font-size: 5vw;
}
.portal__loading::after {
  content: "";
  display: inline-block;
  width: 1.5em;
  text-align: left;
  animation: portal-dots 1s steps(3, end) infinite;
}
@keyframes portal-dots {
  0% {
    content: "";
  }
  33% {
    content: ".";
  }
  66% {
    content: "..";
  }
  100% {
    content: "...";
  }
}

.keycode {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1%;
  background-color: #121212;
  color: #cdcdcd;
}
.keycode__button {
  background-color: #232323;
  border: solid 1px #323232;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-size: 8.5vw;
  transition: transform 0.2s ease-in-out;
}
.keycode__button:hover {
  transform: scale(0.95);
}
.keycode__button:active {
  transform: scale(0.85);
}
.keycode__keypad {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1%;
  width: 70%;
  height: 70%;
}
.keycode__text {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 4%;
  font-size: 9.5vw;
  color: #fff;
  text-align: center;
}
.keycode__button {
  width: 30%;
  height: 30%;
  align-content: center;
  align-items: center;
}

.effects {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1%;
  background-color: #121212;
  color: #cdcdcd;
}

.terminal {
  height: 100vh;
  width: 100vw;
  padding: 2vw;
  font-size: 4.5vw;
  background-color: #010101;
  color: #00FF00;
}
.terminal::after {
  content: "_";
  animation: blink-cursor 1s steps(1) infinite;
  margin-left: 0.2em;
}
@keyframes blink-cursor {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

.purpose {
  height: 100vh;
  width: 100vw;
  padding: 2vw;
  font-size: 1.5vw;
  background-color: #010101;
  color: #ff9d00;
}
.purpose::after {
  content: "_";
  animation: blink-cursor 1s steps(1) infinite;
  margin-left: 0.2em;
}
@keyframes blink-cursor {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

.gps {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1%;
  background-color: #121212;
  color: #cdcdcd;
}
.gps#radar {
  padding: 2%;
  border-radius: 100%;
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
}/*# sourceMappingURL=main.css.map */