body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body{background:#000}.box{position:relative}.box:before{background-color:#89cff0;border-radius:50%;content:"";height:440px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:440px;z-index:-1}.box-body{background-color:#cc231e;background:linear-gradient(#762c2c,#ff0303);border-bottom-left-radius:5%;border-bottom-right-radius:5%;box-shadow:0 4px 8px 0 #0000004d;height:200px;margin-top:123.3333333333px;position:relative;width:200px}.box-body .img{display:block;margin:0 auto;opacity:0;transform:translateY(0);transition:all .5s}.box-body-active{animation:box-body 1s ease-in-out forwards;cursor:pointer}.box-body-active .img{opacity:1;transform:translateY(-157px);z-index:0}.box-body-active .box-lid{animation:box-lid 1s ease-in-out forwards}.box-body-active .box-bowtie:before{animation:box-bowtie-left 1.1s ease-in-out forwards}.box-body-active .box-bowtie:after{animation:box-bowtie-right 1.1s ease-in-out forwards}.box-body:after{background:linear-gradient(#fff,#ffefa0);bottom:0;content:"";top:0;width:50px}.box-body:after,.box-lid{left:50%;position:absolute;transform:translateX(-50%)}.box-lid{background-color:#cc231e;border-radius:5%;bottom:90%;box-shadow:0 8px 4px -4px #0000004d;height:40px;width:220px;z-index:1}.box-lid:after{background:linear-gradient(#ffefa0,#fff);bottom:0;content:"";left:50%;position:absolute;top:0;transform:translateX(-50%);width:50px}.box-bowtie{height:100%;z-index:1}.box-bowtie:after,.box-bowtie:before{border:16.6666666667px solid #fff;border-radius:50% 50% 0 50%;bottom:99%;content:"";height:83.3333333333px;position:absolute;width:83.3333333333px;z-index:-1}.center-container{align-items:center;display:flex;height:100vh;justify-content:center}.box-bowtie:before{left:50%;transform:translateX(-100%) skew(10deg,10deg)}.box-bowtie:after{left:50%;transform:translateX(0) rotate(90deg) skew(10deg,10deg)}@keyframes box-lid{0%,42%{transform:translate3d(-50%,0,0) rotate(0deg)}60%{transform:translate3d(-85%,-230%,0) rotate(-25deg)}90%,to{transform:translate3d(-119%,225%,0) rotate(-70deg)}}@keyframes box-body{0%{transform:translateZ(0) rotate(0deg)}25%{transform:translate3d(0,25%,0) rotate(20deg)}50%{transform:translate3d(0,-15%,0) rotate(0deg)}70%{transform:translateZ(0) rotate(0deg)}}@keyframes box-bowtie-right{0%,50%,75%{transform:translateX(0) rotate(90deg) skew(10deg,10deg)}90%,to{box-shadow:0 4px 8px -4px #0000004d;transform:translate(-50%,-15%) rotate(45deg) skew(10deg,10deg)}}@keyframes box-bowtie-left{0%{transform:translateX(-100%) rotate(0deg) skew(10deg,10deg)}50%,75%{transform:translate(-50%,-15%) rotate(45deg) skew(10deg,10deg)}90%,to{transform:translateX(-100%) rotate(0deg) skew(10deg,10deg)}}
/*# sourceMappingURL=main.f8777c11.css.map*/