*{box-sizing:border-box;margin:0}body{background-color:#f2f2f2}.web-header{display:flex;height:15rem;justify-content:center;padding-left:15rem}.web-header .title-container{width:70rem}.web-header .title-container h1{color:#000;font-family:Inter,sans-serif;font-size:3rem;font-weight:400;margin-top:7rem}.web-body{display:flex;flex-direction:column;margin:auto;min-width:80rem;width:80rem}.web-body .action-area{align-items:center;display:flex;justify-content:center}.web-body .action-area .pad{border:none;cursor:pointer;height:3rem;opacity:.2;transition:.4s;width:3rem}.web-body .action-area .pad-area{align-items:center;display:flex;gap:1rem;justify-content:center;max-width:80vh;width:80vw}.web-body .action-area .pad-area .pads-description{grid-gap:2rem;display:grid;gap:2rem;grid-template-rows:repeat(4,1fr);height:24rem;padding:0 1.2rem}.web-body .action-area .pad-area .pads-description .dropdown-wrapper select{background:none;border:none;cursor:pointer;font-family:Inter,sans-serif}.web-body .action-area .pad-area .pads-container{grid-row-gap:4rem;grid-column-gap:1rem;border-bottom:3px solid #000;border-left:3px solid #000;display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(3,1fr);padding-bottom:1rem;padding-left:1rem;width:auto}.web-body .task-area{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-left:10rem;margin-top:3rem;width:60rem}.web-body .task-area .keyboard-container{display:flex;height:16em;justify-content:center;width:60rem}.web-body .task-area .keyboard-container .keyboard-form{height:2rem;margin-right:1rem;margin-top:1rem;width:5rem}.web-body .task-area .keyboard-container .keyboard-form select{background:none;border:none;cursor:pointer;font-size:1.3rem}.web-body .task-area .keyboard-container .keyboard{background-color:#858181;height:11rem;position:relative;top:1.5rem;width:40rem}.web-body .task-area .keyboard-container .keyboard .white-key-container{display:flex;height:auto;position:absolute;z-index:1}.web-body .task-area .keyboard-container .keyboard .white-key-container .white-key{background-color:#fff;border:3px solid #000;cursor:pointer;display:flex;font-family:Inter,sans-serif;height:11rem;justify-content:center;margin:0 -3px;position:relative;text-align:center;transition:.3s;width:4rem}.web-body .task-area .keyboard-container .keyboard .white-key-container .white-key p{bottom:.5rem;position:absolute}.web-body .task-area .keyboard-container .keyboard .white-key-container .white-key:hover{background-color:#d4d4d4}.web-body .task-area .keyboard-container .keyboard .black-key-container{height:8rem;left:40%;position:absolute;transform:translateX(-40%);width:40rem;z-index:20}.web-body .task-area .keyboard-container .keyboard .black-key-container .black-key-container1{display:flex;height:8rem;justify-content:space-between;left:2.4rem;position:absolute;width:9.3rem;z-index:20}.web-body .task-area .keyboard-container .keyboard .black-key-container .black-key-container2{display:flex;height:8rem;justify-content:space-between;left:17rem;position:absolute;width:5.6rem;z-index:20}.web-body .task-area .keyboard-container .keyboard .black-key-container .black-key-container3{display:flex;height:8rem;justify-content:space-between;left:27.8rem;position:absolute;width:9.3rem;z-index:20}.web-body .task-area .keyboard-container .keyboard .black-key-container .black-key{align-items:center;background-color:#000;border:none;color:#c2c2c2;cursor:pointer;display:flex;height:100%;justify-content:center;transition:.3s;width:2rem}.web-body .task-area .keyboard-container .keyboard .black-key-container .black-key:hover{background-color:#1f1f1f}.web-body .task-area .keyboard-container .keyboard .black-key-container .black-key p{bottom:1rem;position:absolute}.tasks-container{color:#000;display:flex;font-family:Inter,sans-serif;margin-left:6rem;width:40.5rem}.tasks-container .big-button{background:none;border:none;cursor:pointer;display:flex;font-family:Inter,sans-serif;font-size:2rem;font-weight:300;text-align:left;transition:.3s}.tasks-container .big-button:hover{scale:1.2}.tasks-container .small-button{background:none;border:2px solid #000;border-radius:1rem;cursor:pointer;display:flex;font-family:Inter,sans-serif;font-weight:500;gap:.2rem;padding:.3rem;transition:.2s}.tasks-container .small-button:hover{background-color:#000;color:#ddceb5}.tasks-container .task-group-1{align-items:center;border-right:2px solid #0003;display:flex;flex-direction:column;gap:.8rem;justify-content:center;width:15rem}.tasks-container .task-group-1 .group-1-form{align-items:center;display:flex;gap:1rem;justify-content:center;width:20rem}.tasks-container .task-group-1 .group-1-form .slider{appearance:none;background-color:#000;height:.2rem}.tasks-container .task-group-1 .group-1-form .slider ::-webkit-range-thumb,.tasks-container .task-group-1 .group-1-form .slider::-moz-range-thumb{-webkit-appearance:#000;background:#000;border:none;border-radius:50%;cursor:pointer;height:1rem;width:1rem}.tasks-container .task-group-1 .group-1-form .tempo-input{border:2px solid #000;font-family:Inter,sans-serif;width:4rem}.tasks-container .task-group-1 .group-1-form .tempo-input:focus{outline:none}.tasks-container .task-group-2{align-items:center;border-right:2px solid #0003;display:flex;flex-direction:column;gap:.8rem;justify-content:center;width:15rem}.tasks-container .task-group-2 .group-2-save-open-container{display:flex;gap:.8rem}.tasks-container .task-group-2 .group-2-save-open-container a{background:none;border:2px solid #000;border-radius:1rem;color:#000;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:500;text-decoration:none;transition:.2s;width:4.2rem}.tasks-container .task-group-2 .group-2-save-open-container a:hover{background-color:#000;color:#ddceb5}.tasks-container .task-group-2 .group-2-save-open-container .upload-file-input{display:none}.tasks-container .task-group-3{align-items:center;display:flex;justify-content:center;padding-left:4rem}.savingWindow{height:20rem;width:20rem}.savingWindow form button{height:2rem;width:2rem}.sample-container{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background-color:#0000001a;border:2px solid #000;border-radius:1rem;display:flex;flex-direction:column;font-family:Inter,sans-serif;gap:1rem;margin-bottom:20rem;min-height:40rem;padding:2rem;position:absolute;text-align:center;width:40rem;z-index:9999}.sample-container .sample-header{display:flex;height:3rem;justify-content:right}.sample-container .sample-header button{background:none;border:none;cursor:pointer;font-size:2rem}.sample-container .sample{align-items:center;background-color:#fff;border:2px solid #000;border-radius:1rem;cursor:pointer;display:flex;height:3rem;justify-content:center;padding:1rem;transition:.2s}.sample-container .sample:hover{background-color:#ebebeb}.sample-container .sample-loading-text{margin:auto}
/*# sourceMappingURL=main.17bf6f5b.css.map*/