html,body{margin:0;padding:0;border:0;width:100%;height:100%;background-color:#c9c9c9}body{background-image:url("https://audionotes-seed.s3.amazonaws.com/musicnotes.png");background-size:cover;opacity:0.9}#modal{z-index:10;position:absolute;display:none;width:100%;height:100%;background-color:rgba(156,156,156,0.3);transition:all 0.5s ease}.modal-1{height:70px;width:1100px;top:15px;position:relative;background-color:#a8a8a8;margin:0 auto;border-radius:4px;border:1px solid black;opacity:1;display:flex;justify-content:space-between}.modal-1 p:first-child{font-weight:600;margin-left:80px;font-family:"Poiret One", cursive;font-size:20px;letter-spacing:3px;color:#000000}.modal-1 p:last-child{font-weight:600;margin-right:20px;font-family:"Poiret One", cursive;font-size:20px;letter-spacing:3px;color:#000000}.modal-2{left:50px;top:50px;width:150px;height:420px;border:1px solid black;position:relative;background-color:#a8a8a8;border-radius:4px}.modal-2 p{font-family:"Poiret One", cursive;font-size:13px;font-weight:600;padding:7px;letter-spacing:3px;color:#000000}.modal-3{margin:0 auto;top:190px;width:1100px;height:70px;border:1px solid black;position:relative;background-color:#a8a8a8;border-radius:4px;display:flex;justify-content:space-between}.modal-3 p{font-family:"Poiret One", cursive;font-size:20px;font-weight:600;padding:7px;letter-spacing:2px;color:#000000}.modal-3 p:first-child{margin-left:40px}.modal-3 p:last-child{margin-right:140px}.main{display:flex;justify-content:center;flex-direction:column;margin:0 auto}.top-menu{display:flex;justify-content:center;align-items:center;flex-direction:column}.top-menu h1{font-family:"Poiret One", cursive;font-size:40px;letter-spacing:7px;color:#b0b7ba}.top-menu p{font-family:"Poiret One", cursive;font-size:15px;letter-spacing:1.5px;color:#ffffff;-webkit-animation:glow 1s ease-in-out infinite alternate;animation:glow 1s ease-in-out infinite alternate}.audio-top-menu{display:flex;align-items:center;justify-content:space-between;width:1100px;height:35px;background:linear-gradient(180deg, #363a3e 0%, #22252a 33%, #09090a 100%);border-radius:5px 5px 0 0;z-index:1}.audio-synth-menu{display:flex;list-style-type:none}.audio-synth-menu li{margin-left:30px;font-family:"Poiret One", cursive;text-decoration:none;font-size:15px;font-weight:600;position:relative;color:#b0b7ba;cursor:pointer}.audio-synth-menu li:hover{color:#abcca0}.active{font-size:15px;color:#fff;text-align:center;-webkit-animation:glow 1s ease-in-out infinite alternate;animation:glow 1s ease-in-out infinite alternate}@-webkit-keyframes glow{from{text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #39c726, 0 0 20px #3cfc23, 0 0 25px #3cfc23, 0 0 30px #3cfc23, 0 0 40px #3cfc23}to{text-shadow:0 0 10px #fff, 0 0 20px #45e031, 0 0 30px #45e031, 0 0 40px #45e031, 0 0 50px #45e031, 0 0 60px #45e031, 0 0 80px #45e031}}.audio-beat-pattern{font-family:"Poiret One", cursive;text-decoration:none;font-size:15px;color:#b0b7ba;display:flex;font-weight:600;align-items:center;letter-spacing:3px;margin-right:50px}.pattern-list{display:flex;list-style-type:none}.pattern-list li{margin-right:25px;cursor:pointer}.pattern-list li:hover{color:#abcca0}#audio-container{display:flex;padding-bottom:1px;justify-content:center;align-items:center;flex-direction:column}.audio-wrapper{border-radius:5px;display:flex;box-shadow:0 0 10px #727272, 0 0 40px #727272, 0 0 80px #727272}#audio-note{border:1px solid gray}#tutorial-button{font-family:"Poiret One", cursive;text-decoration:none;font-size:15px;font-weight:600;color:#b0b7ba;cursor:pointer}.note-container{border-radius:5px;width:950px;height:495px;background-color:#25252b;z-index:1}.note-container div{display:flex}.bottom-menu{position:relative;display:flex;justify-content:space-evenly;width:1100px;height:40px;margin:0 auto;border-radius:0 0 5px 5px;background:linear-gradient(180deg, #363a3e 0%, #22252a 33%, #09090a 100%);box-shadow:0 0 0.5px #b1b1b1, 0 0 8px #b1b1b1}.bottom-menu-left{display:flex;justify-content:space-between;width:200px}.bottom-menu-right{display:flex;justify-content:space-between;align-items:center;font-size:35px}.bottom-menu-right div a{text-decoration:none;color:#b0b7ba;font-family:"Poiret One", cursive;letter-spacing:4px}.bottom-menu-right div{margin-right:40px}.bottom-menu-left button{background-color:transparent;border:none;outline:none}.bottom-menu-left button i{font-size:23px;cursor:pointer;color:#4d4d4d}.bottom-menu-left button i:hover{font-size:25px;color:#b0b7ba;transition:all 0.3s ease}.bottom-menu-left button i:active{font-size:27px;color:#b0b7ba;transition:all 0.3s ease}.clear-btn{border:none;background-color:transparent;font-family:"Poiret One", cursive;font-size:23px;letter-spacing:4px;cursor:pointer;outline:none;color:#b0b7ba}.clear-btn:hover{transition:all 0.3s ease;font-size:25px}.tempo-input{font-family:"Poiret One", cursive;font-size:23px;letter-spacing:4px;display:flex;align-items:center;outline:none;color:#b0b7ba}.tempo-input input{height:40px;width:80px;margin-left:10px;font-size:23px;text-align:center;font-family:"Poiret One", cursive;font-weight:600;letter-spacing:4px;background-color:transparent;color:#b0b7ba;border:none;outline:none}.github-link,.linkedin-link{position:relative;display:inline-block;font-size:23px}.github-link>a:after,.linkedin-link>a:after{content:"";position:absolute;left:0;display:inline-block;height:1em;width:100%;border-bottom:1px solid;margin-top:3px;opacity:0;transition:opacity 0.35s, transform 0.35s;transform:scale(0, 1)}.github-link>a:hover:after,.linkedin-link>a:hover:after{opacity:1;transform:scale(1)}

.checkbox-label{width:60%;height:60%}.checkbox-label>input{position:absolute;width:25px;margin-left:10px;opacity:0;cursor:pointer}.checkbox-style{width:5px;height:3.8px;box-shadow:inset 0px 1.5px 1px 1px #4d4c4c;background-color:#1b1d1b;border-radius:6px;border:1px solid #849669;display:inline-block;cursor:pointer;color:#777777;padding:6px 24px;margin:1px}.offwhite{background-color:#2b2e2b}.checkbox-style:active{position:relative;top:1px}.row1-animation{-webkit-animation-name:row1-animation;animation-name:row1-animation;-webkit-animation-duration:1s;animation-duration:1s}.row2-animation{-webkit-animation-name:row2-animation;animation-name:row2-animation;-webkit-animation-duration:1s;animation-duration:1s}.row3-animation{-webkit-animation-name:row3-animation;animation-name:row3-animation;-webkit-animation-duration:1s;animation-duration:1s}.row4-animation{-webkit-animation-name:row4-animation;animation-name:row4-animation;-webkit-animation-duration:1s;animation-duration:1s}.row5-animation{-webkit-animation-name:row5-animation;animation-name:row5-animation;-webkit-animation-duration:1s;animation-duration:1s}.row6-animation{-webkit-animation-name:row6-animation;animation-name:row6-animation;-webkit-animation-duration:1s;animation-duration:1s}.row7-animation{-webkit-animation-name:row7-animation;animation-name:row7-animation;-webkit-animation-duration:1s;animation-duration:1s}.row8-animation{-webkit-animation-name:row8-animation;animation-name:row8-animation;-webkit-animation-duration:1s;animation-duration:1s}.row9-animation{-webkit-animation-name:row9-animation;animation-name:row9-animation;-webkit-animation-duration:1s;animation-duration:1s}.row10-animation{-webkit-animation-name:row10-animation;animation-name:row10-animation;-webkit-animation-duration:1s;animation-duration:1s}.row11-animation{-webkit-animation-name:row11-animation;animation-name:row11-animation;-webkit-animation-duration:1s;animation-duration:1s}.row12-animation{-webkit-animation-name:row12-animation;animation-name:row12-animation;-webkit-animation-duration:1s;animation-duration:1s}.row13-animation{-webkit-animation-name:row13-animation;animation-name:row13-animation;-webkit-animation-duration:1s;animation-duration:1s}.row14-animation{-webkit-animation-name:row14-animation;animation-name:row14-animation;-webkit-animation-duration:1s;animation-duration:1s}.row15-animation{-webkit-animation-name:row15-animation;animation-name:row15-animation;-webkit-animation-duration:1s;animation-duration:1s}.row16-animation{-webkit-animation-name:row16-animation;animation-name:row16-animation;-webkit-animation-duration:1s;animation-duration:1s}.row17-animation{-webkit-animation-name:row17-animation;animation-name:row17-animation;-webkit-animation-duration:1s;animation-duration:1s}.row18-animation{-webkit-animation-name:row18-animation;animation-name:row18-animation;-webkit-animation-duration:1s;animation-duration:1s}.row19-animation{-webkit-animation-name:row19-animation;animation-name:row19-animation;-webkit-animation-duration:1s;animation-duration:1s}.row20-animation{-webkit-animation-name:row20-animation;animation-name:row20-animation;-webkit-animation-duration:1s;animation-duration:1s}.row21-animation{-webkit-animation-name:row21-animation;animation-name:row21-animation;-webkit-animation-duration:1s;animation-duration:1s}.row22-animation{-webkit-animation-name:row22-animation;animation-name:row22-animation;-webkit-animation-duration:1s;animation-duration:1s}.row23-animation{-webkit-animation-name:row23-animation;animation-name:row23-animation;-webkit-animation-duration:1s;animation-duration:1s}.row24-animation{-webkit-animation-name:row24-animation;animation-name:row24-animation;-webkit-animation-duration:1s;animation-duration:1s}.row25-animation{-webkit-animation-name:row25-animation;animation-name:row25-animation;-webkit-animation-duration:1s;animation-duration:1s}@-webkit-keyframes row1-animation{0%{box-shadow:0 0 1px #df3030, 0 0 5px #df3030, 0 0 8px #df3030;background-color:#df3030}25%{box-shadow:0 0 1px #df3030, 0 0 5px #df3030, 0 0 8px #df3030;background-color:#df3030}75%{box-shadow:0 0 1px #df3030, 0 0 5px #df3030, 0 0 8px #df3030;background-color:#df3030}100%{box-shadow:"";background-color:""}}@keyframes row1-animation{0%{box-shadow:0 0 1px #df3030, 0 0 5px #df3030, 0 0 8px #df3030;background-color:#df3030}25%{box-shadow:0 0 1px #df3030, 0 0 5px #df3030, 0 0 8px #df3030;background-color:#df3030}75%{box-shadow:0 0 1px #df3030, 0 0 5px #df3030, 0 0 8px #df3030;background-color:#df3030}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row2-animation{0%{box-shadow:0 0 1px #e73c37, 0 0 5px #e73c37, 0 0 8px #e73c37;background-color:#e73c37}25%{box-shadow:0 0 1px #e73c37, 0 0 5px #e73c37, 0 0 8px #e73c37;background-color:#e73c37}75%{box-shadow:0 0 1px #e73c37, 0 0 5px #e73c37, 0 0 8px #e73c37;background-color:#e73c37}100%{box-shadow:"";background-color:""}}@keyframes row2-animation{0%{box-shadow:0 0 1px #e73c37, 0 0 5px #e73c37, 0 0 8px #e73c37;background-color:#e73c37}25%{box-shadow:0 0 1px #e73c37, 0 0 5px #e73c37, 0 0 8px #e73c37;background-color:#e73c37}75%{box-shadow:0 0 1px #e73c37, 0 0 5px #e73c37, 0 0 8px #e73c37;background-color:#e73c37}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row3-animation{0%{box-shadow:0 0 1px #e4582e, 0 0 5px #e4582e, 0 0 8px #e4582e;background-color:#e4582e}25%{box-shadow:0 0 1px #e4582e, 0 0 5px #e4582e, 0 0 8px #e4582e;background-color:#e4582e}75%{box-shadow:0 0 1px #e4582e, 0 0 5px #e4582e, 0 0 8px #e4582e;background-color:#e4582e}100%{box-shadow:"";background-color:""}}@keyframes row3-animation{0%{box-shadow:0 0 1px #e4582e, 0 0 5px #e4582e, 0 0 8px #e4582e;background-color:#e4582e}25%{box-shadow:0 0 1px #e4582e, 0 0 5px #e4582e, 0 0 8px #e4582e;background-color:#e4582e}75%{box-shadow:0 0 1px #e4582e, 0 0 5px #e4582e, 0 0 8px #e4582e;background-color:#e4582e}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row4-animation{0%{box-shadow:0 0 1px #ffa743, 0 0 5px #ffa743, 0 0 8px #ffa743;background-color:#ffa743}25%{box-shadow:0 0 1px #ffa743, 0 0 5px #ffa743, 0 0 8px #ffa743;background-color:#ffa743}75%{box-shadow:0 0 1px #ffa743, 0 0 5px #ffa743, 0 0 8px #ffa743;background-color:#ffa743}100%{box-shadow:"";background-color:""}}@keyframes row4-animation{0%{box-shadow:0 0 1px #ffa743, 0 0 5px #ffa743, 0 0 8px #ffa743;background-color:#ffa743}25%{box-shadow:0 0 1px #ffa743, 0 0 5px #ffa743, 0 0 8px #ffa743;background-color:#ffa743}75%{box-shadow:0 0 1px #ffa743, 0 0 5px #ffa743, 0 0 8px #ffa743;background-color:#ffa743}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row5-animation{0%{box-shadow:0 0 1px #ffce2d, 0 0 5px #ffce2d, 0 0 8px #ffce2d;background-color:#ffce2d}25%{box-shadow:0 0 1px #ffce2d, 0 0 5px #ffce2d, 0 0 8px #ffce2d;background-color:#ffce2d}75%{box-shadow:0 0 1px #ffce2d, 0 0 5px #ffce2d, 0 0 8px #ffce2d;background-color:#ffce2d}100%{box-shadow:"";background-color:""}}@keyframes row5-animation{0%{box-shadow:0 0 1px #ffce2d, 0 0 5px #ffce2d, 0 0 8px #ffce2d;background-color:#ffce2d}25%{box-shadow:0 0 1px #ffce2d, 0 0 5px #ffce2d, 0 0 8px #ffce2d;background-color:#ffce2d}75%{box-shadow:0 0 1px #ffce2d, 0 0 5px #ffce2d, 0 0 8px #ffce2d;background-color:#ffce2d}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row6-animation{0%{box-shadow:0 0 1px #fcff4d, 0 0 5px #fcff4d, 0 0 8px #fcff4d;background-color:#fcff4d}25%{box-shadow:0 0 1px #fcff4d, 0 0 5px #fcff4d, 0 0 8px #fcff4d;background-color:#fcff4d}75%{box-shadow:0 0 1px #fcff4d, 0 0 5px #fcff4d, 0 0 8px #fcff4d;background-color:#fcff4d}100%{box-shadow:"";background-color:""}}@keyframes row6-animation{0%{box-shadow:0 0 1px #fcff4d, 0 0 5px #fcff4d, 0 0 8px #fcff4d;background-color:#fcff4d}25%{box-shadow:0 0 1px #fcff4d, 0 0 5px #fcff4d, 0 0 8px #fcff4d;background-color:#fcff4d}75%{box-shadow:0 0 1px #fcff4d, 0 0 5px #fcff4d, 0 0 8px #fcff4d;background-color:#fcff4d}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row7-animation{0%{box-shadow:0 0 1px #bdff09, 0 0 5px #bdff09, 0 0 8px #bdff09;background-color:#bdff09}25%{box-shadow:0 0 1px #bdff09, 0 0 5px #bdff09, 0 0 8px #bdff09;background-color:#bdff09}75%{box-shadow:0 0 1px #bdff09, 0 0 5px #bdff09, 0 0 8px #bdff09;background-color:#bdff09}100%{box-shadow:"";background-color:""}}@keyframes row7-animation{0%{box-shadow:0 0 1px #bdff09, 0 0 5px #bdff09, 0 0 8px #bdff09;background-color:#bdff09}25%{box-shadow:0 0 1px #bdff09, 0 0 5px #bdff09, 0 0 8px #bdff09;background-color:#bdff09}75%{box-shadow:0 0 1px #bdff09, 0 0 5px #bdff09, 0 0 8px #bdff09;background-color:#bdff09}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row8-animation{0%{box-shadow:0 0 1px #7fe929, 0 0 5px #7fe929, 0 0 8px #7fe929;background-color:#7fe929}25%{box-shadow:0 0 1px #7fe929, 0 0 5px #7fe929, 0 0 8px #7fe929;background-color:#7fe929}75%{box-shadow:0 0 1px #7fe929, 0 0 5px #7fe929, 0 0 8px #7fe929;background-color:#7fe929}100%{box-shadow:"";background-color:""}}@keyframes row8-animation{0%{box-shadow:0 0 1px #7fe929, 0 0 5px #7fe929, 0 0 8px #7fe929;background-color:#7fe929}25%{box-shadow:0 0 1px #7fe929, 0 0 5px #7fe929, 0 0 8px #7fe929;background-color:#7fe929}75%{box-shadow:0 0 1px #7fe929, 0 0 5px #7fe929, 0 0 8px #7fe929;background-color:#7fe929}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row9-animation{0%{box-shadow:0 0 1px #3ff384, 0 0 5px #3ff384, 0 0 8px #3ff384;background-color:#3ff384}25%{box-shadow:0 0 1px #3ff384, 0 0 5px #3ff384, 0 0 8px #3ff384;background-color:#3ff384}75%{box-shadow:0 0 1px #3ff384, 0 0 5px #3ff384, 0 0 8px #3ff384;background-color:#3ff384}100%{box-shadow:"";background-color:""}}@keyframes row9-animation{0%{box-shadow:0 0 1px #3ff384, 0 0 5px #3ff384, 0 0 8px #3ff384;background-color:#3ff384}25%{box-shadow:0 0 1px #3ff384, 0 0 5px #3ff384, 0 0 8px #3ff384;background-color:#3ff384}75%{box-shadow:0 0 1px #3ff384, 0 0 5px #3ff384, 0 0 8px #3ff384;background-color:#3ff384}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row10-animation{0%{box-shadow:0 0 1px #4cfdb9, 0 0 5px #4cfdb9, 0 0 8px #4cfdb9;background-color:#4cfdb9}25%{box-shadow:0 0 1px #4cfdb9, 0 0 5px #4cfdb9, 0 0 8px #4cfdb9;background-color:#4cfdb9}75%{box-shadow:0 0 1px #4cfdb9, 0 0 5px #4cfdb9, 0 0 8px #4cfdb9;background-color:#4cfdb9}100%{box-shadow:"";background-color:""}}@keyframes row10-animation{0%{box-shadow:0 0 1px #4cfdb9, 0 0 5px #4cfdb9, 0 0 8px #4cfdb9;background-color:#4cfdb9}25%{box-shadow:0 0 1px #4cfdb9, 0 0 5px #4cfdb9, 0 0 8px #4cfdb9;background-color:#4cfdb9}75%{box-shadow:0 0 1px #4cfdb9, 0 0 5px #4cfdb9, 0 0 8px #4cfdb9;background-color:#4cfdb9}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row11-animation{0%{box-shadow:0 0 1px #49cef0, 0 0 5px #49cef0, 0 0 8px #49cef0;background-color:#49cef0}25%{box-shadow:0 0 1px #49cef0, 0 0 5px #49cef0, 0 0 8px #49cef0;background-color:#49cef0}75%{box-shadow:0 0 1px #49cef0, 0 0 5px #49cef0, 0 0 8px #49cef0;background-color:#49cef0}100%{box-shadow:"";background-color:""}}@keyframes row11-animation{0%{box-shadow:0 0 1px #49cef0, 0 0 5px #49cef0, 0 0 8px #49cef0;background-color:#49cef0}25%{box-shadow:0 0 1px #49cef0, 0 0 5px #49cef0, 0 0 8px #49cef0;background-color:#49cef0}75%{box-shadow:0 0 1px #49cef0, 0 0 5px #49cef0, 0 0 8px #49cef0;background-color:#49cef0}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row12-animation{0%{box-shadow:0 0 1px #31a5e9, 0 0 5px #31a5e9, 0 0 8px #31a5e9;background-color:#31a5e9}25%{box-shadow:0 0 1px #31a5e9, 0 0 5px #31a5e9, 0 0 8px #31a5e9;background-color:#31a5e9}75%{box-shadow:0 0 1px #31a5e9, 0 0 5px #31a5e9, 0 0 8px #31a5e9;background-color:#31a5e9}100%{box-shadow:"";background-color:""}}@keyframes row12-animation{0%{box-shadow:0 0 1px #31a5e9, 0 0 5px #31a5e9, 0 0 8px #31a5e9;background-color:#31a5e9}25%{box-shadow:0 0 1px #31a5e9, 0 0 5px #31a5e9, 0 0 8px #31a5e9;background-color:#31a5e9}75%{box-shadow:0 0 1px #31a5e9, 0 0 5px #31a5e9, 0 0 8px #31a5e9;background-color:#31a5e9}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row13-animation{0%{box-shadow:0 0 1px #2a7af3, 0 0 5px #2a7af3, 0 0 8px #2a7af3;background-color:#2a7af3}25%{box-shadow:0 0 1px #2a7af3, 0 0 5px #2a7af3, 0 0 8px #2a7af3;background-color:#2a7af3}75%{box-shadow:0 0 1px #2a7af3, 0 0 5px #2a7af3, 0 0 8px #2a7af3;background-color:#2a7af3}100%{box-shadow:"";background-color:""}}@keyframes row13-animation{0%{box-shadow:0 0 1px #2a7af3, 0 0 5px #2a7af3, 0 0 8px #2a7af3;background-color:#2a7af3}25%{box-shadow:0 0 1px #2a7af3, 0 0 5px #2a7af3, 0 0 8px #2a7af3;background-color:#2a7af3}75%{box-shadow:0 0 1px #2a7af3, 0 0 5px #2a7af3, 0 0 8px #2a7af3;background-color:#2a7af3}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row14-animation{0%{box-shadow:0 0 1px #412df8, 0 0 5px #412df8, 0 0 8px #412df8;background-color:#412df8}25%{box-shadow:0 0 1px #412df8, 0 0 5px #412df8, 0 0 8px #412df8;background-color:#412df8}75%{box-shadow:0 0 1px #412df8, 0 0 5px #412df8, 0 0 8px #412df8;background-color:#412df8}100%{box-shadow:"";background-color:""}}@keyframes row14-animation{0%{box-shadow:0 0 1px #412df8, 0 0 5px #412df8, 0 0 8px #412df8;background-color:#412df8}25%{box-shadow:0 0 1px #412df8, 0 0 5px #412df8, 0 0 8px #412df8;background-color:#412df8}75%{box-shadow:0 0 1px #412df8, 0 0 5px #412df8, 0 0 8px #412df8;background-color:#412df8}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row15-animation{0%{box-shadow:0 0 1px #412df8, 0 0 5px #412df8, 0 0 8px #412df8;background-color:#412df8}25%{box-shadow:0 0 1px #412df8, 0 0 5px #412df8, 0 0 8px #412df8;background-color:#412df8}75%{box-shadow:0 0 1px #412df8, 0 0 5px #412df8, 0 0 8px #412df8;background-color:#412df8}100%{box-shadow:"";background-color:""}}@keyframes row15-animation{0%{box-shadow:0 0 1px #412df8, 0 0 5px #412df8, 0 0 8px #412df8;background-color:#412df8}25%{box-shadow:0 0 1px #412df8, 0 0 5px #412df8, 0 0 8px #412df8;background-color:#412df8}75%{box-shadow:0 0 1px #412df8, 0 0 5px #412df8, 0 0 8px #412df8;background-color:#412df8}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row16-animation{0%{box-shadow:0 0 1px #8055f7, 0 0 5px #8055f7, 0 0 8px #8055f7;background-color:#8055f7}25%{box-shadow:0 0 1px #8055f7, 0 0 5px #8055f7, 0 0 8px #8055f7;background-color:#8055f7}75%{box-shadow:0 0 1px #8055f7, 0 0 5px #8055f7, 0 0 8px #8055f7;background-color:#8055f7}100%{box-shadow:"";background-color:""}}@keyframes row16-animation{0%{box-shadow:0 0 1px #8055f7, 0 0 5px #8055f7, 0 0 8px #8055f7;background-color:#8055f7}25%{box-shadow:0 0 1px #8055f7, 0 0 5px #8055f7, 0 0 8px #8055f7;background-color:#8055f7}75%{box-shadow:0 0 1px #8055f7, 0 0 5px #8055f7, 0 0 8px #8055f7;background-color:#8055f7}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row17-animation{0%{box-shadow:0 0 1px #982bff, 0 0 5px #982bff, 0 0 8px #982bff;background-color:#982bff}25%{box-shadow:0 0 1px #982bff, 0 0 5px #982bff, 0 0 8px #982bff;background-color:#982bff}75%{box-shadow:0 0 1px #982bff, 0 0 5px #982bff, 0 0 8px #982bff;background-color:#982bff}100%{box-shadow:"";background-color:""}}@keyframes row17-animation{0%{box-shadow:0 0 1px #982bff, 0 0 5px #982bff, 0 0 8px #982bff;background-color:#982bff}25%{box-shadow:0 0 1px #982bff, 0 0 5px #982bff, 0 0 8px #982bff;background-color:#982bff}75%{box-shadow:0 0 1px #982bff, 0 0 5px #982bff, 0 0 8px #982bff;background-color:#982bff}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row18-animation{0%{box-shadow:0 0 1px #ce40eb, 0 0 5px #ce40eb, 0 0 8px #ce40eb;background-color:#ce40eb}25%{box-shadow:0 0 1px #ce40eb, 0 0 5px #ce40eb, 0 0 8px #ce40eb;background-color:#ce40eb}75%{box-shadow:0 0 1px #ce40eb, 0 0 5px #ce40eb, 0 0 8px #ce40eb;background-color:#ce40eb}100%{box-shadow:"";background-color:""}}@keyframes row18-animation{0%{box-shadow:0 0 1px #ce40eb, 0 0 5px #ce40eb, 0 0 8px #ce40eb;background-color:#ce40eb}25%{box-shadow:0 0 1px #ce40eb, 0 0 5px #ce40eb, 0 0 8px #ce40eb;background-color:#ce40eb}75%{box-shadow:0 0 1px #ce40eb, 0 0 5px #ce40eb, 0 0 8px #ce40eb;background-color:#ce40eb}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row19-animation{0%{box-shadow:0 0 1px #fd7adc, 0 0 5px #fd7adc, 0 0 8px #fd7adc;background-color:#fd7adc}25%{box-shadow:0 0 1px #fd7adc, 0 0 5px #fd7adc, 0 0 8px #fd7adc;background-color:#fd7adc}75%{box-shadow:0 0 1px #fd7adc, 0 0 5px #fd7adc, 0 0 8px #fd7adc;background-color:#fd7adc}100%{box-shadow:"";background-color:""}}@keyframes row19-animation{0%{box-shadow:0 0 1px #fd7adc, 0 0 5px #fd7adc, 0 0 8px #fd7adc;background-color:#fd7adc}25%{box-shadow:0 0 1px #fd7adc, 0 0 5px #fd7adc, 0 0 8px #fd7adc;background-color:#fd7adc}75%{box-shadow:0 0 1px #fd7adc, 0 0 5px #fd7adc, 0 0 8px #fd7adc;background-color:#fd7adc}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row20-animation{0%{box-shadow:0 0 1px #f1459b, 0 0 5px #f1459b, 0 0 8px #f1459b;background-color:#f1459b}25%{box-shadow:0 0 1px #f1459b, 0 0 5px #f1459b, 0 0 8px #f1459b;background-color:#f1459b}75%{box-shadow:0 0 1px #f1459b, 0 0 5px #f1459b, 0 0 8px #f1459b;background-color:#f1459b}100%{box-shadow:"";background-color:""}}@keyframes row20-animation{0%{box-shadow:0 0 1px #f1459b, 0 0 5px #f1459b, 0 0 8px #f1459b;background-color:#f1459b}25%{box-shadow:0 0 1px #f1459b, 0 0 5px #f1459b, 0 0 8px #f1459b;background-color:#f1459b}75%{box-shadow:0 0 1px #f1459b, 0 0 5px #f1459b, 0 0 8px #f1459b;background-color:#f1459b}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row21-animation{0%{box-shadow:0 0 1px #fa4d6a, 0 0 5px #fa4d6a, 0 0 8px #fa4d6a;background-color:#fa4d6a}25%{box-shadow:0 0 1px #fa4d6a, 0 0 5px #fa4d6a, 0 0 8px #fa4d6a;background-color:#fa4d6a}75%{box-shadow:0 0 1px #fa4d6a, 0 0 5px #fa4d6a, 0 0 8px #fa4d6a;background-color:#fa4d6a}100%{box-shadow:"";background-color:""}}@keyframes row21-animation{0%{box-shadow:0 0 1px #fa4d6a, 0 0 5px #fa4d6a, 0 0 8px #fa4d6a;background-color:#fa4d6a}25%{box-shadow:0 0 1px #fa4d6a, 0 0 5px #fa4d6a, 0 0 8px #fa4d6a;background-color:#fa4d6a}75%{box-shadow:0 0 1px #fa4d6a, 0 0 5px #fa4d6a, 0 0 8px #fa4d6a;background-color:#fa4d6a}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row22-animation{0%{box-shadow:0 0 1px #fc3747, 0 0 5px #fc3747, 0 0 8px #fc3747;background-color:#fc3747}25%{box-shadow:0 0 1px #fc3747, 0 0 5px #fc3747, 0 0 8px #fc3747;background-color:#fc3747}75%{box-shadow:0 0 1px #fc3747, 0 0 5px #fc3747, 0 0 8px #fc3747;background-color:#fc3747}100%{box-shadow:"";background-color:""}}@keyframes row22-animation{0%{box-shadow:0 0 1px #fc3747, 0 0 5px #fc3747, 0 0 8px #fc3747;background-color:#fc3747}25%{box-shadow:0 0 1px #fc3747, 0 0 5px #fc3747, 0 0 8px #fc3747;background-color:#fc3747}75%{box-shadow:0 0 1px #fc3747, 0 0 5px #fc3747, 0 0 8px #fc3747;background-color:#fc3747}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row23-animation{0%{box-shadow:0 0 1px #ff2020, 0 0 5px #ff2020, 0 0 8px #ff2020;background-color:#ff2020}25%{box-shadow:0 0 1px #ff2020, 0 0 5px #ff2020, 0 0 8px #ff2020;background-color:#ff2020}75%{box-shadow:0 0 1px #ff2020, 0 0 5px #ff2020, 0 0 8px #ff2020;background-color:#ff2020}100%{box-shadow:"";background-color:""}}@keyframes row23-animation{0%{box-shadow:0 0 1px #ff2020, 0 0 5px #ff2020, 0 0 8px #ff2020;background-color:#ff2020}25%{box-shadow:0 0 1px #ff2020, 0 0 5px #ff2020, 0 0 8px #ff2020;background-color:#ff2020}75%{box-shadow:0 0 1px #ff2020, 0 0 5px #ff2020, 0 0 8px #ff2020;background-color:#ff2020}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row24-animation{0%{box-shadow:0 0 1px #f75336, 0 0 5px #f75336, 0 0 8px #f75336;background-color:#f75336}25%{box-shadow:0 0 1px #f75336, 0 0 5px #f75336, 0 0 8px #f75336;background-color:#f75336}75%{box-shadow:0 0 1px #f75336, 0 0 5px #f75336, 0 0 8px #f75336;background-color:#f75336}100%{box-shadow:"";background-color:""}}@keyframes row24-animation{0%{box-shadow:0 0 1px #f75336, 0 0 5px #f75336, 0 0 8px #f75336;background-color:#f75336}25%{box-shadow:0 0 1px #f75336, 0 0 5px #f75336, 0 0 8px #f75336;background-color:#f75336}75%{box-shadow:0 0 1px #f75336, 0 0 5px #f75336, 0 0 8px #f75336;background-color:#f75336}100%{box-shadow:"";background-color:""}}@-webkit-keyframes row25-animation{0%{box-shadow:0 0 1px #fa9a4b, 0 0 5px #fa9a4b, 0 0 8px #fa9a4b;background-color:#fa9a4b}25%{box-shadow:0 0 1px #fa9a4b, 0 0 5px #fa9a4b, 0 0 8px #fa9a4b;background-color:#fa9a4b}75%{box-shadow:0 0 1px #fa9a4b, 0 0 5px #fa9a4b, 0 0 8px #fa9a4b;background-color:#fa9a4b}100%{box-shadow:"";background-color:""}}@keyframes row25-animation{0%{box-shadow:0 0 1px #fa9a4b, 0 0 5px #fa9a4b, 0 0 8px #fa9a4b;background-color:#fa9a4b}25%{box-shadow:0 0 1px #fa9a4b, 0 0 5px #fa9a4b, 0 0 8px #fa9a4b;background-color:#fa9a4b}75%{box-shadow:0 0 1px #fa9a4b, 0 0 5px #fa9a4b, 0 0 8px #fa9a4b;background-color:#fa9a4b}100%{box-shadow:"";background-color:""}}.row1 .checkbox-label input:checked ~ .checkbox-style{background-color:#df3030;transition:all 0.4s ease 0s;border-color:#df3030;box-shadow:0 0 2.5px #df3030, 0 0 10px #df3030, 0 0 10px #df3030}.row2 .checkbox-label input:checked ~ .checkbox-style{background-color:#e73c37;transition:all 0.4s ease 0s;border-color:#e73c37;box-shadow:0 0 2.5px #dd5745, 0 0 10px #dd5745, 0 0 10px #dd5745}.row3 .checkbox-label input:checked ~ .checkbox-style{background-color:#e4582e;transition:all 0.4s ease 0s;border-color:#e4582e;box-shadow:0 0 2.5px #e4582e, 0 0 10px #e4582e, 0 0 10px #e4582e}.row4 .checkbox-label input:checked ~ .checkbox-style{background-color:#ffa743;transition:all 0.4s ease 0s;border-color:#ffa743;box-shadow:0 0 2.5px #ffa743, 0 0 10px #ffa743, 0 0 10px #ffa743}.row5 .checkbox-label input:checked ~ .checkbox-style{background-color:#ffce2d;transition:all 0.4s ease 0s;border-color:#ffce2d;box-shadow:0 0 2.5px #ffce2d, 0 0 10px #ffce2d, 0 0 10px #ffce2d}.row6 .checkbox-label input:checked ~ .checkbox-style{background-color:#fcff4d;transition:all 0.4s ease 0s;border-color:#fcff4d;box-shadow:0 0 2.5px #fcff4d, 0 0 10px #fcff4d, 0 0 10px #fcff4d}.row7 .checkbox-label input:checked ~ .checkbox-style{background-color:#bdff09;transition:all 0.4s ease 0s;border-color:#bdff09;box-shadow:0 0 2.5px #bdff09, 0 0 10px #bdff09, 0 0 10px #bdff09}.row8 .checkbox-label input:checked ~ .checkbox-style{background-color:#7fe929;transition:all 0.4s ease 0s;border-color:#7fe929;box-shadow:0 0 2.5px #7fe929, 0 0 10px #7fe929, 0 0 10px #7fe929}.row9 .checkbox-label input:checked ~ .checkbox-style{background-color:#3ff384;transition:all 0.4s ease 0s;border-color:#3ff384;box-shadow:0 0 2.5px #3ff384, 0 0 10px #3ff384, 0 0 10px #3ff384}.row10 .checkbox-label input:checked ~ .checkbox-style{background-color:#4cfdb9;transition:all 0.4s ease 0s;border-color:#4cfdb9;box-shadow:0 0 2.5px #4cfdb9, 0 0 10px #4cfdb9, 0 0 10px #4cfdb9}.row11 .checkbox-label input:checked ~ .checkbox-style{background-color:#49cef0;transition:all 0.4s ease 0s;border-color:#49cef0;box-shadow:0 0 2.5px #49cef0, 0 0 10px #49cef0, 0 0 10px #49cef0}.row12 .checkbox-label input:checked ~ .checkbox-style{background-color:#31a5e9;transition:all 0.4s ease 0s;border-color:#31a5e9;box-shadow:0 0 2.5px #31a5e9, 0 0 10px #31a5e9, 0 0 10px #31a5e9}.row13 .checkbox-label input:checked ~ .checkbox-style{background-color:#2a7af3;transition:all 0.4s ease 0s;border-color:#2a7af3;box-shadow:0 0 2.5px #2a7af3, 0 0 10px #2a7af3, 0 0 10px #2a7af3}.row14 .checkbox-label input:checked ~ .checkbox-style{background-color:#412df8;transition:all 0.4s ease 0s;border-color:#412df8;box-shadow:0 0 2.5px #412df8, 0 0 10px #412df8, 0 0 10px #412df8}.row15 .checkbox-label input:checked ~ .checkbox-style{background-color:#5630fd;transition:all 0.4s ease 0s;border-color:#5630fd;box-shadow:0 0 2.5px #5630fd, 0 0 10px #5630fd, 0 0 10px #5630fd}.row16 .checkbox-label input:checked ~ .checkbox-style{background-color:#8055f7;transition:all 0.4s ease 0s;border-color:#8055f7;box-shadow:0 0 2.5px #8055f7, 0 0 10px #8055f7, 0 0 10px #8055f7}.row17 .checkbox-label input:checked ~ .checkbox-style{background-color:#982bff;transition:all 0.4s ease 0s;border-color:#982bff;box-shadow:0 0 2.5px #982bff, 0 0 10px #982bff, 0 0 10px #982bff}.row18 .checkbox-label input:checked ~ .checkbox-style{background-color:#ce40eb;transition:all 0.4s ease 0s;border-color:#ce40eb;box-shadow:0 0 2.5px #ce40eb, 0 0 10px #ce40eb, 0 0 10px #ce40eb}.row19 .checkbox-label input:checked ~ .checkbox-style{background-color:#fd7adc;transition:all 0.4s ease 0s;border-color:#fd7adc;box-shadow:0 0 2.5px #fd7adc, 0 0 10px #fd7adc, 0 0 10px #fd7adc}.row20 .checkbox-label input:checked ~ .checkbox-style{background-color:#f1459b;transition:all 0.4s ease 0s;border-color:#f1459b;box-shadow:0 0 2.5px #f1459b, 0 0 10px #f1459b, 0 0 10px #f1459b}.row21 .checkbox-label input:checked ~ .checkbox-style{background-color:#fa4d6a;transition:all 0.4s ease 0s;border-color:#fa4d6a;box-shadow:0 0 2.5px #fa4d6a, 0 0 10px #fa4d6a, 0 0 10px #fa4d6a}.row22 .checkbox-label input:checked ~ .checkbox-style{background-color:#fc3747;transition:all 0.4s ease 0s;border-color:#fc3747;box-shadow:0 0 2.5px #fc3747, 0 0 10px #fc3747, 0 0 10px #fc3747}.row23 .checkbox-label input:checked ~ .checkbox-style{background-color:#ff2020;transition:all 0.4s ease 0s;border-color:#ff2020;box-shadow:0 0 2.5px #ff2020, 0 0 10px #ff2020, 0 0 10px #ff2020}.row24 .checkbox-label input:checked ~ .checkbox-style{background-color:#f75336;transition:all 0.4s ease 0s;border-color:#f75336;box-shadow:0 0 2.5px #f75336, 0 0 10px #f75336, 0 0 10px #f75336}.row25 .checkbox-label input:checked ~ .checkbox-style{background-color:#fa9a4b;transition:all 0.4s ease 0s;border-color:#fa9a4b;box-shadow:0 0 2.5px #fa9a4b, 0 0 10px #fa9a4b, 0 0 10px #fa9a4b}

.whitenote{width:100%;height:32px;float:left;position:relative;background:#eff1e5;overflow:visible;box-shadow:-1px 0 0 rgba(84,85,40,0.8) inset,0 0 5px #3b3d17 inset,0 0 3px rgba(0,0,0,0.2);border-bottom:1px solid black;border-radius:0 3px 3px 0;cursor:pointer}.whitenote:active{box-shadow:2px 0 3px rgba(0,0,0,0.1) inset,-5px 5px 20px rgba(0,0,0,0.2) inset,0 0 3px rgba(0,0,0,0.2);background:linear-gradient(to bottom, #fff 0%, #e9e9e9 100%)}.blacknote{position:absolute;height:55%;width:65%;top:74%;z-index:1;cursor:pointer;background:#777;border:1px solid #000;border-radius:0 3px 3px 0;box-shadow:-0.5px -0.5px 1.5px rgba(255,255,255,0.2) inset,0 -1.5px 1.5px 2px rgba(0,0,0,0.6) inset,0 1px 2px rgba(0,0,0,0.5)}.blacknote:active{box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset,0 -2px 2px 3px rgba(0,0,0,0.6) inset,0 1px 2px rgba(0,0,0,0.5);background:linear-gradient(to right, #444 0%, #222 100%)}#piano-roll{width:150px;display:flex;top:50px;flex-direction:column;top:calc(50% - 400px);position:relative}#piano-roll div:first-child{border-radius:3px 3px 0 0}#piano-roll div:last-child{border-radius:0 0 3px 3px}


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