@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=M+PLUS+Rounded+1c:wght@400;500&display=swap");*,:after,:before{margin:0;padding:0;box-sizing:border-box}.container{position:absolute;top:0;left:0;bottom:0;right:0;display:grid;place-items:center;background-color:var(--color-primary)}.app{display:grid;grid-template-areas:"header buttons" "drumMachine drumMachine";grid-gap:1rem;padding:1rem 2rem;box-shadow:1px 1px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);border-radius:4px;background-color:var(--color-primary-light-1)}@media (min-width:768px){.app{grid-template-areas:"buttons drumMachine" "header drumMachine"}}.app__header{display:grid;justify-content:start;grid-area:header}@media (min-width:768px){.app__header{grid-template-columns:max-content max-content}}.app__title{font-size:2rem;line-height:1;text-transform:uppercase}@media (min-width:768px){.app__title{writing-mode:vertical-lr;transform:rotate(180deg)}}.app__version{margin-left:.2rem;font-size:.8rem;font-weight:400;line-height:1}@media (min-width:768px){.app__version{writing-mode:vertical-lr;transform:rotate(180deg)}}.app__buttons{display:grid;grid-area:buttons;grid-template-columns:auto auto;justify-content:end}.button{width:2.4rem;height:2.4rem;color:var(--color-primary);border:none;border-radius:4px;background-color:var(--color-secondary)}.button:not(:first-child){margin-left:.5rem}.button:hover{cursor:pointer}.button:focus-visible{outline:none}.button--back{color:var(--color-secondary);border:none;background-color:var(--color-primary-light-1)}.drumMachine{display:grid;grid-area:drumMachine;grid-template-areas:"display" "pads" "volume";grid-row-gap:.9rem;margin-top:.6rem}@media (min-width:768px){.drumMachine{margin-top:0}}.drumMachine__drum-pads{display:grid;grid-area:pads;grid-template-areas:"pad-1 pad-2 pad-4 pad-5 pad-7 pad-8" "pad-3 pad-3 pad-6 pad-6 pad-9 pad-9";grid-template-rows:2fr 1fr;grid-gap:.5rem}.display{display:grid;grid-area:display;align-content:center;justify-content:center;height:5rem;font-size:1.2rem;font-weight:500;background-color:var(--color-primary-light-2);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.pad{display:grid;padding:.7rem;font-family:JetBrains mono,monospace;color:var(--color-secondary);border:2px solid var(--color-secondary);border-radius:4rem;background-color:var(--color-primary-light-1)}.pad:hover{cursor:pointer}.pad:focus-visible{outline:none}.pad:first-child{grid-area:pad-1}.pad:nth-child(2){grid-area:pad-2}.pad:nth-child(3){grid-area:pad-3}.pad:nth-child(4){grid-area:pad-4}.pad:nth-child(5){grid-area:pad-5}.pad:nth-child(6){grid-area:pad-6}.pad:nth-child(7){grid-area:pad-7}.pad:nth-child(8){grid-area:pad-8}.pad:nth-child(9){grid-area:pad-9}.volumeSlider{grid-area:volume;height:24px;width:100%;background-color:transparent;-webkit-appearance:none}.volumeSlider:focus{outline:none}.volumeSlider::-webkit-slider-runnable-track{width:100%;height:1rem;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);background:var(--color-primary-light-2);border-radius:1rem;border:0}.volumeSlider::-webkit-slider-thumb{box-shadow:0;border:2px solid var(--color-secondary);height:1rem;width:1rem;border-radius:50%;background:var(--color-primary-light-1);cursor:pointer;-webkit-appearance:none}.volumeSlider::-moz-range-track{width:100%;height:1rem;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);background:var(--color-primary-light-2);border-radius:1rem}.volumeSlider::-moz-range-thumb{box-shadow:0;border:2px solid var(--color-secondary);height:1rem;width:1rem;border-radius:50%;background:var(--color-primary-light-1);cursor:pointer}.volumeSlider::-ms-track{width:100%;height:1rem;cursor:pointer;background:transparent;border-color:transparent;color:transparent}.volumeSlider::-ms-fill-lower,.volumeSlider::-ms-fill-upper{background:var(--color-primary-light-1);border-radius:30px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.volumeSlider::-ms-thumb{margin-top:1px;box-shadow:0;height:1rem;width:1rem;border-radius:50%;background:var(--color-primary-light-1);cursor:pointer}.volumeSlider:focus::-ms-fill-lower,.volumeSlider:focus::-ms-fill-upper,.volumeSlider:focus::-webkit-slider-runnable-track{background:var(--color-primary-light-1)}.backdrop{position:absolute;top:0;left:0;bottom:0;right:0;background-color:rgba(0,0,0,.5)}.backdrop:hover{cursor:pointer}.theme{position:relative;display:grid;justify-self:center;background-color:var(--color-primary)}.theme,.theme:after,.theme:before{height:2rem;width:2rem;border-radius:50%}.theme:after,.theme:before{position:absolute;top:0;z-index:-1;content:""}.theme:before{right:.75rem;background-color:var(--color-primary-light-1)}.theme:after{left:.75rem;background-color:var(--color-secondary)}.theme--light{--color-primary:#1dd75e;--color-primary-light-1:#43e57b;--color-primary-light-2:#6feb9b;--color-secondary:#fff}.theme--dark{--color-primary:#191414;--color-primary-light-1:#362b2b;--color-primary-light-2:#524242;--color-secondary:#1db954}.theme--mango{--color-primary:#ff8400;--color-primary-light-1:#ffa600;--color-primary-light-2:#ffc524;--color-secondary:#027e7e}.theme--chill{--color-primary:#702dbe;--color-primary-light-1:#a561cc;--color-primary-light-2:#b7d9eb;--color-secondary:#b7faf8}.theme__name{margin-top:.5rem;text-transform:capitalize;font-style:normal}.modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:23.4375rem;width:19.375rem;padding:1rem 1.2rem;background-color:var(--color-primary);border-radius:4px}@media (min-width:768px){.modal{height:18.75rem;width:25.625rem}}.modal__header{display:grid;grid-template-columns:1fr auto}.modal__title{display:grid;align-content:center;font-size:1.1em}.modal__theme-content{display:grid;grid-template-columns:1fr 1fr;grid-row-gap:1rem;margin-top:2rem}@media (min-width:768px){.modal__theme-content{grid-template-columns:1fr 1fr 1fr 1fr}}.modal__theme-item{display:grid;place-content:center}.modal__instruction-content *{margin-top:.6rem}.modal__sub-title{font-size:.9rem}.modal__list{padding-left:1rem;font-size:.7rem;list-style-type:circle}.modal__highlight{font-weight:500;text-transform:uppercase}body{font-family:M PLUS Rounded\ 1c,sans-serif;font-size:16px;letter-spacing:1px;color:var(--color-secondary)}body,body[data-theme=light]{--color-primary:#1dd75e;--color-primary-light-1:#43e57b;--color-primary-light-2:#6feb9b;--color-secondary:#fff}body[data-theme=dark]{--color-primary:#191414;--color-primary-light-1:#362b2b;--color-primary-light-2:#524242;--color-secondary:#1db954}body[data-theme=mango]{--color-primary:#ff8400;--color-primary-light-1:#ffa600;--color-primary-light-2:#ffc524;--color-secondary:#027e7e}body[data-theme=chill]{--color-primary:#702dbe;--color-primary-light-1:#a561cc;--color-primary-light-2:#b7d9eb;--color-secondary:#b7faf8}
/*# sourceMappingURL=style.15f1aa0c.css.map */