html,body{margin:0;padding:0;background-color:#bcd3f2;overscroll-behavior:none;-webkit-overscroll-behavior:none;font-family:Fredoka,sans-serif;position:relative;min-height:100vh}body:after{content:"";position:fixed;bottom:0;left:0;width:100%;height:50px;background:linear-gradient(to bottom,transparent 0%,#BCD3F2 40%,#BCD3F2 100%);pointer-events:none;z-index:100}.musicGrid{height:400px;display:grid;grid-auto-flow:column;align-items:center;align-content:center}.noteContainer{height:100%;width:40px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;box-sizing:border-box;display:flex;align-items:center;justify-content:center;cursor:grab;font-family:Fredoka,sans-serif;color:#fff;border-radius:5px;text-shadow:2px 2px 0 #395C6B;box-shadow:0 2px 1px #0003}.staffHolder{height:auto;margin:auto;overflow-x:scroll;overscroll-behavior:none;width:95vw;max-width:1200px;border:20px solid #bbb482;background-color:#e6e1c5;border-radius:20px;box-shadow:0 4px 6px #0003}.staffHolder::-webkit-scrollbar{height:15px}.staffHolder::-webkit-scrollbar-track{background:#e6e1c5}.staffHolder::-webkit-scrollbar-thumb{background-color:#80a4ed;border-radius:10px;border:3px solid #E6E1C5}.staffHolder::-webkit-scrollbar-thumb:hover{background-color:#395c6b}.playButton{padding:10px 20px;width:100px;height:50px;font-size:18px;font-family:Fredoka,sans-serif;font-weight:600;cursor:pointer;background-color:#80a4ed;color:#fff;border:none;border-radius:12px;box-shadow:0 4px #395c6b;transition:all .1s ease;text-shadow:2px 2px 0 #395C6B;margin-left:10px;margin-right:10px}.playButton:hover{background-color:#80a4ed;transform:translateY(-2px);box-shadow:0 6px #395c6b;text-shadow:3px 3px 0 #395C6B}.playButton:active{transform:translateY(2px);box-shadow:0 2px #395c6b;text-shadow:1px 1px 0 #395C6B}.playButtonContainer{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:1000}.inputRC{width:40px;height:40px;font-size:24px;font-family:Fredoka,sans-serif;border-radius:5px;background-color:#80a4ed;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px #395c6b;transition:all .1s ease}.inputRC:hover{transform:translateY(-2px);box-shadow:0 4px #395c6b}.inputRC:active{transform:translateY(2px);box-shadow:0 1px #395c6b}.clearButton{width:100px;height:40px;font-size:15px;font-family:Fredoka,sans-serif;border-radius:5px;background-color:#ed8080;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px #6b3939;transition:all .1s ease}.clearButton:hover{transform:translateY(-2px);box-shadow:0 4px #6b3939}.clearButton:active{transform:translateY(2px);box-shadow:0 1px #6b3939}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.noteContainer.playing{animation:bounce .5s ease infinite}.mainPageHeader{height:100px;width:100%;background-color:#80a4ed;margin-bottom:20px;font-size:60px;font-weight:600;text-shadow:2px 2px 0 #395C6B;color:#fff;display:flex;align-items:center;justify-content:center}.mainPageHeaderSubtitle{font-size:20px;font-weight:400;text-shadow:2px 2px 0 #395C6B;color:#fff;align-self:flex-end;margin-bottom:25px}.About{margin:20px auto 100px;height:auto;width:50vw;min-width:500px;background-color:#395c6b;padding:20px;border-radius:10px;box-shadow:0 4px 6px #0003}.AboutTitle{font-size:20px;font-weight:400;text-shadow:2px 2px 0 rgba(0,0,0,.2);color:#fff}.AboutContent{font-size:16px;font-weight:400;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.2)}.inputSlider{-webkit-appearance:none;width:150px;height:8px;border-radius:4px;background:#395c6b;outline:none;opacity:1;transition:box-shadow .2s;transition:scale .2s}.inputSlider:hover{box-shadow:0 2px 5px #0003;transition:box-shadow .2s;scale:1.05;transition:scale .2s}.inputSlider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 4px #0003}.inputSlider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 4px #0003}.shareButton{width:50px;height:40px;font-size:15px;font-family:Fredoka,sans-serif;border-radius:5px;background-color:#70bf77;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px #396b45;transition:all .1s ease}.shareButton:hover{transform:translateY(-2px);box-shadow:0 4px #396b45}.shareButton:active{transform:translateY(2px);box-shadow:0 1px #396b45}@media (max-width: 768px){.staffHolder{width:90vw;border-width:15px}.mainPageHeader{height:80px;font-size:40px}.mainPageHeaderSubtitle{font-size:16px;margin-bottom:20px}.About{width:90vw;min-width:unset;margin:20px auto}.AboutContent{font-size:14px}.AboutContent img{width:200px!important;height:auto!important}.playButton{width:80px;height:40px;font-size:16px;margin-left:5px;margin-right:5px}.inputRC{width:35px;height:35px;font-size:20px}.clearButton{width:90px;height:35px;font-size:14px}.shareButton{width:45px;height:35px;font-size:14px}.inputSlider{width:120px}.noteContainer{width:35px}}@media (max-width: 480px){.staffHolder{width:95vw;border-width:10px}.mainPageHeader{height:60px;font-size:32px}.mainPageHeaderSubtitle{font-size:14px;margin-bottom:15px}.About{width:95vw;padding:15px}.AboutContent{font-size:13px}.AboutContent img{width:150px!important}.playButton{width:70px;height:35px;font-size:14px}.inputRC{width:30px;height:30px;font-size:18px}.clearButton{width:80px;height:30px;font-size:13px}.shareButton{width:40px;height:30px;font-size:13px}.inputSlider{width:100px}.noteContainer{width:30px}}