@keyframes ribbon-animation {
  from {
    height: 100%;
  }
  to {
    height: 0%;
  }
}
@keyframes ribbon-animation-reversed {
  from {
    height: 0%;
  }
  to {
    height: 100%;
  }
}
@keyframes rocket-animation {
  0% {
    transform: translate(-20%, 400%) rotate(0);
  }
  25% {
    transform: translate(-30%, 300%) rotate(-6deg);
  }
  50% {
    transform: translate(-40%, 200%) rotate(-12deg);
  }
  75% {
    transform: translate(-50%, 100%) rotate(-18deg);
  }
  100% {
    transform: translate(-60%, 0) rotate(-24deg);
  }
}
*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
dl, dd, ol, ul, figure, hr, fieldset, legend,
button, input, textarea, select {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

body {
  line-height: 1.5;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  background-color: #fff;
  color: #000;
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: inherit;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a img {
  border: 0;
}

button, input, select, textarea {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
}

blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.loading-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #090040;
}

.text {
  color: #00FFFF;
  display: inline-block;
  margin-left: 5px;
}

.bounce-ball {
  position: relative;
  display: inline-block;
  height: 37px;
  width: 15px;
}
.bounce-ball:before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #00FFFF;
  transform-origin: 50%;
  animation: bounce 500ms alternate infinite ease;
}

@keyframes bounce {
  0% {
    top: 30px;
    height: 5px;
    border-radius: 60px 60px 20px 20px;
    transform: scaleX(2);
  }
  35% {
    height: 15px;
    border-radius: 50%;
    transform: scaleX(1);
  }
  100% {
    top: 0;
  }
}
.hidden {
  display: none !important;
}

@font-face {
  font-family: "ScoreFont";
  src: url("/assets/fonts//Audiowide-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.ribbons {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
}
.ribbons span {
  width: 100%;
  height: 0;
  background: #090040;
}

.ribbons-roll-in {
  z-index: 8;
}
.ribbons-roll-in span {
  height: 0;
  margin-top: 0 !important;
  animation: ribbon-animation-reversed 0.5s linear forwards;
}

.ribbons-roll-out {
  z-index: 8;
}
.ribbons-roll-out span {
  height: 100%;
  margin-top: auto;
  animation: ribbon-animation 0.5s linear forwards;
}

#game {
  position: fixed;
  z-index: -1;
  visibility: hidden;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
#game.show {
  visibility: visible;
  z-index: 7;
}

.navbar {
  position: fixed;
  width: 100vw;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 4rem;
}
.navbar__logo a {
  font-family: "ScoreFont", sans-serif;
  font-size: 23px;
  color: #FFE6E1;
}
.navbar__menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar__menu__item img {
  width: 25px;
  height: 25px;
  filter: invert(95%) sepia(25%) saturate(818%) hue-rotate(292deg) brightness(105%) contrast(104%);
}
.navbar__menu__item img:first-child {
  margin-right: 1rem;
}

@media (max-width: 500px) {
  .navbar {
    padding: 0.5rem 2rem;
  }
}
.intro {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  color: #FFE6E1;
}
.intro__wrapper {
  position: absolute;
  padding: 1rem 4rem;
  top: 0;
  left: 0;
  z-index: 5;
}
.intro__wrapper__title {
  margin-top: 80px;
  font-size: 36px;
  letter-spacing: 3px;
}
.intro__wrapper__intro-text {
  font-size: 18px;
  line-height: 35px;
  margin: 40px 0;
  max-width: 820px;
}
.intro__wrapper__button {
  color: #FFE6E1;
  background-color: #2B1055;
  letter-spacing: 3px;
  cursor: pointer;
}
.intro .icons-wrapper {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  height: 100vh;
}
.intro .icons {
  position: relative;
  width: calc(100vw + 200px);
  height: calc(100vh + 20px);
  overflow: hidden;
}
.intro .icons .cloud {
  position: absolute;
  bottom: 0;
}
.intro .icons .cloud#cloud-1 {
  right: 0;
  animation: shakeCloud 10s infinite linear;
}
@keyframes shakeCloud {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(10px, 10px);
  }
  50% {
    transform: translate(0, -10px);
  }
  75% {
    transform: translate(-10px, 10px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.intro .icons .cloud#cloud-2 {
  right: 0;
  animation: shakeCloud 8s infinite linear;
}
@keyframes shakeCloud {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(20px, 20px);
  }
  50% {
    transform: translate(0, -20px);
  }
  75% {
    transform: translate(-20px, 20px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.intro .icons .cloud#cloud-3 {
  left: 0;
  animation: shakeCloud 4s infinite linear;
}
@keyframes shakeCloud {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(15px, 15px);
  }
  50% {
    transform: translate(0, -15px);
  }
  75% {
    transform: translate(-15px, 15px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.intro .icons .cloud#cloud-4 {
  left: 0;
  animation: shakeCloud 6s infinite linear;
}
@keyframes shakeCloud {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(6px, 6px);
  }
  50% {
    transform: translate(0, -6px);
  }
  75% {
    transform: translate(-6px, 6px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.intro #sun-icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
.intro #rocket-icon {
  position: absolute;
  bottom: 10%;
  right: 5%;
  width: 350px;
  animation: rocket-animation 10s linear forwards;
}
.intro #star-icon {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 500px) {
  .intro__wrapper {
    padding: 0.5rem 2rem;
  }
  .intro #sun-icon {
    width: 200% !important;
  }
  .intro #rocket-icon {
    width: 300px;
  }
}
@media (max-width: 1200px) {
  #rocket-icon {
    translate: 20% 0;
  }
}
@media (max-width: 800px) {
  #rocket-icon {
    translate: 20% 10%;
  }
}
#start-game {
  width: 200px;
  height: 50px;
  display: block;
  position: relative;
}

.botontext {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
  text-align: center;
  line-height: 50px;
  font-size: 12px;
  text-transform: uppercase;
}

.twist {
  display: block;
  height: 100%;
  width: 25%;
  position: relative;
  float: left;
  margin-left: -4px;
}

.twist:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #2B1055;
  bottom: 100%;
  position: absolute;
  transform-origin: center bottom 0px;
  translate: -50% !important;
  transform: matrix3d(1, 0, 0, 0, 0, 0, -1, -0.003, 0, 1, 0, 0, 0, 0, 0, 1);
  -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995); /* custom */
}

.twist:after {
  content: "";
  position: absolute;
  width: 100%;
  top: 100%;
  height: 100%;
  background: #2B1055;
  transform-origin: center top 0px;
  translate: -50% !important;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.003, 0, -50, 0, 1);
  -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995); /* custom */
}

.boton:hover .twist:before {
  background: #fff;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0.003, 0, 50, 0, 1);
}

.boton:hover .twist:after {
  background: #2B1055;
  transform: matrix3d(1, 0, 0, 0, 0, 0, -1, 0.003, 0, 1, 0, 0, 0, 0, 0, 1);
}

.boton .twist:nth-of-type(1) {
  margin-left: 0;
}

.boton .twist:nth-of-type(1):before,
.boton .twist:nth-of-type(1):after {
  transition-delay: 0s;
}

.boton .twist:nth-of-type(2):before,
.boton .twist:nth-of-type(2):after {
  transition-delay: 0.1s;
}

.boton .twist:nth-of-type(3):before,
.boton .twist:nth-of-type(3):after {
  transition-delay: 0.2s;
}

.boton .twist:nth-of-type(4):before,
.boton .twist:nth-of-type(4):after {
  transition-delay: 0.3s;
}

.boton .botontext:nth-of-type(1) {
  color: #3d3b40;
  bottom: 100%;
  transform-origin: center bottom 0px;
  transform: matrix3d(1, 0, 0, 0, 0, 0, -1, -0.003, 0, 1, 0, 0, 0, 0, 0, 1);
  -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995); /* custom */
}

.boton:hover .botontext:nth-of-type(1) {
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0.003, 0, 50, 0, 1);
}

.boton .botontext:nth-of-type(2) {
  color: #fff;
  top: 100%;
  transform-origin: center top 0px;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.003, 0, -50, 0, 1);
  -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995); /* custom */
}

.boton:hover .botontext:nth-of-type(2) {
  transform: matrix3d(1, 0, 0, 0, 0, 0, -1, 0.003, 0, 1, 0, 0, 0, 0, 0, 1);
}

/*MENU*/
.square {
  border: 1px solid #2B1055;
  height: 26px;
  width: 26px;
  display: block;
  margin: 40px auto;
  transform: rotate(45deg);
  overflow: hidden;
  -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995); /* custom */
}

.square .burgerwrap {
  height: 18px;
  width: 21px;
  transform: rotate(-45deg);
  padding-left: 5px;
  padding-top: 8px;
  -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995); /* custom */
}

.square:hover {
  transform: rotate(135deg);
  border: 1px solid #fff;
}

.square:hover .burgerwrap {
  transform: rotate(-135deg);
}

.square span {
  height: 2px;
  width: 14px;
  background: #2B1055;
  display: block;
  margin-bottom: 2px;
  -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995); /* custom */
}

.square span:after {
  content: "";
  height: 2px;
  width: 14px;
  position: absolute;
  background: #fff;
  left: -19px;
  -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995); /* custom */
}

.square:hover span {
  margin-left: 26px;
}

.square:hover span:after {
  left: 5px;
}

.square span:nth-of-type(1),
.square span:nth-of-type(1):after {
  transition-delay: 0.1s;
}

.square span:nth-of-type(2),
.square span:nth-of-type(2):after {
  transition-delay: 0.2s;
}

.square span:nth-of-type(3),
.square span:nth-of-type(3):after {
  transition-delay: 0.3s;
}

body {
  background: linear-gradient(to bottom, #2B1055 0%, #6A0572 25%, #FF6FA1 75%, #FFE6EB 100%);
}
/*# sourceMappingURL=main.css.map */