*
  {
      box-sizing: border-box;
	 
  }
  Html , body
  {
      border: 0;
      padding: 0;
      margin: 0;
      overflow-x: hidden;
	  overflow-y:cover;
	  
	  
  }
.center-outer {
display: table;
width: 100%;
height: 100%;
top:42%;
position:absolute;

}


.center-inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}

/* Essential CSS - Makes the effect work */


 ul
  {
      text-align: center;
      list-style: inside;
  }

.bubbles {
display: inline-block;
font-family: arial;
position: relative;
}

.bubbles h1 {
position: relative;
font-family: 'Luckiest Guy', cursive;
font-size:50px;
color: black;
  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: DarkTurquoise;
  text-shadow: 2px 2px 4px #000000;
z-index: 2;
}

.individual-bubble {
position: absolute;
border-radius: 100%;
bottom: 10px;
background-color: #fff;
z-index: 1;
}