@import url('https://fonts.googleapis.com/css2?family=Emilys+Candy&family=Rubik+Bubbles&family=Uncial+Antiqua&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rubik+Glitch&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Macondo+Swash+Caps&family=Shojumaru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&family=Rubik+Wet+Paint&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Faster+One&family=Reggae+One&display=swap');
@import url(./layouts/background.css);
@import url(./layouts/buttons.css);
@import url(./layouts/score.css);
@import url(./layouts/game-over.css);
@import url(./layouts/main-menu.css);
@import url(./layouts/select-person.css);
@import url(./layouts/card-person.css);
@import url(./layouts/select-scene.css);
@import url(./layouts/card-scene.css);
@import url(./layouts/credits.css);
@import url(./layouts/grid-credits.css);

:root {
  --color-credits: #70a679;
  --color-credits-hover: #65ff83;
  --color-text-ui: #70a679;
  --color-btn: #65ff83;
  --linear-btn: linear-gradient(90deg, #072b0e 0%, #287a36 90%);
  --btn-hover: linear-gradient(90deg, #051f0a 0%, #113617 90%);

  --font-primary: 'Rubik Bubbles', cursive, sans-serif;
  --font-ui: 'Emilys Candy', cursive, sans-serif;
  --font-open-scene: 'Uncial Antiqua', cursive, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  min-width: 1166.66px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.game {
  width: 1166.66px;
  height: 600px;
  border: 3px solid black;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  display: none;
}

.pipe-game {
  position: absolute;
  bottom: 40px;
  width: 120px;
  animation: pipe-animation 2s infinite linear;
  z-index: 100;
  transform: rotateY(180deg);
}

.super-mario {
  width: 90px;
  position: absolute;
  bottom: 57px;
  z-index: 100;
}

.jump-mario {
  animation: mario-animation 500ms ease-out;
}

.cloud-game {
  position: absolute;
  width: 550px;
  animation: clouds-animation 20s infinite linear;
}

.game__pause {
  position: absolute;
  display: block;
  right: 20px;
  top: 20px;
  font-size: 18px;
  color: black;
  cursor: pointer;
}

.game_message-unlocked {
  position: absolute;
  top: -80px;
  right: 40%;
  z-index: 500;
  background: var(--linear-btn);
  padding: 12px 17px;

  border-radius: 8px;
  color: var(--color-btn);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  text-align: center;

  text-transform: uppercase;
}

.game__pause-icon {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 100;
  cursor: pointer;

  font-size: 1.5rem;
  color: var(--color-text-ui);
}

@keyframes pipe-animation {
  from {
    right: -80px;
  }
  to {
    right: 100%;
  }
}

@keyframes clouds-animation {
  from {
    right: -550px;
  }
  to {
    right: 100%;
  }
}

@keyframes mario-animation {
  0% {
    bottom: 90px;
  }
  40% {
    bottom: 274px;
  }

  70% {
    bottom: 274px;
  }
  100% {
    bottom: 90px;
  }
}

@keyframes message-unlocked {
  0% {
    opacity: 1;
    top: -80px;
  }

  10% {
    top: 35px;
  }
  90% {
    top: 35px;
    opacity: 1;
  }
  99% {
    top: 35px;
    opacity: 0;
  }
  100% {
    opacity: 0;
    top: -80px;
  }
}