#game {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#game-bubble-area {
    position: absolute;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    transition-property: opacity;
    transition-duration: 0.3s;
}

.bubble.attached {
    transition-property: opacity, left, top;
    transition-duration: 0.2s;
}

.bubble.invisible {
    transform: scaleX(1.4) scaleY(1.4);
    opacity: 0;
}

#game-shooter {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /* these are the colors of .bubble1 .bubble2 etc */
    background: linear-gradient(  0deg, rgba(230,0,0,0.9),   transparent 40%),
                linear-gradient( 60deg, rgba(250,100,0,0.9), transparent 40%),
                linear-gradient(120deg, rgba(220,220,0,0.9), transparent 40%),
                linear-gradient(180deg, rgba(0,127,0,0.9),   transparent 40%),
                linear-gradient(240deg, rgba(0,0,200,0.9),   transparent 40%),
                linear-gradient(300deg, rgba(170,0,170,0.9), transparent 40%);
}

.bubble1 {
    /* red */
    background: linear-gradient(0deg, rgba(230,0,0,1), rgba(255,0,0,0) 90%),
                linear-gradient(120deg, rgba(230,0,0,0.6), rgba(0,255,0,0) 90%),
                linear-gradient(240deg, rgba(230,0,0,0.6), rgba(0,0,255,0) 90%);
}
.bubble2 {
    /* orange */
    background: linear-gradient(0deg, rgba(250,100,0,1), rgba(255,0,0,0) 90%),
                linear-gradient(120deg, rgba(250,100,0,0.6), rgba(0,255,0,0) 90%),
                linear-gradient(240deg, rgba(250,100,0,0.6), rgba(0,0,255,0) 90%);
}
.bubble3 {
    /* yellow */
    background: linear-gradient(0deg, rgba(220,220,0,1), rgba(255,0,0,0) 90%),
                linear-gradient(120deg, rgba(220,220,0,0.6), rgba(0,255,0,0) 90%),
                linear-gradient(240deg, rgba(220,220,0,0.6), rgba(0,0,255,0) 90%);
}
.bubble4 {
    /* green */
    background: linear-gradient(0deg, rgba(0,127,0,1), rgba(255,0,0,0) 90%),
                linear-gradient(120deg, rgba(0,127,0,0.6), rgba(0,255,0,0) 90%),
                linear-gradient(240deg, rgba(0,127,0,0.6), rgba(0,0,255,0) 90%);
}
.bubble5 {
    /* blue */
    background: linear-gradient(0deg, rgba(0,0,200,1), rgba(255,0,0,0) 90%),
                linear-gradient(120deg, rgba(0,0,200,0.6), rgba(0,255,0,0) 90%),
                linear-gradient(240deg, rgba(0,0,200,0.6), rgba(0,0,255,0) 90%);
}
.bubble6 {
    /* pink */
    background: linear-gradient(0deg, rgba(170,0,170,1), rgba(255,0,0,0) 90%),
                linear-gradient(120deg, rgba(170,0,170,0.6), rgba(0,255,0,0) 90%),
                linear-gradient(240deg, rgba(170,0,170,0.6), rgba(0,0,255,0) 90%);
}

.status-message {
    /* make it show up above all the bubbles */
    position: absolute;
    display: block;
}
/*--------------------------------------------------------------
# webkit scrollbar
--------------------------------------------------------------*/

/* Webkit Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    display: none;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: transparent;
    display: none;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: crimson;
    display: none;
  } 
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: crimson;
    display: none;
  }