body { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; } ::-webkit-scrollbar { display: none; } .radio-player { position: relative; top: -140px; left:100px; width:190px; display: flex; align-items: center; gap: 0px; background: none; padding: 5px; } .btn { width: 38px; height: 38x; border: none; background: none; cursor: pointer; } .btn svg { fill: #a55066; /* Color rosa */ } .volume-bar { display: flex; align-items: center; gap: 1.3px; cursor: pointer; } .volume-bar div { width: 5px; height: 10px; background-color: #a55066; /* Color rosa */ opacity: 0.5; transition: opacity 0.2s; cursor: pointer; } .volume-bar div.active { opacity: 1; } .container { position:absolute; margin:0 auto; width:250px; height:500px; background-image:url(https://i.postimg.cc/2y36hg4W/NBG.png); } @keyframes flicker { 0% { opacity: 1; } 4% { opacity: 0.1; } 6% { opacity: 1; } 7% { opacity: 0.1; } 9% { opacity: 1; } 9% { opacity: 0.1; } 10% { opacity: 1; } 98% { opacity: 1; } 100% { opacity: 1; } } #C1 { animation: flicker 5s infinite 1s step-end; } #C2 { animation: flicker 10s infinite 1s step-end; } #C3 { animation: flicker 15s infinite 1s step-end; } #C4 { animation: flicker 20s infinite 1s step-end; } #CON { animation: flicker 10s infinite 1s step-end; } #DRON { animation: flicker 5s infinite 1s step-end; } #N1 { animation: flicker 5s infinite 1s step-end; } #N2 { animation: flicker 10s infinite 1s step-end; } #N3 { animation: flicker 15s infinite 1s step-end; } #NOTESON { animation: flicker 20s infinite 1s step-end; } #NOTESON { animation: flicker 25s infinite 1s step-end; } #0 { animation: flicker 0.5s infinite 1s step-end; } #0{ animation: flicker 2s infinite 1s step-end; } .emoji-float div { position: relative; top: -400px; left:170px; transform: translate(-10%, 10vh); color: #ffdbe4; } @keyframes bubbleUp { 100% { transform: translate(-50%, -10vh); } } @keyframes floater { 0% { transform: translateY(0%) translateX(0); opacity: 1; } 20% { transform: translateY(-20%) translateX(14px); } 40% { transform: translateY(-40%) translateX(-14px); } 60% { transform: translateY(-20%) translateX(12px); opacity: 1; } 80% { transform: translateY(0%) translateX(-12px); } 90% { opacity: 1; } 100% { transform: translateY(0) translateX(0); opacity: 0; } } @keyframes floater2 { 0% { transform: translateY(100%) translateX(20px); opacity: 1; } 20% { transform: translateY(40%) translateX(40px); } 60% { transform: translateY(10%) translateX(80px); opacity: 1; } 80% { transform: translateY(-80%) translateX(80px); } 100% { transform: translateY(0) translateX(180px); opacity: 0; } } @keyframes floater3 { 0% { transform: translateY(100%) translateX(-40px); opacity: 1; } 20% { transform: translateY(40%) translateX(-80px); } 60% { transform: translateY(10%) translateX(-120px); opacity: 1; } 80% { transform: translateY(-80%) translateX(-100px); } 100% { transform: translateY(0) translateX(-120px); opacity: 0; } } .emoji { animation-name: bubbleUp; animation-timing-function: linear; animation-fill-mode: both; animation-duration: 10s; animation-iteration-count: infinite; } .emoji-4 { animation-name: bubbleUp; animation-duration: 10; animation-iteration-count: infinite; } .emoji-1 { animation-delay: 0.2s; } .emoji-2 { animation-name: floater2; animation-delay: 0.2s; animation-duration: 10s; animation-iteration-count: infinite; } .emoji-3 { animation-name: floater3; animation-delay: 0.2s; animation-duration: 10s; animation-iteration-count: infinite; }