body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}@font-face{font-family:"digital";src:url(/FCC-Drum-Machine/static/media/digital-7.regular.93911ab1.ttf) format("truetype")}body{margin:0;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;width:100vw;height:100vh;overflow:hidden;background:linear-gradient(45deg,#ef5777,#ffd32a,#0be881)}#root{width:90vw;height:90vh}#drum-machine{display:grid;position:relative;grid-template-columns:30% 40% 30%;grid-template-rows:1.3fr 4fr;grid-row-gap:20px;grid-template-areas:"none displayarea options" "buttons buttons buttons";width:100%;height:100%;border-radius:5px;background-color:#485460;text-align:center;justify-items:center;-webkit-align-items:center;align-items:center;box-shadow:0 19px 38px rgba(0,0,0,.3),0 15px 12px rgba(0,0,0,.22)}#display{grid-area:displayarea;width:90%;background-color:#1c2733;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);padding:10px;border:2px solid #c8d6e5;border-radius:5px}#display-text{font-size:40px;font-family:digital;color:#e74c3c}#options{grid-area:options;background-color:#2c3e50;justify-self:end;align-self:start;box-shadow:0 14px 28px rgba(0,0,0,.1),0 10px 10px rgba(0,0,0,.09)}#options:hover{cursor:pointer}#optionsdropdown{grid-area:options}#db-wrapper{grid-area:buttons;align-self:start;display:grid;grid-template-columns:1fr 1fr 1fr;width:90%;justify-items:center;-webkit-align-items:center;align-items:center}.drum-pad{width:90%;height:70px;box-shadow:0 19px 38px rgba(0,0,0,.3),0 15px 12px rgba(0,0,0,.22);margin:15px;border-radius:10px;border:none;padding:0;background:#009432;outline-offset:4px}@media (max-width:768px){.drum-pad{margin:10px 5px}}.drum-pad:focus:not(:focus-visible){outline:none}.drum-pad>*{pointer-events:none}.front{width:100%;height:100%;background:#0be881;font-size:20px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;border-radius:10px;will-change:transform;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;-webkit-transform:translateY(-6px);transform:translateY(-6px)}.drum-pad:hover .front{-webkit-transform:translateY(-8px);transform:translateY(-8px)}.drum-pad:active .front{-webkit-transform:translateY(-2px);transform:translateY(-2px)}button{cursor:pointer}@media (max-width:1300px){#optionsdropdown{position:absolute;grid-column:full}#display{grid-column-start:none;grid-column-end:displayarea;margin:10px 0 0 10%;height:70%;width:90%;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}}@media (max-width:400px){#display-text{font-size:30px}}.switch{position:relative;display:inline-block;width:60px;height:34px;margin:0 5px}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff}input:checked+.slider{background-color:#2196f3}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{-webkit-transform:translateX(26px);transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}
/*# sourceMappingURL=main.e4185a3a.chunk.css.map */