.card{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;max-width:90%;margin:0 auto}.card .item{aspect-ratio:16 / 9;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.item:hover{transform:scale(1);filter:blur(0);opacity:1;box-shadow:0 8px 20px 0 rgb(0 0 0 / .125);background:#FFC107;color:#fff;transform:scale(1.2);transition:all 1s ease-in-out;rotate:0deg}.item svg{width:20px;height:20px;margin-bottom:7px}.item--1{background:#F6F9FC}.item--2{background:#F6F9FC}.item--3{background:#F6F9FC}.item--4{background:#F6F9FC}.quantity{font-size:25px;font-weight:600}.text{font-size:14px;font-family:inherit;font-weight:600}.text--1{color:#000}.text--2{color:#000}.text--3{color:#000}.text--4{color:#000}.main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em}.up{display:flex;flex-direction:row;gap:.5em}.down{display:flex;flex-direction:row;gap:.5em}.card1{width:90px;height:90px;outline:none;border:none;background:#fff;border-radius:90px 5px 5px 5px;box-shadow:rgb(50 50 93 / .25) 0 2px 5px -1px,rgb(0 0 0 / .3) 0 1px 3px -1px;transition:.2s ease-in-out}.instagram{margin-top:1.5em;margin-left:1.2em;fill:#cc39a4}.card5{width:90px;height:90px;outline:none;border:none;background:#fff;border-radius:5px 90px 5px 5px;box-shadow:rgb(50 50 93 / .25) 0 2px 5px -1px,rgb(0 0 0 / .3) 0 1px 3px -1px;transition:.2s ease-in-out}.twitter{margin-top:1.5em;margin-left:-.9em;fill:#03A9F4}.card3{width:90px;height:90px;outline:none;border:none;background:#fff;border-radius:5px 5px 5px 90px;box-shadow:rgb(50 50 93 / .25) 0 2px 5px -1px,rgb(0 0 0 / .3) 0 1px 3px -1px;transition:.2s ease-in-out}.github{margin-top:-.6em;margin-left:1.2em}.card4{width:90px;height:90px;outline:none;border:none;background:#fff;border-radius:5px 5px 90px 5px;box-shadow:rgb(50 50 93 / .25) 0 2px 5px -1px,rgb(0 0 0 / .3) 0 1px 3px -1px;transition:.2s ease-in-out}.discord{margin-top:-.9em;margin-left:-1.2em;fill:#8c9eff}.card1:hover{cursor:pointer;scale:1.1;background-color:#cc39a4}.card1:hover .instagram{fill:#fff}.card2:hover{cursor:pointer;scale:1.1;background-color:#03A9F4}.card2:hover .twitter{fill:#fff}.card3:hover{cursor:pointer;scale:1.1;background-color:#000}.card3:hover .github{fill:#fff}.card4:hover{cursor:pointer;scale:1.1;background-color:#8c9eff}.card4:hover .discord{fill:#fff}.cardq{overflow:visible;width:100%;height:var(--card-height,520px);margin-bottom:1.5em}.content{width:100%;height:100%;box-shadow:0 0 10px 1px #000e;border-radius:5px;position:relative}.front,.back{background-color:#151515;position:absolute;width:100%;height:100%;border-radius:5px;overflow:hidden}.back{display:flex;justify-content:center;align-items:center;z-index:1}.back::before{position:absolute;content:'';display:block;width:160px;height:160%;background:linear-gradient(90deg,transparent,#ff9966,transparent);animation:rotation 5000ms infinite linear}.back-content{position:absolute;width:99%;height:99%;background:#151515;border-radius:5px;color:#fff;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:10px;text-align:center;padding-top:20px;z-index:0}.back-content h2{color:#fff;margin-bottom:5px}.description-text{color:#fff;text-align:center;font-weight:700;font-size:16px;position:absolute;bottom:120px}.cta-button{display:inline-block;background:#fff;color:#151515;text-align:center;font-size:18px;font-weight:700;padding:10px 20px;border-radius:25px;text-decoration:none;box-shadow:0 4px 6px rgb(0 0 0 / .3);transition:background-color .3s,color .3s;position:absolute;bottom:50px}.front .front-content{position:absolute;width:100%;height:100%;padding:10px;display:flex;flex-direction:column;justify-content:space-between}.front-content .badge{background-color:#0005;padding:2px 10px;border-radius:10px;backdrop-filter:blur(2px)}.description{box-shadow:0 0 10px 5px #0008;width:100%;padding:10px;background-color:#0009;backdrop-filter:blur(5px);border-radius:5px}.cardq-footer{color:#fff8;font-size:8px}.front .img{position:absolute;width:100%;height:100%;overflow:hidden}.front .img img{width:100%;height:100%;object-fit:cover;object-position:center}.circle{width:90px;height:90px;border-radius:50%;background-color:#fb6;position:relative;filter:blur(15px);animation:floating 2600ms infinite linear}#bottom{background-color:#f86;left:50px;top:0;width:150px;height:150px;animation-delay:-800ms}#right{background-color:#f23;left:160px;top:-80px;width:30px;height:30px;animation-delay:-1800ms}@keyframes floating{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}@keyframes rotation{0%{transform:rotateZ(0deg)}100%{transform:rotateZ(360deg)}}