style.css

html{
    box-sizing: border-box;
    font-size : 6px;
    height: 100%; 
}

*, *:before, *after{
    box-sizing: inherit;
}

body{
    padding:20px;
    margin:0;
    margin-left: 50px;
    font-family: 'Amatic SC', cursive;
    background: linear-gradient(#ffd700, #f6f6f6);
    height: 100%; 
}

h1{
    text-align: center;
    font-size: 10rem;
    line-height:1;
    margin-bottom: 0;
}

.score{
    background: rgba(255, 255, 255, 0.2);
    padding: 0 2rem 0rem;
    line-height: 1;
    border-radius: 10rem;
    display: ruby-base-container;
}

.game{
    width: 600px;
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}

.hole{
    flex: 1 1 33.33%;
    overflow: hidden;
    position: relative;
    background-color: transparent;
    border-bottom: 0.3px solid #000; /
    
}

.hole:after{
    border-bottom: 0.3px solid #e11515; /
}

 

.mole{
    background:url('mole1.png') bottom center no-repeat;
    background-size:60%;
    position: absolute;
    top: 100%;
    width: 100%;
    height: 120%;
    transition:all 0.4s;
}

.hole.up .mole{
    top: 0;
}




#timer1 {
    background-color:transparent;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 80px;
}


#playAgainButton {
    display: flex;
    background-color: #00d0ff;
    color: #fff;
    font-size: 20px;
    padding: 20px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 760px;
}


p{
    font-size: 20px;
    margin-left: 600px;
}