* {
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    background: #000;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    align-items: center;
}

canvas {
    position: relative;
    z-index: 10;
}

.canvas-box {
    display: block;
    margin: 0;
    width: 480px;
    height: 640px;
    background: url('../../assets/images/background.jpg');
    background-repeat: round;
    position: relative;
}

.bubble-game {
    display: flex;
    justify-content: center;
} 

.bubble-game .instructions{
    /* visibility: hidden; */
}

.instructions::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 12px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.bubble-game .instructions h1 {
    font-size: 20px;
    font-family: cursive;
    color: #000;
    font-family: 'Bungee', cursive;
}

.monkey-shooter {
    position: absolute;
    bottom: 0;
    left: 180px;
    height: 125px;
    width:120px;
    overflow:hidden;
    background: url('../../assets/images/monkey.png');
}

.monkey-shooter.shooting {
    background-position: right;
}

.score {
    position: absolute;
    top:10px;
    left: 10px;
}

.level {
    position: absolute;
    top:10px;
    right: 10px;
}

.moves {
    position: absolute;
    right: 0;
    bottom: 0;
}

.text-bg {
    background: #fff;
    opacity: 0.7;
    padding: 7px 7px;
    border-radius: 5px;
    font-weight: bold;
    color:#1ED413;
    font-family: 'Bungee', cursive;
}

.text-val {
    color: #936034;
    font-weight: 800;
    opacity:1;
}

.next-shooter {
    position: absolute;
    left: 104px;
    bottom: 0;
    height: 77px;
    width: 63px;
    background: none;
    text-shadow: 0px 0px 12px #ccc;
    color: #000;
}

.bubble-game .instructions button {
    background-color: #1ED413;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid #333;
}

.game-heading {
    position: absolute;
    top: 0;
    margin: 0 auto;
    font-family: 'Bungee', cursive;
    font-size: 20px;
    left: 125px;
    text-shadow: 0px 0px 12px #ccc;
    background: #1ED413;
    padding: 5px;
    border-radius: 5px;
}

.game-status.text-box {
    visibility: hidden;
    background: #ECEB34;
    height: 150px;
    width: 250px;
    left: 100px;
    top: 36%;
    box-shadow: 5px 7px 10px #000;
    border: none;
}

.text-box {
    position: absolute;
    border: 3px solid #333;
    background-color: #fff;
    border-radius: 10px;
    width: 378px;
    height: 240px;
    bottom: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    right: 20px;
    align-items: center;
    z-index: 30;
    padding: 5px;
    color: #936034;
    text-align: center; 
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0px 2px 5px #ccc;
}

.game-status i {
    background-color: #1ED413;
    padding: 12px;
    border-radius: 100%;
    font-size: 30px;
    cursor: pointer;
    color: #333;
    margin: 0 20px;
}

.game-status .game-actions {
    display: flex;
    justify-content: space-around;
}

.game-status h1{
    color: #333;
}

.final-score {
    font-size: 20px;
    font-family: 'Bungee', cursive;
    margin: 10px 0;
}