body{background-color:#1e232e;background-color:var(--bg);box-sizing:border-box;margin:0;padding:0;scroll-behavior:smooth}:root{--bg:#1e232e;--white:#cac7d8;--bright:#e09d20;--accent:#a31849;--blue:#2ccece;--dark:#0c0e13;--click:#fcf4b0;--ff-h1:"Audiowide",cursive;--ff-h2:"Orbitron",sans-serif;--ff-h3:"Press Start 2P",cursive;--fs-h1:4.3rem;--fs-h2:3.2rem;--fs-h3:2rem;--fw-h1:600;--fw-h2:400}#drum-machine{align-items:center;flex-direction:column;height:100vh}#drum-machine,.drum-pad__container{display:flex;justify-content:center}.drum-pad__container{flex-wrap:wrap;width:400px}.drum-pad{align-items:center;background-color:#cac7d8;background-color:var(--white);border-radius:5px;box-shadow:5px 4px 4px #000;color:#0c0e13;color:var(--dark);display:flex;font-family:Orbitron,sans-serif;font-family:var(--ff-h2);font-size:3.2rem;font-size:var(--fs-h2);font-weight:600;font-weight:var(--fw-h1);height:5rem;justify-content:center;margin:.3rem;padding:1rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:5rem}.drum-pad:hover{cursor:pointer}.drum-pad:active{background-color:#fcf4b0;background-color:var(--click);box-shadow:0 0 3px 3px #e09d20;box-shadow:0 0 3px 3px var(--bright)}header h1{color:#e09d20;color:var(--bright);font-family:Audiowide,cursive;font-family:var(--ff-h1);font-size:4.3rem;font-size:var(--fs-h1);margin:0;text-align:center}#display h2{color:#2ccece;color:var(--blue);font-family:Orbitron,sans-serif;font-family:var(--ff-h2);font-size:3.2rem;font-size:var(--fs-h2);text-align:center}#display h3{color:#a31849;color:var(--accent);font-family:Press Start\ 2P,cursive;font-family:var(--ff-h3);font-size:2rem;font-size:var(--fs-h3);margin:0;text-align:center}.audio-name__container{background-color:#c6cf98;border-radius:4px;box-shadow:inset 3px 3px 3px #000;margin-bottom:1.5rem;padding:1.5rem;width:400px}.keypress{background-color:#fcf4b0;background-color:var(--click);box-shadow:0 0 3px 3px #e09d20;box-shadow:0 0 3px 3px var(--bright)}@media (max-width:480px){:root{--fs-h1:3.8rem;--fs-h2:2.5rem;--fs-h3:1.5rem}.drum-pad__container{width:300px}.drum-pad{height:4.5rem;padding:.5rem;width:4.5rem}.audio-name__container{margin-bottom:1.5rem;padding:1.5rem;width:300px}}
/*# sourceMappingURL=main.f5aca0b7.css.map*/