@import url(https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap);body{align-items:center;background-color:#0a0a0a;color:#eee;display:flex;font-family:Roboto Mono,monospace;justify-content:center;margin:0;min-height:100vh;text-align:center}.App{max-width:600px;padding:20px;width:100%}h1{color:#fff;font-size:2rem;font-weight:700;letter-spacing:5px;margin-bottom:40px;text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 5px var(--glow-color);text-transform:uppercase}.chord-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(4,1fr);margin:0 auto}.chord{align-items:center;aspect-ratio:1/1;background-color:#1a1a1a;border:2px solid #2a2a2a;border-radius:8px;box-shadow:0 0 5px #00000080,inset 0 0 4px #000;color:#aaa;cursor:pointer;display:flex;font-size:1.1rem;font-weight:700;justify-content:center;position:relative;transition:all .1s ease-in-out;-webkit-user-select:none;user-select:none}.chord:before{border:2px solid var(--glow-color);border-radius:10px;bottom:-4px;content:"";left:-4px;opacity:.3;position:absolute;right:-4px;top:-4px;transition:opacity .2s ease-in-out}.chord:hover:before{opacity:.7}.chord-active{background-color:var(--glow-color);box-shadow:0 0 15px var(--glow-color),0 0 25px var(--glow-color),0 0 35px var(--glow-color),inset 0 0 5px #fff;color:#000;transform:scale(1.05)}.chord-active:before{opacity:1}
/*# sourceMappingURL=main.6d8af4a1.css.map*/