@keyframes dropAndShift{0%{transform:translate(0px,15px)}16.67%{transform:translate(80px,13px)}33.34%{transform:translate(40px,10px)}50.01%{transform:translate(40px,-30px)}66.68%{transform:translate(40px,55px)}83.35%{transform:translate(40px,10px)}100%{transform:translate(0px,15px)}}@keyframes bubbleGlint{0%{top:3px;left:4px;opacity:0}8.335%{top:6px;left:6px;opacity:0.5}16.67%{top:3px;left:4px;opacity:0}33.34%{top:3px;left:4px;opacity:0.5}50.01%{top:3px;left:4px;opacity:0}58.345%{top:6px;left:6px;opacity:0.5}66.68%{top:3px;left:4px;opacity:0}83.35%{top:6px;left:6px;opacity:0.5}100%{top:3px;left:4px;opacity:0}}.Strich1{position:absolute;width:130px;height:50px;background:#000;border-radius:25px;transform:rotate(45deg);box-shadow:0 4px 10px rgba(0,0,0,0.4);z-index:0}.Strich2{position:absolute;width:130px;height:50px;background:#000;border-radius:25px;transform:rotate(-90deg);box-shadow:0 4px 10px rgba(0,0,0,0.4);z-index:0}.bubble{position:absolute;top:0;left:15px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffb3c1,#e64980,#ff8787);animation:dropAndShift 5s ease-in-out infinite;z-index:1}.bubble1{position:absolute;top:0;width:20px;height:20px;background:radial-gradient(circle at 30% 30%,#edb3ff,#ac49e6,#fb87ff);border-radius:50%;left:8px;animation:dropAndShift 6s ease-in-out infinite;z-index:2}.bubble2{position:absolute;top:0;width:20px;height:20px;background:radial-gradient(circle at 30% 30%,#b3d8ff,#4963e6,#87a7ff);border-radius:50%;left:12px;animation:dropAndShift 4s ease-in-out infinite;z-index:3}.bubble3{position:absolute;top:0;width:20px;height:20px;background:radial-gradient(circle at 30% 30%,#b3ffbc,#35a32f,#75ba61);border-radius:50%;left:10px;animation:dropAndShift 7s ease-in-out infinite;z-index:4}.card{width:300px;height:400px;margin:0 auto;background-color:#24233b;border-radius:8px;z-index:1;box-shadow:0px 10px 10px rgb(73,70,92);transition:0.5s}.card:hover{transform:translateY(-7px);box-shadow:0px 10px 10px black}.top{display:flex;align-items:center;padding-left:10px}.circle{padding:0 4px}.circle2{display:inline-block;align-items:center;width:10px;height:10px;padding:1px;border-radius:5px}.red{background-color:#ff605c}.yellow{background-color:#ffbd44}.green{background-color:#00ca4e}.header{margin:5px;margin-top:5px;border-radius:5px}#title2{color:white;padding-left:50px;font-size:15px}.code-container{text-align:center}#code{width:270px;height:350px;resize:none;background-color:rgb(73,70,92);border-radius:5px;border:none;color:white;padding:10px}#code:focus{outline:none !important}.wrapper{width:100%;height:100%;position:relative;text-align:center;display:flex;align-items:center;justify-content:center;overflow:hidden}.inner{--w:100px;--h:150px;--translateZ:calc((var(--w) + var(--h)) + 0px);--rotateX:-15deg;--perspective:1000px;position:absolute;width:var(--w);height:var(--h);top:25%;left:calc(50% - (var(--w) / 2) - 2.5px);z-index:2;transform-style:preserve-3d;transform:perspective(var(--perspective));animation:rotating 20s linear infinite}@keyframes rotating{from{transform:perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(0)}to{transform:perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(1turn)}}.card{position:absolute;border:2px solid rgba(var(--color-card));border-radius:12px;overflow:hidden;inset:0;transform:rotateY(calc((360deg / var(--quantity)) * var(--index))) translateZ(var(--translateZ))}.img{width:100%;height:100%;object-fit:cover;background:#0000 radial-gradient(circle,rgba(var(--color-card),0.2) 0%,rgba(var(--color-card),0.6) 80%,rgba(var(--color-card),0.9) 100%)}