@font-face {
  font-family: Kola-Regular;
  src: url("Kola-Regular.77b2aced.woff2") format("woff2"), url("Kola-Regular.b554101f.woff") format("woff"), url("Kola-Regular.d8470bed.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: entete;
  src: url("Baloo2-VariableFont_wght.08f4a7d4.ttf");
}

:root {
  --jaune: #f8eb5d;
  --vert: #d7da19;
  --violet: #3d2f5a;
  --cubeSize: 60;
  --scenePerspective: 5000;
  --cubeRotateY: 0;
  --cubeRotateX: 0;
  --toScroll: 1500;
}

@media (prefers-reduced-motion) {
  :root {
    --scale: 0;
  }
}

html {
  scroll-behavior: smooth;
  font-family: Kola-Regular;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.front, .bottom {
  background-color: var(--jaune);
  flex-direction: column;
  padding-left: 50px;
  display: flex;
}

.front h1 {
  font-size: 5rem;
}

.bottom h1 {
  font-size: 2.5rem;
}

.bottom p {
  font-size: 1.5rem;
}

.bottom h1, .bottom p {
  font-family: entete;
}

.left {
  background-color: var(--vert);
}

.myHeader {
  width: 100%;
  min-width: 300px;
  min-height: 300px;
  position: sticky;
  top: 5vh;
}

.logos {
  width: 100%;
  flex-direction: row;
  flex: 1 1 0;
  justify-content: space-around;
  display: flex;
}

.logos img {
  object-fit: contain;
  width: 15%;
  height: 200px;
}

.content {
  width: 90vw;
  height: 90vh;
  margin: 0 5vw;
  margin-top: calc(var(--toScroll) * 2px);
  padding: 0;
  display: flex;
  position: relative;
}

.modal {
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: var(--vert);
  position: absolute;
  top: 0;
  left: -5000px;
  overflow: hidden;
}

#myCanvas {
  width: 100%;
  margin-bottom: 10vh;
}

.footer {
  background-color: var(--jaune);
  width: 100%;
  height: 500px;
  margin-top: 5rem;
  position: relative;
}

.modal-content {
  height: 100%;
  padding: 25px;
  display: flex;
}

.modal-content-left {
  height: 100%;
  margin-top: -4rem;
}

.modal-content-right {
  padding: 1rem 1rem 1rem 1.5rem;
}

.modal-content-right p {
  font-family: entete;
}

.modalCloseBtn {
  text-align: right;
  padding: .5rem 1rem;
  font-size: 3rem;
}

.w-100 {
  width: 100%;
}

.w-50 {
  width: 50%;
}

#cube-wrapper {
  width: calc(var(--cubeSize) * 1vw);
  height: calc(var(--cubeSize) * 1vw);
  margin-top: auto;
  margin-left: calc((100vw - (var(--cubeSize) * 1vw)) / 2);
  perspective: calc(var(--scenePerspective) * 1px);
  perspective-origin: 50%;
  justify-content: center;
  align-items: center;
  margin-right: auto;
  display: flex;
  position: absolute;
}

.cube {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--cubeSize) / 2 * -1vw)) rotateY(calc(var(--cubeRotateY) * 1deg)) rotateX(calc(var(--cubeRotateX) * 1deg));
  position: relative;
}

.cube-face, .cube div[class^="face-"], .cube div[class*=" face-"] {
  width: 100%;
  height: 100%;
  backface-visibility: inherit;
  border: 1px solid #000;
  position: absolute;
}

.cube .face-1 {
  transform: rotateY(0deg) translateZ(calc(var(--cubeSize) / 2 * 1vw));
}

.cube .face-2 {
  transform: rotateY(180deg) translateZ(calc(var(--cubeSize) / 2 * 1vw));
  background-color: pink;
}

.cube .face-3 {
  transform: rotateY(90deg) translateZ(calc(var(--cubeSize) / 2 * 1vw));
  background-color: pink;
}

.cube .face-4 {
  transform: rotateY(-90deg) translateZ(calc(var(--cubeSize) / 2 * 1vw));
}

.cube .face-5 {
  transform: rotateX(90deg) translateZ(calc(var(--cubeSize) / 2 * 1vw));
  background-color: #8a2be2;
}

.cube .face-6 {
  transform: rotateX(-90deg) translateZ(calc(var(--cubeSize) / 2 * 1vw));
}

/*# sourceMappingURL=index.2cdaf7bc.css.map */