app.scss

// @import "breakpoint";
// $small-up: 768px;
// $large-up: 900px;

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

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #faebd7;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, sans-serif;
    // @include breakpoint($small-up) {
    //   background: navajowhite;
    // }
    // @include breakpoint($large-up) {
    //   background: navajowhite;
    // }
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    header {
        padding: 1.5rem;
        width: 100%;
        flex: 0 1 auto;
        display: flex;
        min-height: 4rem;
        background: #faebd7;
        justify-content: space-between;
        flex-direction: row;
    }
    button {
      border-radius: 30px;
      font-size: 1em;
      padding: 10px;
      background-color: #00ff00 !important;
    }
    div.score,
    div.timer,
    button {
        background-color: navajowhite;
        padding: 10px;
        height: 40px;
        width: 7rem;
        border-radius: 20px;
        text-align: center;
        border: 3px solid #ddd;
    }

    main {
        padding: 1.5rem;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        background-image: url("assets/grass.jpg");
        background: cover;

        section {
            display: flex;
            justify-content: center;

            article {
                cursor: url("assets/mallet.png"), auto;
                margin: 2rem 1rem;
            }
        }
    }
}
//    ###    Mole Styling    ###
article div {
  cursor: url("assets/mallet.png"), auto;
};
.hole {
    position: relative;
    width: 200px;
    height: 90px;
    background: rgba(black, 0.8);
    border-radius: 50%;
    box-shadow: inset 0 10px 0 rgba(black, 0.2), inset 0 10px 30px rgba(black, 0.6);
}

.mole-box {
    position: absolute;
    bottom: 0;
    overflow: hidden;
    width: 100%;
    height: 300px;
    border-radius: 0 0 50% 50% / 15%;
}

.mole {
    position: absolute;
    cursor: pointer;
    left: 15%;
    // Animate the bottom property for mole movement
    bottom: 0;
    width: 70%;
    height: 200px;
    border-radius: 1rem;
    background-image: url("https://pbs.twimg.com/profile_images/1980294624/DJT_Headshot_V2.jpg");
    // background-image: url("assets/molesvg.png");
    background-size: cover;
    // background-repeat: no-repeat;
    //
    background-position: cover;
    animation: mole-show 2000ms ease-in-out 1;
    cursor: url("assets/mallet.png"), auto;
}

.show {
    animation: mole-show 2000ms ease-in-out 1;
}

.hide {
    display: none;
    // animation: mole-hide 1000ms ease forwards;
}
// .hit {
//   animation: mole-hit 400ms ease forwards;
// }
@keyframes mole-show {
    0% {
        bottom: -250px;
    }

    20% {
        bottom: 0;
    }

    80% {
        bottom: 0;
    }

    100% {
        bottom: 0;
    }
}
// Possibilities
// @keyframes mole-hide {
//   0% {
//     bottom: 0;
//   }
//   20% {
//     bottom: 0;
//   }
//   80% {
//     bottom: 0;
//   }
//   100% {
//     bottom: -250px;
//   }
// }
// @keyframes mole-hit {
//   0% {
//     bottom: 0;
//   }
//   20% {
//     bottom: 0;
//   }
//   80% {
//     bottom: 0;
//   }
//   100% {
//     bottom: -250px;
//   }
// }