html{box-sizing:border-box}body{margin:0;height:100vh;width:100vw}canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-9999}.container{height:100vh;width:100vh;margin:0 auto;text-align:center;visibility:hidden;position:relative;overflow:hidden}.container div.six{top:15vh;z-index:1}.container div.seven,.container div.eight{width:100vw;height:100vh;position:fixed;top:0}.container>div{position:absolute;left:0;right:0;top:29vh}.one{font-size:4rem;margin-bottom:0}.date-section{font-size:2.5rem;font-weight:700;display:flex;justify-content:center}.one>img{vertical-align:middle;margin-bottom:10px;max-width:100%;height:auto}.one .two{font-size:1.5rem}.two{font-size:2.2rem;font-weight:semi-bold;text-align:center;margin-bottom:34px}.three{font-size:2.2rem}.four .text-box{width:600px;margin:0 auto;border:3px solid#aaa;border-radius:5px;padding:10px;position:relative}.text-box p{margin:0;text-align:left}.text-box span{visibility:hidden}.text-box .fake-btn{position:absolute;right:5px;bottom:2px;color:#fff;background-color:#03c160;padding:8px 16px;border-radius:8px}.five p{font-size:2rem;position:absolute;left:0;right:0}.five .idea-2{top:24vh}.idea-3 strong{padding:3px 5px;border-radius:3px;display:inline-block}.date-countdown{font-size:2.5rem;font-weight:700;border-radius:8px;padding:4px}.date-countdown .date-day,.date-countdown .date-month,.date-countdown .date-year{margin:3px}.five .idea-5{font-size:2.2rem}.idea-5 span,.idea-6 span,.wish-hbd span{display:inline-block}.idea-6 span{font-size:15rem}.six{position:relative}.six img{display:inline-block;max-width:100%;height:auto}.six .hat{position:absolute;width:70px;top:-2px;left:41%;transform:scale(1.1)}.baloons img{display:inline-block;position:absolute}.baloons img:nth-child(2n){left:-10%}.baloons img:nth-child(odd){right:-10%}.baloons img:nth-child(3n){left:30%}.eight svg{width:25px;position:absolute;top:0;left:0;visibility:hidden;z-index:-1}.eight svg:first-child{top:7vh;left:5vw;fill:#bd6ecf}.eight svg:nth-child(2){top:23vh;left:35vw;fill:#7dd175}.eight svg:nth-child(3){top:33vh;left:23vw;fill:#349d8b}.eight svg:nth-child(4){top:43vh;left:57vw;fill:#347a9d}.eight svg:nth-child(5){top:68vh;left:7vw;fill:#c66053}.eight svg:nth-child(6){top:42vh;left:77vw;fill:#bfaa40}.eight svg:nth-child(7){top:68vh;left:83vw;fill:#e3bae8}.eight svg:nth-child(8){top:86vh;left:37vw;fill:#8762cb}.eight svg:nth-child(9){top:94vh;left:87vw;fill:#9a90da}.wish-hbd{font-size:3em;margin:0;text-transform:uppercase}.wish h5{font-weight:lighter;font-size:2rem;margin:10px 0 0}.nine p{font-size:2rem;font-weight:lighter}#replay{z-index:3;cursor:pointer}@media screen and (max-height:1e3px){.six .hat{left:42%}}@media screen and (max-height:800px){.six .hat{left:46%}}@media screen and (max-height:700px){.six .hat{left:44%}}@media screen and (max-height:850px)and (max-width:450px){.six .hat{left:32%}}@media screen and (max-width:500px){.container{width:90%}.date-countdown{font-size:2rem}.four .text-box{width:90%}.text-box .fake-btn{right:5px;bottom:-48px}.idea-5 span{display:block}.idea-6 span{font-size:10rem}.six .hat{width:64px;top:-8px}.wish-hbd{font-size:2.2em}.wish h5{font-size:1.4rem}.nine p{font-size:1.5rem;font-weight:lighter}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lydia-dp{border:none}.play-pause{width:50px;height:50px;background-size:contain;background-repeat:no-repeat;background-image:url(../img/play.svg);background-color:transparent;border:none;cursor:pointer;z-index:100;position:absolute;right:5vw;top:5vh;transition:all.3s ease-in-out}.play-pause.playing{background-image:url(../img/pause.svg);animation:rotate 2s linear infinite}.tools{display:flex;align-self:start;padding:19px}.circle{padding:0 4px}.box{display:inline-block;align-items:center;width:10px;height:10px;padding:1px;border-radius:50%}.red{background-color:#ff605c}.yellow{background-color:#ffbd44}.green{background-color:#00ca4e}.startSign{display:flex;justify-content:center;align-items:center;flex-direction:column;margin:30vh 5vw;padding:2px}.button{text-align:center;transition:.3s ease-in-out;cursor:pointer;background-color:transparent;filter:url(#handDrawnNoise);display:inline-flex;align-items:center;user-select:none;font-family:"Courier New",monospace;font-size:1.5rem;font-weight:700;padding:1em;border-width:0;border-radius:2rem;box-shadow:#3336 4px 4px 0 1px;animation:idle 1s infinite ease-in-out}.highlight{position:absolute;top:0;left:0;width:100%;height:100%;fill:rgba(255,225,0,.5);stroke:rgba(255,225,0,.5);stroke-width:10;stroke-linecap:round;pointer-events:none;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset.5s ease-in-out}@keyframes idle{0%{filter:url(#handDrawnNoise)}50%{rotate:2.5deg;filter:url(#handDrawnNoise2)}to{filter:url(#handDrawnNoise)}}.button-cosm{fill:#3336;transition:.3s ease-out;scale:.5;position:absolute;translate:calc(24px - 100%)1.5rem}.button:hover{font-weight:700;border-width:0;border-radius:2rem}.button:hover{font-weight:700;border-width:0;border-radius:2rem;rotate:-2.5deg;animation:hover 2.5s infinite ease-in-out}.button:hover .highlight{stroke-dashoffset:0}.button:active .highlight{stroke-dashoffset:1000;animation:highlight 5s infinite,col.5s forwards;stroke:#bc4e2666}@keyframes col{0%{stroke:rgba(255,225,0,.5)}to{stroke:#1c98eb66}}@keyframes highlight{0%{stroke-dashoffset:0}25%{stroke-dashoffset:1000}50%{stroke-dashoffset:1000}to{stroke-dashoffset:0}}@keyframes hover{0%{rotate:0deg;filter:url(#handDrawnNoise);translate:0 0}25%{rotate:-1deg;filter:url(#handDrawnNoise2);translate:0 -2px}50%{rotate:0deg;filter:url(#handDrawnNoise);translate:0 2px}75%{rotate:-1deg;filter:url(#handDrawnNoise2);translate:0 -2px}to{rotate:0deg;filter:url(#handDrawnNoise);translate:0 0}}.button:hover .button-cosm{rotate:345deg;translate:calc(22px - 100%)1.9rem}.button:active .button-cosm{fill:#333333f1;rotate:225deg;translate:calc(55px - 100%)1.6rem;animation:none}.button:active{font-weight:700;border-width:0;border-radius:2rem;box-shadow:inset#333333f1 4px 4px 0 1px;rotate:-2.5deg;animation:active 1s infinite ease-in-out}@keyframes active{0%{filter:url(#handDrawnNoiset);translate:0 -1px}25%{rotate:-3deg}50%{filter:url(#handDrawnNoiset2);translate:0 1px}66%{rotate:1.5deg}to{filter:url(#handDrawnNoiset);translate:0 -1px}}.bdayCake{position:relative;top:195px;width:242px;margin:0 auto;text-align:start}.plate{position:absolute;width:242px;height:10px;border-radius:10px;background-color:#2a9d8f}.plate:before{content:"";position:absolute;width:195px;height:90px;background-color:#9c6644;top:-90px;left:25px}.plate:after{content:"";position:absolute;width:195px;left:25px;height:10px;background-color:#ffd166;top:-60px;box-shadow:0 25px#f4978e}.cream{position:absolute;background-color:#f08080;width:195px;height:20px;left:25px;top:-110px;border-radius:20px 20px 0 0}.cream:before{content:"";position:absolute;background-color:#f08080;width:15px;height:30px;top:10px;border-radius:20px;box-shadow:15px 5px#9c6644,30px -5px#f08080,45px 0#9c6644,60px 4px#f08080,75px 3px#9c6644,90px -5px#f08080,105px 5px#9c6644,120px -5px#f08080,135px 0#9c6644,150px 4px#f08080,165px 0#9c6644,180px 3px#f08080}.cream:after{position:absolute;content:"";background-color:rgba(0,0,0,.1);width:97.5px;height:110px;left:98px;border-radius:0 20px 0 0}.candle{position:absolute;width:10px;height:40px;background:repeating-linear-gradient(#fae0e4,#fae0e4 5px,#ff0a54 5px,#ff0a54 10px);box-shadow:inset -5px 0 rgba(0,0,0,.1);top:-150px;left:118px}.candle:before{content:"";position:absolute;background-color:#333;width:2px;height:10px;top:-10px;left:4px}.candle:after{content:"";position:absolute;width:20px;height:20px;background-color:#fcca46;border-radius:80%15%55%50%/55%15%80%50%;box-shadow:inset -3px 3px#fe7f2d;transform:rotate(315deg);top:-28px;left:-5px;opacity:.9;animation:scale.5s ease-out infinite;transition:opacity.5s ease}.candle.flame-out:after{opacity:0;animation:none}@keyframes scale{0%{transform:scaley(1)rotate(-45deg);opacity:.9}50%{transform:scaley(.9)rotate(-45deg);opacity:.8}to{transform:scaley(1)rotate(-45deg);opacity:.9}}.flame{position:absolute}.flame:before{content:"";position:absolute;background-color:rgba(0,0,0,.1);height:10px;width:118px;border-radius:0 10px 10px 0;top:0;left:123px}.flame .one{position:absolute;color:#fcca46;font-size:20px;top:-160px;left:100px;text-shadow:33px -30px#fcca46;animation:flash.5s ease infinite alternate}.flame .two{position:absolute;color:#fcca46;font-size:15px;top:-180px;left:100px;text-shadow:35px 30px#fcca46;animation:flash.8s ease infinite alternate}.flame .three{position:absolute;color:#fcca46;font-size:10px;top:-195px;left:110px;text-shadow:30px 30px#fcca46;animation:flash.4s ease infinite alternate}@keyframes flash{0%{opacity:1}to{opacity:0}}