Mattral/text-behind-video

1@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Anton&family=Archivo+Black&family=Bangers&family=Barlow+Condensed:wght@700&family=Bebas+Neue&family=Black+Ops+One&family=Bungee&family=Caveat:wght@700&family=Chakra+Petch:wght@700&family=Cinzel:wght@900&family=Cormorant+Garamond:wght@700&family=DM+Serif+Display&family=Dancing+Script:wght@700&family=Exo+2:wght@900&family=Fjalla+One&family=Fredoka:wght@700&family=Great+Vibes&family=Lobster&family=Lora:wght@700&family=Luckiest+Guy&family=Michroma&family=Monoton&family=Montserrat:wght@900&family=Orbitron:wght@900&family=Oswald:wght@700&family=Pacifico&family=Passion+One&family=Permanent+Marker&family=Playfair+Display:wght@900&family=Poppins:wght@900&family=Press+Start+2P&family=Rajdhani:wght@700&family=Raleway:wght@900&family=Righteous&family=Rubik+Mono+One&family=Russo+One&family=Sacramento&family=Satisfy&family=Silkscreen&family=Sora:wght@800&family=Space+Grotesk:wght@700&family=Teko:wght@700&family=Titan+One&family=Ultra&display=swap");2@import "tailwindcss";3 4.glass-panel {5  background: rgba(10, 10, 20, 0.72);6  backdrop-filter: blur(20px);7  -webkit-backdrop-filter: blur(20px);8  border: 1px solid rgba(255, 255, 255, 0.08);9  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);10}11.glass-btn {12  background: rgba(255, 255, 255, 0.05);13  border: 1px solid rgba(255, 255, 255, 0.06);14  transition:15    background 0.2s,16    border-color 0.2s;17}18.glass-btn:hover:not(:disabled) {19  background: rgba(255, 255, 255, 0.12);20  border-color: rgba(255, 255, 255, 0.15);21}22.glass-btn:disabled {23  opacity: 0.3;24  cursor: not-allowed;25}26.tool-active {27  background: rgba(139, 92, 246, 0.2) !important;28  box-shadow: inset 0 0 0 1.5px #8b5cf6 !important;29}30input[type="range"] {31  appearance: none;32  -webkit-appearance: none;33  width: 100%;34  background: transparent;35}36input[type="range"]::-webkit-slider-thumb {37  -webkit-appearance: none;38  height: 14px;39  width: 14px;40  border-radius: 50%;41  background: #a78bfa;42  cursor: pointer;43  margin-top: -5px;44  box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);45}46input[type="range"]::-webkit-slider-runnable-track {47  height: 4px;48  background: rgba(255, 255, 255, 0.15);49  border-radius: 2px;50}51.scrubber::-webkit-slider-runnable-track {52  height: 5px;53  background: rgba(255, 255, 255, 0.2);54}55.scrubber::-webkit-slider-thumb {56  height: 18px;57  width: 18px;58  margin-top: -7px;59  background: #fff;60  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);61}62.panel-scroll::-webkit-scrollbar {63  width: 4px;64}65.panel-scroll::-webkit-scrollbar-track {66  background: transparent;67}68.panel-scroll::-webkit-scrollbar-thumb {69  background: rgba(255, 255, 255, 0.12);70  border-radius: 10px;71}72