@keyframes slideAnim{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes colorChangeAnim{0%{background-color:red}50%{background-color:#00f}to{background-color:green}}.element{animation:colorChangeAnim 10s ease infinite;display:flex;align-items:center;justify-content:center;padding:1rem;border-radius:15px}.looper{width:100%;overflow:hidden}.looper__innerList{display:flex;justify-content:center;width:fit-content}.looper__innerList_paused[data-animate=false] .looper__listInstance,.looper__innerList[data-animate=true] .looper__listInstance{animation:slideAnim linear infinite}.looper__listInstance{display:flex;width:max-content;animation:none}:root{--green: #59c3c3;--offwhite: #ebebeb;--red: #e65a5e}#root{flex:1;padding:16px}.description{margin-bottom:16px;text-align:center}.contentBlock{display:flex;align-items:center;justify-content:center;height:120px;margin:10px;padding:16px;font-weight:600;text-align:center;border-radius:16px}.contentBlock--one{width:120px;background:rgba(255,255,255,.05);font-weight:600;font-size:18px}.contentBlock--one:last-of-type{color:var(--green);margin-right:36px}.contentBlock--two{color:var(--green);font-size:48px;background:rgba(255,255,255,.05)}@property --rotate{syntax: "<angle>"; initial-value: 132deg; inherits: false;}:root{--card-height: 65vh}.card{background:#191c29;padding:2px;position:relative;border-radius:6px;justify-content:center;align-items:center;text-align:center;display:flex;font-size:1.5em;color:#58c7fa00;cursor:pointer;font-family:cursive}.card:hover{color:#58c7fa;transition:color 1s}.card:hover:before,.card:hover:after{animation:none;opacity:0}.card:before{content:"";width:101%;height:101%;border-radius:5px;background-image:linear-gradient(var(--rotate),#FFA500,#FFA500 43%,#FFD700);position:absolute;z-index:-1;top:-.5%;left:-.5%;animation:spin 2.5s linear infinite}.card:after{position:absolute;content:"";left:0;right:0;z-index:-1;height:100%;width:100%;margin:0 auto;transform:scale(.8);filter:blur(calc(var(--card-height) / 6));background-image:linear-gradient(var(--rotate),#FFA500,#FFA500 43%,#FFD700);opacity:1;transition:opacity .5s;animation:spin 2.5s linear infinite}@keyframes spin{0%{--rotate: 0deg}to{--rotate: 360deg}}
