@media screen and (max-width: 500px) {
  .mole {
    background: url('media/images/moles/mole1.png') bottom center no-repeat;
    background-size: 25%;
    position: relative;
    background-size: contain; /* Ensures the mole scales while keeping proportions */
    top: 100%;
    width: 70%;
    height: 70%;
    opacity: 0; /* Ensures mole fades smoothly */
    transition: transform 0.4s ease-in-out, opacity 0.3s ease-in;
  }

  .hole.up .mole {
    transform: translateY(-95%);
    opacity: 1;
    /*top: 30%;*/
  }
  div.outsideBorder {
    width: 99%;
  }
  .start{
    height: 90%;
    width: 96%;
    min-width: 30%;
    cursor: none;
    display: flex;
    position: relative;
    font-size: 26px;
    margin: auto;
    font-family: "Super_Comic";
    justify-content: center; /* Centers content inside */
    left: 0%;
    border-radius: 15px;
  }
  .status{
    font-size: 20px; /* Adjusted for better fit */
    height: auto; /* Removes fixed height */
    min-height: 30px; /* Ensures readability */
    text-align: center;
  }
  h1{
    font-size: 22px;
    display: flex;
  }
}