body{padding:0;margin:0}#top{height:100vh;position:fixed;background:-webkit-linear-gradient(right,#f3d8ec,#a1c1f3);background:linear-gradient(270deg,#f3d8ec,#a1c1f3);background-size:1000% 1000%;-webkit-animation:changeColor 30s ease infinite;animation:changeColor 30s ease infinite}#top .container{visibility:hidden}#top.active .container{visibility:visible;position:relative;top:-100%;left:50%;width:200px;height:200px;margin-left:-100px;-webkit-perspective:1000px;perspective:1000px;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-animation:dropCube 1s cubic-bezier(.65,.05,.36,1) forwards .8s,fadeOutBox 1s ease forwards 6.3s;animation:dropCube 1s cubic-bezier(.65,.05,.36,1) forwards .8s,fadeOutBox 1s ease forwards 6.3s}#top.active .container #cube-wrapper{width:100%;height:100%;position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}#top.active .container #cube-wrapper figure{margin:0;width:100%;height:100%;display:block;position:absolute;-webkit-transition:all .5s;transition:all .5s;box-sizing:border-box;background-color:#FFF;opacity:.6;border:1px solid #c1c1c1}#top.active .container #cube-wrapper .front{-webkit-transform:rotateY(0) translateZ(100px);transform:rotateY(0) translateZ(100px);z-index:3}#top.active .container #cube-wrapper .back{-webkit-transform:translateZ(-100px);transform:translateZ(-100px)}#top.active .container #cube-wrapper .right{-webkit-transform:rotateY(90deg) translateZ(100px);transform:rotateY(90deg) translateZ(100px)}#top.active .container #cube-wrapper .left{-webkit-transform:rotateY(-90deg) translateZ(100px);transform:rotateY(-90deg) translateZ(100px);z-index:3}#top.active .container #cube-wrapper .top{-webkit-transform:rotateX(90deg) translateZ(100px);transform:rotateX(90deg) translateZ(100px);z-index:1;-webkit-animation:openTop 1s forwards 1.8s;animation:openTop 1s forwards 1.8s}#top.active .container #cube-wrapper .bottom{-webkit-transform:rotateX(-90deg) translateZ(100px);transform:rotateX(-90deg) translateZ(100px)}#top.active .container #heart{width:100%;height:100%;position:absolute;z-index:2;top:0;-webkit-transform:rotateY(0);transform:rotateY(0);-webkit-animation:showHeart 1s forwards 2.8s,heartbeat .5s cubic-bezier(.25,.46,.45,.94) forwards 3.8s 6 alternate,fadeOutHeart 1s cubic-bezier(.25,.46,.45,.94) forwards 5.8s;animation:showHeart 1s forwards 2.8s,heartbeat .5s cubic-bezier(.25,.46,.45,.94) forwards 3.8s 6 alternate,fadeOutHeart 1s cubic-bezier(.25,.46,.45,.94) forwards 5.8s}#top.active .container #heart>img{width:100%;display:block}#top.active .container .sm-heart{width:80px;height:80px;left:50%;top:50%;margin-left:-40px;position:absolute;z-index:1;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:3s;transition-duration:3s;-webkit-transition-timing-function:cubic-bezier(.65,.05,.36,1);transition-timing-function:cubic-bezier(.65,.05,.36,1)}#top.active .container .sm-heart .heart-bot.lft,#top.active .container .sm-heart .heart-bot.lft:after,#top.active .container .sm-heart .heart-top.lft,#top.active .container .sm-heart .heart-top.lft:after{left:0}#top.active .container .sm-heart *{position:absolute}#top.active .container .sm-heart .heart-top{height:25%;width:50.25%;top:0;overflow:hidden}#top.active .container .sm-heart .heart-top:after{top:0;content:"";position:absolute;height:200%;width:104%;background:#f15959;border-radius:70% 80% 50% 50%/80% 80% 50% 50%}#top.active .container .sm-heart .heart-top.rgt{right:0}#top.active .container .sm-heart .heart-top.rgt:after{right:0;border-top-left-radius:80% 80%;border-top-right-radius:70% 80%}#top.active .container .sm-heart .heart-bot{height:75.5%;width:50.25%;bottom:0;overflow:hidden}#top.active .container .sm-heart .heart-bot:after{position:absolute;content:"";height:95%;width:160%;background:#f15959;top:0;border-bottom-left-radius:100% 100%}#top.active .container .sm-heart .heart-bot.rgt{right:0}#top.active .container .sm-heart .heart-bot.rgt:after{right:0;border-bottom-left-radius:0;border-bottom-right-radius:100% 100%}#top.active .container h1{color:#ff1d1d;text-align:center;margin:0;font-size:22px;padding-top:90px;font-weight:700}.sm-heart-1{-webkit-transition-delay:0s;transition-delay:0s}.sm-heart-1>:after{background:#f1e959!important}.sm-heart-1.active{-webkit-transform:translate(-120%,-100vh);transform:translate(-120%,-100vh);opacity:0}.sm-heart-2{-webkit-transition-delay:.58s;transition-delay:.58s}.sm-heart-2>:after{background:#68f159!important}.sm-heart-2.active{-webkit-transform:translate(200%,-100vh);transform:translate(200%,-100vh);opacity:0}.sm-heart-3{-webkit-transition-delay:.69s;transition-delay:.69s}.sm-heart-3>:after{background:#59f1da!important}.sm-heart-3.active{-webkit-transform:translate(-290%,-100vh);transform:translate(-290%,-100vh);opacity:0}.sm-heart-4{-webkit-transition-delay:.13s;transition-delay:.13s}.sm-heart-4>:after{background:#5977f1!important}.sm-heart-4.active{-webkit-transform:translate(-80%,-100vh);transform:translate(-80%,-100vh);opacity:0}.sm-heart-5{-webkit-transition-delay:.76s;transition-delay:.76s}.sm-heart-5>:after{background:#cb59f1!important}.sm-heart-5.active{-webkit-transform:translate(-200%,-100vh);transform:translate(-200%,-100vh);opacity:0}.sm-heart-6{-webkit-transition-delay:.2s;transition-delay:.2s}.sm-heart-6>:after{background:#f15987!important}.sm-heart-6.active{-webkit-transform:translate(180%,-100vh);transform:translate(180%,-100vh);opacity:0}.sm-heart-7{-webkit-transition-delay:.81s;transition-delay:.81s}.sm-heart-7>:after{background:#f1bc59!important}.sm-heart-7.active{-webkit-transform:translate(300%,-100vh);transform:translate(300%,-100vh);opacity:0}.sm-heart-8{-webkit-transition-delay:0s;transition-delay:0s}.sm-heart-8>:after{background:#96f159!important}.sm-heart-8.active{-webkit-transform:translate(100%,-100vh);transform:translate(100%,-100vh);opacity:0}.sm-heart-9{-webkit-transition-delay:.43s;transition-delay:.43s}.sm-heart-9>:after{background:#59f1ad!important}.sm-heart-9.active{-webkit-transform:translate(280%,-100vh);transform:translate(280%,-100vh);opacity:0}.sm-heart-10{-webkit-transition-delay:.3s;transition-delay:.3s}.sm-heart-10>:after{background:#59a5f1!important}.sm-heart-10.active{-webkit-transform:translate(30%,-100vh);transform:translate(30%,-100vh);opacity:0}.sm-heart-11{-webkit-transition-delay:.25s;transition-delay:.25s}.sm-heart-11>:after{background:#9d59f1!important}.sm-heart-11.active{-webkit-transform:translate(80%,-100vh);transform:translate(80%,-100vh);opacity:0}.sm-heart-12{-webkit-transition-delay:.5s;transition-delay:.5s}.sm-heart-12>:after{background:#f159b4!important}.sm-heart-12.active{-webkit-transform:translate(-180%,-100vh);transform:translate(-180%,-100vh);opacity:0}@-webkit-keyframes dropCube{100%{top:85%}}@keyframes dropCube{100%{top:85%}}@-webkit-keyframes scaleCube{100%{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}}@keyframes scaleCube{100%{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}}@-webkit-keyframes rotateCube{100%{-webkit-transform:rotateY(390deg);transform:rotateY(390deg)}}@keyframes rotateCube{100%{-webkit-transform:rotateY(390deg);transform:rotateY(390deg)}}@-webkit-keyframes openTop{100%{-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotateX(180deg) translateZ(100px);transform:rotateX(180deg) translateZ(100px)}}@keyframes openTop{100%{-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotateX(180deg) translateZ(100px);transform:rotateX(180deg) translateZ(100px)}}@-webkit-keyframes showHeart{100%{top:-130%}}@keyframes showHeart{100%{top:-130%}}@-webkit-keyframes heartbeat{50%{-webkit-transform:scale(.8);transform:scale(.8)}100%{-webkit-transform:scale(.9);transform:scale(.9)}}@keyframes heartbeat{50%{-webkit-transform:scale(.8);transform:scale(.8)}100%{-webkit-transform:scale(.9);transform:scale(.9)}}@-webkit-keyframes fadeOutHeart{0%{top:-130%}100%{top:-100vh;opacity:0;-webkit-transform:scale(3);transform:scale(3)}}@keyframes fadeOutHeart{0%{top:-130%}100%{top:-100vh;opacity:0;-webkit-transform:scale(3);transform:scale(3)}}@-webkit-keyframes fadeOutBox{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:1}100%{-webkit-transform:translateY(100vh);transform:translateY(100vh);opacity:0}}@keyframes fadeOutBox{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:1}100%{-webkit-transform:translateY(100vh);transform:translateY(100vh);opacity:0}}@-webkit-keyframes changeColor{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes changeColor{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}