@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600|Inter:400,700,500,600");
@font-face {
  font-family: "Museo Sans-700";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/MuseoSans-700.otf") format("opentype");
}
@font-face {
  font-family: "Museo Sans-500";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Museo Sans.otf") format("opentype");
}
@font-face {
  font-family: "Museo Sans-Regular";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/MuseoSans_500.otf") format("opentype");
}
@font-face {
  font-family: "Museo Sans-900";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/MuseoSans_900.otf") format("opentype");
}
@font-face {
  font-family: "SF Pro Text-Regular";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/SF-Pro-Text-Regular.otf") format("opentype");
}

:root {
    --alto: #d9d9d9;
    --baby-powder: #fcfcfc;
    --black: #000000;
    --black-2: #0000000f;
    --black-3: #00000061;
    --black-rock: #030229;
    --blue-600: #1c13d1;
    --blue-800: #0e0a68;
    --blue-900: #141b4d;
    --chicago: #595959;
    --chicago-2: #5b5b5b;
    --cultured-pearl: #f5f5f5;
    --gallery: #f0f0f0;
    --governor-bay: #2d3dae;
    --green-100: #dbfda8;
    --grey-100: #f4f5f7;
    --grey-200: #eeeff4;
    --grey-400: #d9dbe1;
    --grey-700: #474a57;
    --grey-800: #18191f;
    --menthe-800: #2cd5c4;
    --purple-300: #b56cf9;
    --shark: #262626;
    --turquoise: #2dd6c4;
    --white: #ffffff;
    --font-size-l: 16px;
    --font-size-m: 14px;
    --font-size-s: 12px;
    --font-size-xl: 18px;
    --font-size-xs: 9.4px;
    --font-size-xxl: 20px;
    --font-size-xxxl: 24px;
    --font-family-inter: "Inter", Helvetica;
    --font-family-museo_sans-500: "Museo Sans-500", Helvetica;
    --font-family-museo_sans-700: "Museo Sans-700", Helvetica;
    --font-family-museo_sans-900: "Museo Sans-900", Helvetica;
    --font-family-museo_sans-regular: "Museo Sans-Regular", Helvetica;
    --font-family-poppins: "Poppins", Helvetica;
    --font-family-sf_pro_text-regular: "SF Pro Text-Regular", Helvetica;
}

.screen textarea:focus,
.screen input:focus {
  outline: none;
}

.screen * {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.screen div {
  -webkit-text-size-adjust: none;
}

.screen a {
  display: contents;
  text-decoration: none;
}

.container-center-horizontal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  pointer-events: none;
  width: 100%;
}

.container-center-horizontal > * {
  flex-shrink: 0;
  pointer-events: auto;
}

.auto-animated div {
  --z-index: -1;
  opacity: 0;
  position: absolute;
}

.auto-animated input {
  --z-index: -1;
  opacity: 0;
  position: absolute;
}

.auto-animated .container-center-vertical,
.auto-animated .container-center-horizontal {
  opacity: 1;
}

.overlay {
  display: none;
  height: 100%;
  opacity: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.overlay.animate-appear {
  animation: reveal 0.3s ease-in-out 1 normal forwards;
  display: block;
  opacity: 0;
}

.overlay.animate-disappear {
  animation: reveal 0.3s ease-in-out 1 reverse forwards;
  display: block;
  opacity: 1;
}

@keyframes reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.valign-text-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.listeners-active,
.listeners-active * {
  pointer-events: auto;
}

.hidden,
.hidden * {
  pointer-events: none;
  visibility: hidden;
}

.listeners-active-click,
.listeners-active-click * {
  cursor: pointer;
}

* {
  box-sizing: border-box;
}

.etoile-1 {
    background-color: transparent;
    left: 110px;
    position: absolute;
    top: 285px;
    animation: 7s ease-in-out reverse kf-etoile-1;
    width: 72px;
    height: 72px;
}

@keyframes kf-etoile-1 {
    0% {
        transform: translate(0px, 0px) rotate(0);
    }

    100% {
        transform: translate(-60px, -150px) rotate(15deg);
    }
}

.ellipse-1 {
    background-color: transparent;
    left: 88px;
    mix-blend-mode: normal;
    position: absolute;
    top: 700px;
    animation: 7s ease-in-out reverse kf-ellipse-1;
}

@keyframes kf-ellipse-1 {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(-20deg);
    }
}

.ellipse-2 {
    background-color: transparent;
    left: 884px;
    mix-blend-mode: normal;
    position: absolute;
    top: 704px;
    animation: 7s ease-in-out reverse kf-ellipse-2;
}

@keyframes kf-ellipse-2 {
    0% {
        transform: translate(0px, 0px) rotate(0);
    }

    100% {
        transform: translate(-60px, -20px) rotate(-20deg);
    }
}

.ellipse-3 {
    background-color: var(--purple-300);
    border-radius: 79.5px;
    left: 1350px;
    mix-blend-mode: normal;
    position: absolute;
    top: 334px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    animation: 7s ease-in-out reverse kf-ellipse-3;
    width: 153px;
    height: 153px;
}

@keyframes kf-ellipse-3 {
    0% {
        transform: translate(0px, 0px);
    }

    100% {
        transform: translate(0px, -170px);
    }
}

.container-center-horizontal {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}