body{
  background:grey;
  
  }
.drink-cont{
  margin:100px auto;
  }
.drink{
  margin:auto;
  width:500px;
  filter: drop-shadow(2px 2px 11px rgba(0,0,0,0.5));
  position:relative;
  }
  
.drinkcover{
  width:500px;
  height:60px;
  position:relative;
  filter:drop-shadow(0px 3px 3px rgba(0,0,0,0.4));
  z-index:5;
  }
.drinkcover:before{
  width:calc(100% + 80px);
  height:100%;
  content:"";
  position:absolute;
  left:-40px;
  top:0px;
  background:white;
  clip-path: polygon(40px 0, calc(100% - 40px) 0, calc(100% - 20px) 50%, 100% 50%, 100% 100%, 0 100%,0 50%,20px 50%);
  
  }
  
.liquid{
height:700px;
width:500px;
position:relative;
top:0; left:0;
}
.liquid:before{
  height:100%;
  width:100%;
  background:linear-gradient(#bfc37a 50%, #fee1e0 70%,#fee1e0 );
  content:"";
  position:absolute;
  left:0px;
  top:0px;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
}
.liquid:after{
    height: 80px;
    width: 100%;
    background: #fee1e0;
    content: "";
    position: absolute;
    left: 0px;
    top: calc(100%);
    clip-path: ellipse(40% 40px at 50% 0);
}

.update-log{
  z-index:5;
  position:absolute;
  background:white;
  top:50px;
  width:110px;
  height:140px;
  left:20px;
  transform: rotate(-3deg);
  border-radius:5px;
  padding:5px;
  font-family:Monaco;
  filter:drop-shadow(0px 1px 2px rgba(0,0,0,0.8));
}
.update-title{
  border-bottom: 1px solid black;
}
.update-scroll{
font-size:12px;
padding:5px 5px 5px 0;
overflow-y: scroll;
overflow-wrap: break-word;
height:110px;
scrollbar-gutter: stable both-edges;
}

.update-scroll::-webkit-scrollbar {
  width: 7px;
}

/* Track */
.update-scroll::-webkit-scrollbar-track {
  background: #eee;
  border: 1px solid grey;
  box-shadow: inset 2px -3px 2px 1px #80808085;
}

/* Handle */
.update-scroll::-webkit-scrollbar-thumb {
  width:8px; 
  box-shadow: 2px 0 2px 1px grey;
  background-image: linear-gradient(to bottom,  #fee1e0 50%,#fee1e0 70%);
  border: 1px solid grey;
  border-radius:5px;}

  



.bobas{
  position:absolute;
  width:100%;
  display:block;
  top:0;
  height:100%;
  left:0;
  text-align: center;
  
}

.bobas a{
  display:inline-block;
  width:56px;
  height:56px;
  background:grey;
  border-radius:50%;
  transition:0.4s;
  margin:3px;
  position:relative;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.8));
  z-index:0;
}
.bobas a:after{
  background:radial-gradient(circle at 10% 10%, rgba(0,0,0,0.2), black);
  position:absolute;
  width:100%;
  display:block;
  top:0;
  height:100%;
  left:0;
  content:"";
  border-radius:50%;
  z-index:0;
  transition:0.4s;
}
.bobas a:hover{
  margin:3px 6px !important;
  position:relative;
}
.bobas a:hover:after{
  opacity:0.1;
}

.bobas a .tooltip{
  display:none;
  position:absolute;
  bottom:70%; left:70%;
}
.bobas a:hover .tooltip{
  display:block;
  background:#e5e3d4;
  border: 3px solid #c0bbaf;
  border-radius:5px;
  color:black;
  padding:5px;
  font-family:Monaco;
  z-index:100;
}

p{margin:0;padding:0}
.boba-left{width:50%; height:100%; float:left; shape-outside: polygon(0 0, 22% 100%, 0 100%); }
.boba-right{ width:50%; height:100%; float:right; shape-outside: polygon(100% 0, 78% 100%, 100% 100%); }
  
.plaid {
    height: 350px;
    width: 100%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAA5CAYAAACMGIOFAAAC7ElEQVR4Aeya3WoUQRCF2x4hsu6iEH9C0AtF0Dfw5X0DL8QbQbyQuBJNTGAl60/EceQbaRiG2u7pSc2WIX3VFLWzW6fPOdUzNeuXB6+a46N3jcV6uHzTvH75omHl91lz49Vq1ZyeLNv6WaXY79yYu/Ofa7fttfI77svnQ3d3b9/Vf87d2Lj+fea+fztxs5t3XHV94aTYWwBkQzUAskEpgOTNmKTAizAYro8xCEDyZkxqAETimyQaAJI3Y5ICNSQrebALkLwZkxoAkWwfkBSbMUmBGpLFc0gSxiSA5M2Y1ACI5FMAyZsxSYEako0xCEDyZkxqAETymyQaAJI3Y5ICNSSL57qApNiMSQ2ASD4FkLwZkxSoIVk8hyQlBgFI3oxJDYBIPgWQvBmTFKgh2RiDACRvxqQGQCQfJBkASbEZkxSoIVk89w9geZ60mQwUT2aMRCQP9iVcPMksZqoZkEbTQfKppkPejEkK1DhGOAdTki3n5FRS5XvLOZkxeMZzKckWT07ZXTWaDpJPNR3yZkxSoMYx0j/4pdh/+nDQvmwJzWBbMQDni9vtS59fP+p2HRN/fP/WXXOz9mXP+uuRk2KvdV7lMgOg9dnKXXTdvffQzW/ddwA8PV46KfZa3oCZnA3TAMgGpQCS97kMaH2eAjWAxhgEIHmfy4DW5zUAslGbJBoAkr90ngRYd4MkD3YBki+enLIp9RkZG+M5JAljfQZDXDyp1WQkRYxlrn9djMHAcPGkxEA5JzOeA7vHQF+COXGQZGgyUlzOyZx70dwmpcVkjMHQlMq9q1aTkRShxaTkwcBguFG4Op5k2jVb7LsHj562f8vcRry796R9wIVRdn5sjCerqmofnB8/e96u/dgDiGGPNBsZMu4be32QEgApdGwMoLquXWz1FgDZ0CFeGrIBKYDkPT84JWObvn8IgCEMxxgEIHlvARCJDwEwRMIBSGz9Tz0Zn751NwimYgDJF09O2ZSKJwcMjINkU1Il/xcAAP//015f8wAAAAZJREFUAwDBKGQVIoG/HQAAAABJRU5ErkJggg==);
}