:root{--size: 40px;--col1: #deb91d;--col2: #646669;--col3: #646669;--col4: #deb91d}.el{background:conic-gradient(from 180deg at 50% 100%,hsla(0,0%,98%,1) 0deg,var(--col1) 72.0000010728836deg,var(--col2) 144.0000021457672deg,var(--col3) 216.00000858306885deg,var(--col4) 288.0000042915344deg,hsla(0,0%,98%,1) 1turn);width:100%;height:100%;mask:radial-gradient(circle at 50% 50%,white 2px,transparent 2.5px) 50% 50% / var(--size) var(--size),url(https://assets.codepen.io/605876/noise-mask.png) 256px 50% / 256px 256px;-webkit-mask-composite:source-in;mask-composite:intersect;animation:flicker 20s infinite linear}@keyframes flicker{to{-webkit-mask-position:50% 50%,0 50%;mask-position:50% 50%,0 50%}}@keyframes popup2{0%{transform:scale(1.2);filter:grayscale(100%) brightness(0%)}to{transform:scale(1);filter:grayscale(0%) brightness(100%)}}.main_background{transition:all .2s;animation:.35s ease-out popup2}@keyframes sway_profile{0%{transform:rotate(5deg) rotateY(0) scaleX(1)}8%{transform:rotate(2deg) rotateY(90deg) scaleX(.1)}17%{transform:rotate(0) rotateY(180deg) scaleX(1)}26%{transform:rotate(-2deg) rotateY(270deg) scaleX(.1)}35%{transform:rotate(-5deg) rotateY(360deg) scaleX(1)}50%{transform:rotate(5deg) rotateY(360deg) scaleX(1)}65%{transform:rotate(-5deg) rotateY(360deg) scaleX(1)}80%{transform:rotate(5deg) rotateY(360deg) scaleX(1)}90%{transform:rotate(0) rotateY(360deg) scaleX(1)}to{transform:rotate(5deg) rotateY(360deg) scaleX(1)}}.card{cursor:pointer;border:3px solid transparent;border-radius:15px;transition:all .5s;animation:draw-up .5s ease-out}.card:hover{border-color:#fff;transform:translateY(-10px) scale(1.005) rotate(1deg);box-shadow:0 12px 12px #0000001c,0 6px 12px #fff}:root{font-family:Inter,sans-serif;font-feature-settings:"liga" 1,"calt" 1}@supports (font-variation-settings: normal){:root{font-family:InterVariable,sans-serif}}.App{font-family:sans-serif;text-align:center}.card{transition:all .2s;animation:.25s ease-out popup}.card:hover{transform:scale(1.05) rotate(1deg) translateY(-5%);outline-color:#deb91d}.sway{animation:sway 4s infinite;transform-origin:50% 100% 0}@keyframes sway{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes popup{0%{transform:scale(.8) rotate(1deg)}to{transform:scale(1) rotate(0)}}@keyframes quiet{25%{transform:scaleY(.6)}50%{transform:scaleY(.4)}75%{transform:scaleY(.8)}}@keyframes normal{25%{transform:scaleY(1)}50%{transform:scaleY(.4)}75%{transform:scaleY(.6)}}@keyframes loud{25%{transform:scaleY(1)}50%{transform:scaleY(.4)}75%{transform:scaleY(1.2)}}.boxContainer{display:flex;justify-content:space-between;height:64px;--boxSize: 8px;--gutter: 4px;width:calc((var(--boxSize) + var(--gutter)) * 5)}.box{transform:scaleY(.4);height:100%;width:var(--boxSize);background:#1d7bde;animation-duration:1.2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;border-radius:8px}.box1{animation-name:quiet}.box2{animation-name:normal}.box3{animation-name:quiet}.box4{animation-name:loud}.box5{animation-name:quiet}.header_text{transition:all .2s;animation:.25s ease-out popup_header}@keyframes popup_header{0%{transform:scale(0)}to{transform:scale(1)}}