*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}body{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;min-height:100vh;background-color:#06181f}.svg-stroke-animation{position:relative;width:800px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.svg-stroke-animation__icon{width:200px;padding:40px;-webkit-box-sizing:content-box;box-sizing:content-box}.svg-stroke-animation__icon svg{overflow:overlay}.svg-stroke-animation__icon path{fill:transparent;stroke-width:10}.svg-stroke-animation__icon.--heart{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}.svg-stroke-animation__icon.--heart path{stroke-dasharray:1557;stroke-dashoffset:0;stroke:#9BFF75}.svg-stroke-animation__icon.--heart:hover path{-webkit-animation-name:heart-animation;animation-name:heart-animation;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.svg-stroke-animation__icon.--star path{stroke-dasharray:1803;stroke-dashoffset:0;stroke:#fff}.svg-stroke-animation__icon.--star:hover path{-webkit-animation-name:star-animation;animation-name:star-animation;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.svg-stroke-animation__icon.--moon{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}.svg-stroke-animation__icon.--moon path{stroke-dasharray:1543;stroke-dashoffset:0;stroke:#31e8ff}.svg-stroke-animation__icon.--moon:hover path{-webkit-animation-name:moon-animation;animation-name:moon-animation;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes heart-animation{0%{stroke-dashoffset:0}40%{stroke-dashoffset:1557}80%{stroke-dashoffset:3114;fill:transparent}85%{-webkit-filter:drop-shadow(0 0 10px #9BFF75);filter:drop-shadow(0 0 10px #9BFF75)}90%{-webkit-filter:drop-shadow(0 0 10px #9BFF75) drop-shadow(0 0 20px #9BFF75);filter:drop-shadow(0 0 10px #9BFF75) drop-shadow(0 0 20px #9BFF75)}100%{stroke-dashoffset:3114;fill:#9BFF75;-webkit-filter:drop-shadow(0 0 10px #9BFF75) drop-shadow(0 0 20px #9BFF75) drop-shadow(0 0 30px #9BFF75);filter:drop-shadow(0 0 10px #9BFF75) drop-shadow(0 0 20px #9BFF75) drop-shadow(0 0 30px #9BFF75)}}@keyframes heart-animation{0%{stroke-dashoffset:0}40%{stroke-dashoffset:1557}80%{stroke-dashoffset:3114;fill:transparent}85%{-webkit-filter:drop-shadow(0 0 10px #9BFF75);filter:drop-shadow(0 0 10px #9BFF75)}90%{-webkit-filter:drop-shadow(0 0 10px #9BFF75) drop-shadow(0 0 20px #9BFF75);filter:drop-shadow(0 0 10px #9BFF75) drop-shadow(0 0 20px #9BFF75)}100%{stroke-dashoffset:3114;fill:#9BFF75;-webkit-filter:drop-shadow(0 0 10px #9BFF75) drop-shadow(0 0 20px #9BFF75) drop-shadow(0 0 30px #9BFF75);filter:drop-shadow(0 0 10px #9BFF75) drop-shadow(0 0 20px #9BFF75) drop-shadow(0 0 30px #9BFF75)}}@-webkit-keyframes star-animation{0%{stroke-dashoffset:0}40%{stroke-dashoffset:1803}80%{stroke-dashoffset:3606;fill:transparent}85%{-webkit-filter:drop-shadow(0 0 10px #fff);filter:drop-shadow(0 0 10px #fff)}90%{-webkit-filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff);filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff)}100%{stroke-dashoffset:3606;fill:#fff;-webkit-filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff) drop-shadow(0 0 30px #fff);filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff) drop-shadow(0 0 30px #fff)}}@keyframes star-animation{0%{stroke-dashoffset:0}40%{stroke-dashoffset:1803}80%{stroke-dashoffset:3606;fill:transparent}85%{-webkit-filter:drop-shadow(0 0 10px #fff);filter:drop-shadow(0 0 10px #fff)}90%{-webkit-filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff);filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff)}100%{stroke-dashoffset:3606;fill:#fff;-webkit-filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff) drop-shadow(0 0 30px #fff);filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff) drop-shadow(0 0 30px #fff)}}@-webkit-keyframes moon-animation{0%{stroke-dashoffset:0}40%{stroke-dashoffset:1543}80%{stroke-dashoffset:3086;fill:transparent}85%{-webkit-filter:drop-shadow(0 0 10px #31e8ff);filter:drop-shadow(0 0 10px #31e8ff)}90%{-webkit-filter:drop-shadow(0 0 10px #31e8ff) drop-shadow(0 0 20px #31e8ff);filter:drop-shadow(0 0 10px #31e8ff) drop-shadow(0 0 20px #31e8ff)}100%{stroke-dashoffset:3086;fill:#31e8ff;-webkit-filter:drop-shadow(0 0 10px #31e8ff) drop-shadow(0 0 20px #31e8ff) drop-shadow(0 0 30px #31e8ff);filter:drop-shadow(0 0 10px #31e8ff) drop-shadow(0 0 20px #31e8ff) drop-shadow(0 0 30px #31e8ff)}}@keyframes moon-animation{0%{stroke-dashoffset:0}40%{stroke-dashoffset:1543}80%{stroke-dashoffset:3086;fill:transparent}85%{-webkit-filter:drop-shadow(0 0 10px #31e8ff);filter:drop-shadow(0 0 10px #31e8ff)}90%{-webkit-filter:drop-shadow(0 0 10px #31e8ff) drop-shadow(0 0 20px #31e8ff);filter:drop-shadow(0 0 10px #31e8ff) drop-shadow(0 0 20px #31e8ff)}100%{stroke-dashoffset:3086;fill:#31e8ff;-webkit-filter:drop-shadow(0 0 10px #31e8ff) drop-shadow(0 0 20px #31e8ff) drop-shadow(0 0 30px #31e8ff);filter:drop-shadow(0 0 10px #31e8ff) drop-shadow(0 0 20px #31e8ff) drop-shadow(0 0 30px #31e8ff)}}