/* It's a box :) */
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 1rem;
  gap: 0.6rem;
}

/* You wouldn't guess, here's the styling of the damn button. */
.button {
  font-family: fantasy;
  text-align: center;
  width: min-content;
  font-size: 3.4rem;
  padding: 0 10px;
  border: 0.1rem solid rgb(28, 67, 24);
  border-radius: 0.4rem;

  color: rgb(28, 67, 24);
  text-shadow: 0 0 10px rgb(246, 255, 203);
  background: linear-gradient(
    to bottom right,
    #d3ff32 0%,
    #c7fc05,
    #abde03 100%
  );

  box-shadow:
    -0.1rem 0.1rem 0 rgb(28, 67, 24),
    -0.2rem 0.2rem 0 rgb(28, 67, 24),
    -0.3rem 0.3rem 0 rgb(28, 67, 24),
    inset 2px 1px 10px rgba(246, 255, 203, 0.2),
    inset 6px 3px 15px rgba(237, 255, 174, 0.8),
    inset -2px -1px 10px rgba(28, 67, 24, 0.2),
    inset -4px -2px 15px rgba(126, 163, 3, 0.8);

  transition: all 150ms ease-in-out;
  transform: rotate(-3deg);
  cursor: default;
}

/* What happens on hover? IDK, try it yourself, or modify these lines. */
.button:hover {
  transform: translate(0.6rem, -0.4rem) rotate(-3deg);
  box-shadow:
    -0.35rem 0.35rem 0 #ffff00,
    -0.7rem 0.7rem 0 #2db92d,
    -1rem 1rem 0 #e60000,
    inset 2px 1px 10px rgba(246, 255, 203, 0.2),
    inset 6px 3px 15px rgba(237, 255, 174, 0.8),
    inset -2px -1px 10px rgba(28, 67, 24, 0.2),
    inset -4px -2px 15px rgba(126, 163, 3, 0.8);
}

/* When hovering over each button, space is staying even between each button. */
.box .button:first-child:hover {
  margin-bottom: 0.4rem;
}
.box .button:nth-child(2):hover {
  margin: 0.4rem 0;
}
.box .button:last-child:hover {
  margin-top: 0.4rem;
}

/* Little star or whatever it is called in the corner */
.button:last-child > span {
  position: absolute;
  top: -10px;
  right: -14px;
  display: flex;
  align-items: center;
  justify-content: center;

  height: 2rem;
  width: 2rem;
  padding-top: 1.6rem;

  background: rgb(243, 255, 199);
  border: 0.15rem solid rgb(28, 67, 24);
  border-radius: 50%;
  font-size: 3rem;
  pointer-events: none;
}

/* Yes, there's no active or focus interaction */