.rgb-animation-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:transparent}.rgb-animation-container .animation-container{padding:0!important;margin:0!important;background-color:transparent!important;border:none!important;display:flex!important;align-items:center!important;justify-content:center!important;height:100%!important;width:100%!important;position:relative!important;overflow:hidden!important}.keyboard-outline{position:relative;width:140px;height:70px;border:1.5px solid rgba(87,205,255,.5);border-radius:6px;background-color:#14141499;overflow:hidden;box-shadow:0 0 20px #57cdff1a,inset 0 0 10px #00000080}.key-grid{position:absolute;top:10px;left:10px;right:10px;bottom:10px;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(3,1fr);gap:3px}.key{position:relative;background-color:#282828cc;border-radius:2px;box-shadow:0 0 2px #0000004d;transition:background-color .2s ease;overflow:hidden}.key:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);background-size:1400% 100%;animation:rgb-wave 8s linear infinite}.key.active:after{opacity:1}@keyframes rgb-wave{0%{background-position:0% 50%}to{background-position:100% 50%}}.key.space{grid-column:span 4}.key.shift,.key.enter{grid-column:span 2}@media (max-width: 768px){.keyboard-outline{width:120px;height:60px}.key-grid{top:8px;left:8px;right:8px;bottom:8px;gap:2px}}
/*# sourceMappingURL=/cdn/shop/t/17/assets/rgb-animation.css.map */