.container .borderbox .glass:before{z-index:99}@keyframes floatUp{0%{transform:translateY(0)}to{transform:translateY(-100px)}}.bubble:first-child{top:229px;left:9px;animation:floatUp 5s ease-in-out infinite;animation-delay:2s}.bubble:nth-child(2){top:150px;left:54px;animation:floatUp 5s ease-in-out infinite;animation-delay:3s}.bubble:nth-child(3){top:287px;left:19px;animation:floatUp 5s ease-in-out infinite;animation-delay:2s}.bubble:nth-child(4){top:188px;left:14px;animation:floatUp 5s ease-in-out infinite;animation-delay:4s}.bubble:nth-child(5){top:76px;left:134px;animation:floatUp 5s ease-in-out infinite;animation-delay:5s}.bubble:nth-child(6){top:154px;left:116px;animation:floatUp 5s ease-in-out infinite;animation-delay:1s}.bubble:nth-child(7){top:103px;left:52px;animation:floatUp 5s ease-in-out infinite;animation-delay:2s}.bubble:nth-child(8){top:33px;left:109px}.bubble:nth-child(8),.bubble:nth-child(9){animation:floatUp 5s ease-in-out infinite;animation-delay:3s}.bubble:nth-child(9){top:28px;left:56px}.bubble:nth-child(10){top:285px;left:146px;animation:floatUp 5s ease-in-out infinite;animation-delay:5s}.bubble:nth-child(11){top:125px;left:31px}.bubble:nth-child(11),.bubble:nth-child(12){animation:floatUp 5s ease-in-out infinite;animation-delay:3s}.bubble:nth-child(12){top:95px;left:6px}.container{display:flex;align-items:center;justify-content:center}.container .textbox{width:200px;margin-right:10px;color:#505050}.container .borderbox{position:relative;transition:all 1s}.container .borderbox:hover{transform:rotate(-45deg)}.container .borderbox:hover .inner{transform:rotate(30deg)}.container .borderbox:before{content:"";position:absolute;top:25px;right:-50px;width:50px;height:110px;border:20px solid #d3d3d3;border-radius:25px}.container .borderbox .glass{position:relative;width:180px;height:245px;background-color:#969696;border-radius:5px;border:10px solid #d3d3d3;border-top:none;overflow:hidden}.container .borderbox .glass:before{content:"";position:absolute;width:30px;height:130px;background-color:rgba(0,0,0,.2);border-radius:5px;z-index:50;margin:auto;top:0;right:0;left:0;bottom:0;box-shadow:50px 0 0 0 rgba(0,0,0,.2),-50px 0 0 0 rgba(0,0,0,.2)}.container .borderbox .inner{position:absolute;width:200%;height:240px;border-top:50px solid #fff;background:linear-gradient(180deg,#bc7012 0,#efd002);transition:all 1s;transform-origin:0 0}.bubble:nth-child(0){top:22px;left:72px;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:-1.05s;animation-delay:.15s}.bubble:first-child,.bubble:nth-child(0){position:absolute;border-radius:50%;background-color:hsla(0,0%,100%,.4);width:10px;height:10px;animation-name:bubbles}.bubble:first-child{top:287px;left:92px;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:-50ms;animation-delay:151ms}.bubble:nth-child(2){top:246px;left:139px;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:.95s;animation-delay:152ms}.bubble:nth-child(2),.bubble:nth-child(3){position:absolute;border-radius:50%;background-color:hsla(0,0%,100%,.4);width:10px;height:10px;animation-name:bubbles}.bubble:nth-child(3){top:248px;left:103px;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:1.95s;animation-delay:153ms}.bubble:nth-child(4){top:276px;left:62px;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:2.95s;animation-delay:154ms}.bubble:nth-child(4),.bubble:nth-child(5){position:absolute;border-radius:50%;background-color:hsla(0,0%,100%,.4);width:10px;height:10px;animation-name:bubbles}.bubble:nth-child(5){top:199px;left:90px;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:3.95s;animation-delay:155ms}.bubble:nth-child(6){top:225px;left:187px;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:4.95s;animation-delay:156ms}.bubble:nth-child(6),.bubble:nth-child(7){position:absolute;border-radius:50%;background-color:hsla(0,0%,100%,.4);width:10px;height:10px;animation-name:bubbles}.bubble:nth-child(7){top:45px;left:37px;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:5.95s;animation-delay:157ms}.bubble:nth-child(8){top:257px;left:2px;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:6.95s;animation-delay:158ms}.bubble:nth-child(8),.bubble:nth-child(9){position:absolute;border-radius:50%;background-color:hsla(0,0%,100%,.4);width:10px;height:10px;animation-name:bubbles}.bubble:nth-child(9){top:308px;left:168px;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:7.95s;animation-delay:159ms}.bubble:nth-child(10){top:1px;left:180px;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:8.95s;animation-delay:.16s}.bubble:nth-child(10),.bubble:nth-child(11){position:absolute;border-radius:50%;background-color:hsla(0,0%,100%,.4);width:10px;height:10px;animation-name:bubbles}.bubble:nth-child(11){top:30px;left:83px;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:9.95s;animation-delay:161ms}.bubble:nth-child(12){position:absolute;border-radius:50%;background-color:hsla(0,0%,100%,.4);width:10px;height:10px;top:255px;left:135px;animation-name:bubbles;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:10.95s;animation-delay:162ms}@keyframes bubbles{to{top:-10px}}