main{background:#1b1b1e;color:white;min-width:50%;margin:auto;border-radius:10px;padding:3em 0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:2px solid #ff5e5b;box-shadow:0 10px 30px #ff5e5b}ul{list-style-type:none;display:flex;padding:0}main li{font-size:300%;position:relative;transition:0.2s ease-in all}main li:not(.off){animation:spin 0.5s}main li.off{opacity:0.25}main li.off:after{animation:fade-down 1s forwards}main li:before{content:"⭐"}main li:after{content:"⭐";position:absolute;top:0;left:0}main li:hover{opacity:0.7;cursor:pointer;transform:scale(1.05) rotate(5deg)}main li span{position:absolute;top:0;left:0;font-size:10%;opacity:0;animation:pew 1s forwards;animation-delay:var(--d,0ms)}@keyframes pew{from{left:50%;top:50%;opacity:0;font-size:10%}10%{opacity:1}50%{opacity:0.7}80%{opacity:0}99%{left:var(--l,150%);top:var(--t,150%);opacity:0;font-size:50%}to{opacity:0;font-size:100%}}@keyframes fade-down{to{transform:translateY(100px) scale(1.5) rotate(90deg);opacity:0}}@keyframes spin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}