html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}.slider-dropdown-container{display:flex;justify-content:space-between;align-items:center;margin:auto;margin-top:10px;margin-bottom:10px;width:1000px}.slider-container{position:relative;display:flex;justify-content:center;align-items:center;background-color:#007f4f;border:1px solid #000;border-radius:30px 10px 30px 10px;height:50px;width:40%;text-align:center}.slider-container #slider{appearance:none;background-color:#000;border-radius:5px;height:4px;width:80%;line-height:2}.slider-container #slider::-webkit-slider-thumb{position:relative;appearance:none;background-color:#000;border-radius:10px;height:23px;width:10px;cursor:pointer}.slider-container #slider::-webkit-slider-thumb:hover{border:solid .5px #f0f8ff}.slider-container #val{font-weight:600;font-family:monospace;font-size:18px}.tempo span{position:absolute;left:36%;top:-14px;background-color:#faebd7;border-radius:10px;border:1px solid #000;padding:1px 8px 1px 8px;font-family:monospace;font-size:18px;font-weight:600;box-shadow:2px 2px 2px #000;height:20px;width:100px}.dropdown-container{position:relative}.drum-kits-btn{background-color:#007f4f;border-radius:10px 30px 10px 30px;border:1px solid #000;font-size:22px;font-weight:600;font-family:monospace;height:50px;width:160px;text-align:center;cursor:pointer;box-shadow:#0b0b0b 1px 1px 1px 1px}.drum-kits-btn:hover{background-color:#006a41}.drum-kits-btn:focus{box-shadow:none}.dropdown-menu{display:flex;left:-135px;top:-5px;justify-content:center;align-items:left;flex-direction:column;position:absolute;background-color:#faebd7;padding:2px;border-radius:5px;box-shadow:0 2px 5px 0;opacity:0;width:80%;margin-top:5px;z-index:2}.dropdown-menu button{appearance:none;background:none;color:inherit;border:none;font:inherit;text-decoration:underline;cursor:pointer;outline:inherit;color:#000;font-family:monospace;font-weight:600;font-size:14px;padding:3px;z-index:3}.dropdown-menu button:hover{color:#909090;font-size:16px}.dropdown-container>.drum-kits-btn:focus+.dropdown-menu{opacity:1}.audio-visualizer{height:80px;width:1000px;margin:auto;margin-top:5px;background-color:#101357;border:1px solid #000;border-radius:5px;overflow:hidden}.audio-visualizer canvas{width:100%;height:100%}.sequence-grid{margin:auto;display:flex;justify-content:center;align-items:center;flex-direction:column;border:solid 1px #000;border-radius:5px;width:1000px;padding:1.5rem;background-color:#fbaf08;position:relative}.border{display:flex;justify-content:center;align-items:center;width:25%;height:100%;border-right:#000 1px solid}.kick-row{display:flex;justify-content:center;align-items:center;background-color:#00a0a0;width:991px;height:40px;border-radius:5px 5px 0 0}.kick-row .border:last-of-type{border:none}.snare-row{display:flex;justify-content:center;align-items:center;background-color:#aeaeae;width:991px;height:40px;position:relative}.snare-row .border:last-of-type{border:none}.hi-hat-row{display:flex;justify-content:center;align-items:center;background-color:#2a9b75;width:991px;height:40px}.hi-hat-row .border:last-of-type{border:none}.tom-row{display:flex;justify-content:center;align-items:center;background-color:#874fb5;width:991px;height:40px}.tom-row .border:last-of-type{border:none}.clap-row{display:flex;justify-content:center;align-items:center;background-color:#aeaeae;width:991px;height:40px}.clap-row .border:last-of-type{border:none}.crash-row{display:flex;justify-content:center;align-items:center;background-color:#00a0a0;width:991px;height:40px;border-radius:0 0 5px 5px}.crash-row .border:last-of-type{border:none}.inst-icon{height:30px;width:30px;margin-left:5px}input[type=checkbox]{appearance:none;width:20px;height:30px;border:1px solid #000;border-radius:9px;cursor:pointer;transition:border-color .08s ease,background-color .1s ease,box-shadow .1s ease}.kick-checkbox-label{display:flex;justify-content:center;align-items:center}.kick-checkbox-label input:checked{background-color:#fbaf08}.kick-checkbox-label input:hover{background-color:#ffe4ab}.kick-checkbox-label input:checked:hover{background-color:#fbaf08;box-shadow:0 0 .25em 0 #fff}.snare-checkbox-label input:checked{background-color:#874fb5}.snare-checkbox-label input:hover{background-color:#9f86b3}.snare-checkbox-label input:checked:hover{background-color:#874fb5;box-shadow:0 0 .25em 0 #fff}.hi-hat-checkbox-label input:checked{background-color:#faebd7}.hi-hat-checkbox-label input:hover{background-color:#ffe2bd}.hi-hat-checkbox-label input:checked:hover{background-color:#faebd7;box-shadow:0 0 .25em 0 #fff}.tom-checkbox-label input:checked{background-color:#fbaf08}.tom-checkbox-label input:hover{background-color:#ffe4ab}.tom-checkbox-label input:checked:hover{background-color:#fbaf08;box-shadow:0 0 .25em 0 #fff}.clap-checkbox-label input:checked{background-color:#874fb5}.clap-checkbox-label input:hover{background-color:#9f86b3}.clap-checkbox-label input:checked:hover{background-color:#874fb5;box-shadow:0 0 .25em 0 #fff}.crash-checkbox-label input:checked{background-color:#fbaf08}.crash-checkbox-label input:hover{background-color:#ffe4ab}.crash-checkbox-label input:checked:hover{background-color:#fbaf08;box-shadow:0 0 .25em 0 #fff}input[type=checkbox].current-pos{border:#faebd7 2px solid;box-shadow:0 0 6px 1px rgba(255,255,255,.5)}#current-kit{position:absolute;background-color:#faebd7;border:solid #000 1px;border-radius:10px;padding:2px 8px 2px 8px;top:-15px;font-size:20px;font-family:monospace;font-weight:600;height:20px;width:150px;text-align:center;box-shadow:2px 2px 2px #000}.playback-controls{display:flex;justify-content:space-between;align-items:center;margin:auto;margin-top:10px;width:1000px;position:relative}#container{display:flex;justify-content:center;align-items:center;margin:auto;margin-top:10px;margin-bottom:20px}.play-pause,.restart,.reset{display:flex;justify-content:center;align-items:center;height:40px;background-color:#007f4f;border-radius:5px;cursor:pointer;transition:background-color .15s ease}.play-pause:hover,.restart:hover,.reset:hover{background-color:#006a41}.reset{font-family:monospace;font-weight:600;font-size:20px}.play-pause img{width:35px}.restart img{width:32px}.bot-btns{display:flex}.vol-slider-cont{right:0;border-radius:5px;display:flex;justify-content:center;align-items:center;background-color:#007f4f;border:1px solid #000;height:30px;width:200px;text-align:center;padding:3px}.vol-slider-cont #vol-slider{appearance:none;background-color:#000;border-radius:5px;height:4px;width:80%;line-height:2}.vol-slider-cont #vol-slider::-webkit-slider-thumb{position:relative;appearance:none;background-color:#000;border-radius:10px;height:23px;width:10px;cursor:pointer}.vol-slider-cont #vol-slider::-webkit-slider-thumb:hover{border:solid .5px #f0f8ff}.vol-slider-cont img{padding:5px;width:27px}#vol-icon{cursor:pointer;transition:width .15s ease}#vol-icon:hover{width:32px}.vol-slider-cont div{display:flex;justify-content:center;align-items:center}.vol-icon-cont{height:30px;width:30px}.-container{position:relative;transform:translateX(-395px) translateY(-21px)}#instructions-btn{border-radius:5px;display:flex;justify-content:center;align-items:center;background-color:#007f4f;border:1px solid #000;height:40px;width:165px;text-align:center;padding:8px;font-family:monospace;font-weight:600;font-size:20px;z-index:10;cursor:pointer;box-shadow:#0b0b0b 1px 1px 1px 1px}#instructions-btn:hover{background-color:#006a41}#instructions-btn:focus{box-shadow:none}.dropdown-menu-2{display:flex;justify-content:center;position:relative;width:0px;height:0px;z-index:2}.dropdown-menu-2>*{z-index:-3}.dropdown-menu-2 button{appearance:none;background:none;color:inherit;border:none;font:inherit;text-decoration:underline;cursor:pointer;outline:inherit;color:#000;font-family:monospace;font-weight:600;font-size:14px;padding:3px;z-index:3}.dropdown-menu-2 button:hover{color:#909090;font-size:16px}.instructions-container>.instructions-btn:focus+.dropdown-menu-2{opacity:1}.links-container{display:flex;justify-content:space-between;align-items:center;height:80%;border-radius:10px;padding:10px;position:relative;background-color:#00a0a0;flex-direction:column}.links-container a{margin-left:.5rem;margin-right:.5rem;text-decoration:none;color:#000}.links-container a:hover .link{transform:scale(1.1)}.links-container .link{font-size:30px}.links-container .fa-user{font-size:25px}.links-container .fa-user:hover{transform:scale(1.2)}.inst{display:none;background-color:#faebd7;border:1px solid #000;border-radius:10px;padding:8px;width:225px;font-family:monospace;font-weight:600;font-size:16px;z-index:1}body.show-instructions .inst{display:flex}body.show-instructions .keyboard-key{display:flex}.tempo-inst{top:-640px;right:-219px;width:200px;position:absolute}.kits-inst{top:-625px;right:-1000px;position:absolute}.volume-inst{right:-1002px;top:3px;position:absolute}.grid-inst{top:-480px;right:-625px;position:absolute;flex-direction:column}.close-inst{position:absolute;right:-160px;top:3px;width:137px}.piano-sound-selector{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:.5rem}.piano-sound-selector label{font-family:monospace;font-size:16px;font-weight:600}.piano-sound-selector select{appearance:none;background-color:#007f4f;color:inherit;border:1px solid #000;border-radius:6px;font-family:monospace;font-size:14px;font-weight:600;padding:4px 24px 4px 10px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23000'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.piano-sound-selector select:hover{background-color:#006a41}.piano-sound-selector select:focus{outline:2px solid #fbaf08;outline-offset:1px}.piano *{box-sizing:border-box}.piano{display:flex;justify-content:center;margin-top:.5rem;position:relative;border-top:5px solid #000}.key{height:calc(var(--width)*3);width:var(--width);cursor:pointer;display:flex;justify-content:center;align-items:flex-end}.white{--width: 50px;background-color:#fff;border:1px solid #333;border-radius:0 0px 5px 5px;transition:background-color .08s ease}.white.active{background-color:#ccc}.black{--width: 30px;background-color:#000;margin-left:calc(var(--width)/-2);margin-right:calc(var(--width)/-2);border-radius:0 0px 5px 5px;z-index:2;color:#fff;transition:background-color .08s ease}.black.active{background-color:#333}.keyboard-key{display:none;margin-bottom:10px;font-family:monospace;font-size:18px;background-color:none}body{background-color:#fea49f;padding-bottom:2rem}.title-logo-container{display:flex;background-size:auto;justify-content:space-between;padding:10px;align-items:center;background-color:#00a0a0;margin:auto;width:481px;height:150px;border:1px solid #000;margin-top:1rem;margin-bottom:2rem;border-radius:5px}.logo{width:375px}#container{border:1px solid #000}

/*# sourceMappingURL=main.css.map*/