@import url("s://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

.mario-block-container {
  height: 30rem;
  width: 30rem;
  background: linear-gradient(to bottom, #7fcafc 0%, #4a90e2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.mario-block-btn {
  width: 212px;
  height: 64px;
  background-color: #ffcc00;
  border: 4px solid #e6b800;
  border-radius: 6px;
  position: relative;
  box-shadow:
    inset 4px 4px #fff176,
    inset -4px -4px #c28f00,
    0 4px #b8860b;
  cursor: pointer;
  transition: transform 0.2s ease;
  image-rendering: pixelated;
}

/* Makes the button lighter on hover */
.mario-block-btn:hover {
  background-color: #ffe066;
  box-shadow:
    inset 4px 4px #fff9a0,
    inset -4px -4px #d4a200,
    0 6px #b8860b;
}

/* Makes the button bounce on click */
.mario-block-btn:active {
  animation: bounce 0.4s ease-out;
}

.mario-block-btn:focus {
  outline: none;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-32px);
  }
  100% {
    transform: translateY(0);
  }
}

/* 4 Button Dots */
.mario-block-btn::before,
.mario-block-btn::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #a67c00;
  border-radius: 50%;
  box-shadow:
    186px 0 #a67c00,
    0 38px #a67c00,
    186px 38px #a67c00;
}

.mario-block-btn::before {
  top: 6px;
  left: 6px;
}

/*Shiny glow dot */
.mario-block-btn::after {
  top: 12px;
  left: 96px;
  background-color: rgba(255, 255, 255, 0.2);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: none;
}

/* COIN styles */
.coin {
  position: absolute;
  top: -70px;
  left: 31.5%;
  transform: translateX(-50%);
  width: 66px;
  height: 66px;
  background: transparent;
  image-rendering: pixelated;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

.coin::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: transparent;
  box-shadow:
    24px 0 #000,
    32px 0 #000,
    40px 0 #000,
    16px 8px #000,
    48px 8px #000,
    8px 16px #000,
    56px 16px #000,
    8px 24px #000,
    56px 24px #000,
    8px 32px #000,
    56px 32px #000,
    8px 40px #000,
    56px 40px #000,
    16px 48px #000,
    48px 48px #000,
    24px 56px #000,
    32px 56px #000,
    40px 56px #000,
    24px 8px #ffce00,
    32px 8px #ffce00,
    40px 8px #ffce00,
    16px 16px #ffce00,
    24px 16px #ffce00,
    32px 16px #ffce00,
    40px 16px #ffce00,
    48px 16px #ffce00,
    16px 24px #ffce00,
    24px 24px #ffce00,
    32px 24px #ffce00,
    40px 24px #ffce00,
    48px 24px #ffce00,
    16px 32px #ffce00,
    24px 32px #ffce00,
    32px 32px #ffce00,
    40px 32px #ffce00,
    48px 32px #ffce00,
    16px 40px #ffce00,
    24px 40px #ffce00,
    32px 40px #ffce00,
    40px 40px #ffce00,
    48px 40px #ffce00,
    24px 48px #ffce00,
    32px 48px #ffce00,
    40px 48px #ffce00,
    24px 16px #ffe066,
    16px 24px #ffe066,
    16px 32px #ffe066,
    16px 40px #ffe066,
    48px 24px #a67c00,
    48px 32px #a67c00,
    48px 40px #a67c00,
    40px 48px #a67c00,
    32px 16px #fff,
    32px 24px #fff,
    32px 32px #fff,
    32px 40px #fff,
    24px 16px #ffffff,
    32px 16px #ffffff,
    24px 24px #ffffff,
    40px 16px #ffe066,
    40px 24px #ffe066,
    32px 32px #ffe066,
    24px 32px #ffe066,
    48px 24px #8a6700,
    48px 32px #8a6700,
    48px 40px #8a6700,
    40px 48px #8a6700,
    32px 48px #8a6700;
}

.coin {
  filter: drop-shadow(0 0 5px #ffd700) brightness(1.1);
}

@keyframes coinShine {
  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 5px #ffd700);
  }
  50% {
    filter: brightness(1.2) drop-shadow(0 0 10px #ffd700);
  }
}

.coin::before {
  animation: coinShine 2s infinite;
}

/* Pop coin on :active */
.mario-block-btn:active .coin {
  animation: coin-pop 0.6s ease-out forwards;
}

@keyframes coin-pop {
  0% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) translateY(-64px);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-80px);
    opacity: 0;
  }
}

.question-mark {
  font-family: "Press Start 2P", monospace;
  font-size: 32px;
  color: #ffffff;
  text-shadow:
    2px 2px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}

/* Clouds */
.cloud {
  position: absolute;
  background-color: white;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  image-rendering: pixelated;
  animation: cloudMove 30s ease-in-out infinite alternate;
}

.cloud-1 {
  top: 50px;
  left: 40px;
  width: 26px;
  height: 16px;
  box-shadow:
    0 0 0 3px white,
    16px 0 white,
    -8px 8px white,
    8px 8px white,
    24px 8px white,
    -16px 16px white,
    0 16px white,
    16px 16px white,
    30px 16px white,
    -22px 24px white,
    1px 24px white,
    24px 24px white,
    -16px 32px white,
    0 32px white,
    16px 32px white;
}

.cloud-2 {
  top: 140px;
  left: 200px;
  width: 32px;
  height: 24px;
  box-shadow:
    4px 0 white,
    3px 0 white,
    -7px 9px white,
    3px -1px white,
    18px 9px white,
    0 14px white,
    12px 12px white;
}

.cloud-3 {
  top: 300px;
  left: 380px;
  width: 43px;
  height: 36px;
  box-shadow:
    8px 0 white,
    2px 0 white,
    -12px 9px white,
    3px -1px white,
    18px 8px white,
    0 14px white,
    12px 12px white;
}

.cloud-4 {
  top: 350px;
  left: 70px;
  width: 33px;
  height: 24px;
  box-shadow:
    10px 2px white,
    18px 9px white,
    -8px 8px white,
    8px 8px white,
    24px 8px white,
    -13px 16px white,
    0 16px white,
    16px 16px white,
    30px 16px white,
    -8px 24px white,
    8px 24px white,
    24px 24px white,
    -1px 31px white,
    8px 32px white,
    12px 30px white;
}

.cloud-5 {
  top: 27px;
  left: 375px;
  width: 24px;
  height: 16px;
  box-shadow:
    0 0 0 4px white,
    16px 0 white,
    -12px 8px white,
    8px 8px white,
    28px 8px white,
    -18px 19px white,
    0 16px white,
    16px 16px white,
    30px 16px white,
    -8px 24px white,
    8px 24px white,
    25px 24px white,
    -12px 30px white,
    0px 32px white,
    16px 32px white;
}

/* Cloud Animations */
@keyframes cloudMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(120px);
  }
}

.cloud-1 {
  animation-duration: 40s;
}

.cloud-2 {
  animation-duration: 35s;
}

.cloud-3 {
  animation-duration: 45s;
}

.cloud-4 {
  animation-duration: 38s;
}

.cloud-5 {
  animation-duration: 50s;
}