* {
  padding: 0;
  margin: 0;
  --yellow: #fff76a;
  --grey: grey;
  --blue: #0e49b5;
  --light-blue: #c6d9fb;
  --red: #ec0101;
}

.container {
  max-width: 80vw;
  height: 100vh;
  margin: auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#area {
  width: 100%;
  height: 500px;
  border-top: 10px solid var(--light-blue);
  border-bottom: 30px solid var(--yellow);
  position: relative;
}

#ball {
  width: 50px;
  height: 50px;
  background-color: var(--red);
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: 10px;
  z-index: 2;
}

#ball::before {
  content: "";
  width: 25px;
  height: 25px;
  background-color: var(--yellow);
  border-top-left-radius: 5px;
  border-top-right-radius: 80px;
  z-index: 1;
  position: absolute;
  transform: translateX(26px);
}

#ball::after {
  content: "";
  width: 25px;
  height: 25px;
  background-color: var(--blue);
  border-bottom-left-radius: 70px;
  border-bottom-right-radius: 5px;
  z-index: 1;
  position: absolute;
  transform: translateY(25px);
}

.jump {
  animation: jumping 600ms;
}

#dune {
  height: 25px;
  width: 40px;
  background-color: var(--yellow);
  border-top-left-radius: 90px;
  border-top-right-radius: 90px;
  position: absolute;
  bottom: 0;
  right: 15px;
  z-index: 2;
  animation: dune 3s infinite linear;
}

#dune::before {
  content: "";
  height: 60px;
  width: 40px;
  background-color: var(--yellow);
  border-top-left-radius: 30px;
  border-bottom-left-radius: 5px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  transform: translateX(-10px);
}

#dune::after {
  content: "";
  height: 60px;
  width: 40px;
  background-color: var(--yellow);
  border-top-right-radius: 30px;
  border-bottom-right-radius: 5px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  transform: translateX(10px);
}

/* Dune running */
@keyframes dune {
  0% {
    left: 150rem;
  }

  100% {
    left: -10rem;
  }
}

@keyframes jumping {
  0% {
    bottom: 0;
  }
  30% {
    bottom: 150px;
  }
  70% {
    bottom: 150px;
  }
  100% {
    bottom: 0;
  }
}

/*--------------------*/
/* Modal */
.end-game-message {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 5rem;
  z-index: 2;
}

.end-game-message button {
  font-size: 3rem;
  background-color: #fff;
  border: 1px solid #000;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}

.end-game-message button:hover {
  background-color: #000;
  color: #fff;
  border-color: #fff;
}

.end-game-message.show {
  display: flex;
}

.end-game-message .score {
  font-size: 2.5rem;
  padding: 0.5rem;
}

/*--------------------*/
/* Decorative */
.sand {
  position: absolute;
  bottom: -10px;
  right: 0;
  z-index: 2;
  background-color: var(--yellow);
  height: 20px;
  width: 60px;
  border-top-right-radius: 80px;
  border-top-left-radius: 80px;
}

.sand-1 {
  animation: updowm 2s infinite linear;
}
.sand-2 {
  animation: updowm 3s infinite linear;
}
.sand-3 {
  animation: updowm 4s infinite linear;
}
.sand-4 {
  animation: updowm 5s infinite linear;
}

/* Sand animation */
@keyframes updowm {
  0% {
    left: 150rem;
    bottom: -10px;
  }

  25% {
    bottom: 0;
  }

  50% {
    bottom: -10px;
  }

  75% {
    bottom: -5px;
  }

  100% {
    left: -10rem;
    bottom: -25px;
  }
}

.sun {
  background-color: var(--yellow);
  height: 120px;
  width: 120px;
  position: absolute;
  top: 40px;
  left: 0;
  border-radius: 50%;
  box-shadow: var(--yellow) 0 0 5px;
  animation: moving 3s linear infinite;
}

@keyframes moving {
  0% {
    left: 0;
  }

  50% {
    left: 20px;
    transform: scale(1.1);
  }

  100% {
    left: 0;
  }
}

.seagull {
  height: 17px;
  width: 17px;
  background-color: #000;
  position: absolute;
  top: 50px;
  right: 30px;
  border-radius: 50%;
  z-index: 1;
}

.seagull-1 {
  animation: flutterBody 1s linear infinite, flyingUp 5s linear infinite;
}
.seagull-2 {
  animation: flutterBody 1s linear infinite, flyingDown 8s linear infinite;
}
.seagull-3 {
  animation: flutterBody 1s linear infinite, flyingUp 7s linear infinite;
}
.seagull-4 {
  animation: flutterBody 1s linear infinite, flyingDown 6s linear infinite;
}

.seagull::before {
  content: "";
  height: 10px;
  width: 30px;
  background-color: #000;
  position: absolute;
  right: 10px;
  top: 2px;
  border-top-left-radius: 100px;
  transform: rotate(10deg);
  z-index: 5;
  animation: flutterLeft 1s linear infinite;
}

.seagull::after {
  content: "";
  height: 10px;
  width: 30px;
  background-color: #000;
  position: absolute;
  right: -25px;
  top: 2px;
  border-top-right-radius: 100px;
  transform: rotate(-10deg);
  z-index: 5;
  animation: flutterRigth 1s linear infinite;
}

@keyframes flyingUp {
  0% {
    top: 40px;
    left: 1000px;
  }

  50% {
    top: 80px;
    left: 500px;
  }

  100% {
    top: 150px;
    left: -100px;
  }
}

@keyframes flyingDown {
  0% {
    top: 40px;
    left: 1000px;
  }

  50% {
    top: 120px;
    left: 500px;
  }

  100% {
    top: 2px;
    left: -100px;
  }
}

@keyframes flutterBody {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes flutterLeft {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0);
  }
}

@keyframes flutterRigth {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0);
  }
}