/* Non essential CSS - Just for example centering */

html, body {
width: 100%;
height: 100%;
margin: 0;
}

.center-outer {
display: table;
width: 100%;
height: 100%;
}

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

/* Essential CSS - Makes the effect work */

body {
background-color: #3498db;
}

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

.bubbles h1 {
position: relative;
margin: 1em 0 0;
font-size: 80px;
font-family: 'Luckiest Guy', cursive;
color: #32CD32;
z-index: 2;
}

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