* { box-sizing: border-box; }
html { height: 100%; }
body {
    position: relative;
    margin: 0;
    height: 100%;
    background: linear-gradient(steelblue, beige);
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}

#loader {
    position: absolute;
    top:50%; left:50%;
    height:200px; width:100px;
    margin-top:-100px; margin-left:-50px;
}
#loader-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000000d6;
  z-index: 10000;
  text-align: center;
}

#glass {
    position: relative;
    height: 100%;
    background: rgba(255,255,255,.1);
    border-radius: 0% 0% 15% 15%;
    border: 3px solid;
    border-top: 0;
    border-bottom: 20px solid;
    border-color: rgba(255,255,255,.7);
    overflow: hidden;
}
#drink {
    position: absolute;
    top:100%; right:0; bottom:0; left:0;
    background: linear-gradient(to bottom, orange, orangered);
    box-shadow: inset 0 2px 1px rgba(255,69,0,.2);
    opacity: .7;
}
#counter {
    position: relative;
    line-height: 200px;
    font-size: 22px;
    color: rgba(255,255,255,1);
}

#lemon {
    display: none;
    position: absolute;
    top:0; right:0;
    height:79px; width:79px;
    margin-top:-38px; margin-right:-38px;
    background: radial-gradient(#f7f3b6 10%, #d7d26c);
    border-radius: 50%;
    border: 4px solid #47582e;
    box-shadow: inset 0 0 0 2px #f7f3b6;
}
#straw {
    display: none;
    position: absolute;
    bottom:20px; right:30%;
    height:220px; width:6px;
    background: steelblue;
    border-radius: 0 6px 0 0;
    transform: rotate(-18.5deg);
    transform-origin: left bottom;
    -webkit-transform: rotate(-18.5deg);
    -webkit-transform-origin: left bottom;
}
#straw:after {
    content: '';
    position: absolute;
    top:0; right:0;
    height:6px; width:80px;
    background: inherit;
    border-radius: 0 6px 0 0;
}

#cubes {
    position: absolute;
    top:0; right:0; bottom:0; left:0;
}
#cubes div {
    /*display: none;*/
    position: absolute;
    width:50px; height:50px;
    background: rgba(255,255,255,.3);
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(255,255,255,.6);
}
#cubes div:nth-child(1) {
    bottom:0;
}
#cubes div:nth-child(2) {
    bottom:45px; left:25px;
    transform: rotate(32deg);
    transform-origin: center bottom;
    -webkit-transform: rotate(32deg);
    -webkit-transform-origin: center bottom;
}
#cubes div:nth-child(3) {
    bottom:90px; left:20px;
    transform: rotate(-34deg);
    transform-origin: center bottom;
    -webkit-transform: rotate(-34deg);
    -webkit-transform-origin: center bottom;
}

#coaster {
    width: 130%; height: 4px;
    margin-left: -15%;
    background: steelblue;
    border-radius: 2px;
}

footer {
    position: absolute;
    left:0; top:50%; right:0;
    margin-top: 120px;
    font-size: large;
    line-height: 20px;
    margin-top: 106px;
    font-family: cursive;
    color: chartreuse;
}
/* loader end */
/* tooltip */
#tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

#tooltip .tooltiptext {
visibility: hidden;
width: 230px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

/* Position the tooltip */
position: absolute;
  z-index: 1;
  bottom: 110%;
  left: 50%;
  margin-left: -60px;
}

#tooltip:hover .tooltiptext {
visibility: visible;
}