@import "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";@import "https://fonts.googleapis.com/css2?family=Kablammo&display=swap";:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#3669ff;--accent-bg:#3736ff11;--accent-hover-bg:#1177fe33;--accent-border:#0289ff;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--top-bar-bg:#ddd;--top-bar-bg-trans:#aaa7;--wrong:red;--wrong-bg:#f003;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;--roboto:"Roboto", sans-serif;font:18px/145% var(--roboto);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#4cb4ff;--accent-bg:#3736ff11;--accent-hover-bg:#1177fe33;--accent-border:#0289ff;--social-bg:#090d3880;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px;--top-bar-bg:#27282e;--top-bar-bg-trans:#27282e77}}html{scroll-behavior:smooth}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:100vw;max-width:100%;min-height:100vh;margin:0 auto;display:flex}body,p{margin:0}#center{flex-direction:column;flex-grow:1;place-content:center;place-items:center;gap:25px;display:flex}h1{color:#0000;text-transform:uppercase;background-image:url(/assets/low-poly-bg-ST_B9gJo.svg);background-size:cover;-webkit-background-clip:text;background-clip:text;margin:15px;font-family:Kablammo,sans-serif;font-size:15vw;font-weight:700;line-height:1}h2{color:var(--accent);margin:5px;font-size:4vw}h3{color:#fff;font-size:2.75vw}.home{background-position:50% -100px;background-repeat:no-repeat;background-size:cover;background-attachment:scroll;flex-direction:column;flex-grow:1;justify-content:center;align-items:center;width:100%;height:100vh;display:flex}.topBar{background-color:var(--top-bar-bg);color:#fff;border-radius:5vh;justify-content:space-between;align-self:center;align-items:center;width:80%;height:5vh;margin-top:2.5vh;padding:2.5vh;font-size:2vh;animation:linear scroll-down;animation-timeline:scroll(y);display:flex;position:fixed}.topBar p{color:#0000;background-image:url(/assets/low-poly-bg-ST_B9gJo.svg);background-size:cover;-webkit-background-clip:text;background-clip:text;margin-left:15px;font-family:Kablammo,sans-serif;font-size:4vh;font-weight:700;line-height:1}.topBar nav{justify-content:space-evenly;margin:0;display:flex}.topBar ul{margin:0 10px 0 0;list-style-type:none}.topBar a{color:inherit;text-decoration:none}@keyframes scroll-down{0%{border:1px solid #0000;margin-top:2.5vh}10%{border-top-left-radius:5vh;border-top-right-radius:5vh;margin-top:0}15%{border-radius:0 0 5vh 5vh}20%{border-radius:0 0 2.5vh 2.5vh;height:5vh}24%{border:1px solid #0000}25%{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:var(--top-bar-bg-trans);border:1px solid var(--border);height:2vh}to{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:var(--top-bar-bg-trans);border:1px solid var(--border);border-radius:0 0 2.5vh 2.5vh;height:2vh;margin-top:0}}.activity-list{flex-flow:wrap;justify-content:center;align-items:center;width:90%;display:flex}.activity{color:#fff;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;width:10%;min-width:150px;height:200px;margin:15px;padding:15px;text-decoration:none;display:flex}.activity .activity-name{margin-top:25px;margin-bottom:5px;font-size:1.2rem;font-weight:700}.activity .activity-desc{text-align:center;color:gray;font-size:.8rem}.card{border:5px solid var(--accent);background-color:var(--accent-bg);border-radius:10px;transition:all .3s ease-in-out}.card:hover{background-color:var(--accent-hover-bg)}.music-sheet{grid-row-gap:100px;background-color:var(--bg);border:1px solid var(--border);width:90%;height:100%;box-shadow:var(--shadow);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-auto-rows:minmax(100px,1fr);padding:15% 2%;display:grid}.bar{z-index:1;background:0 0;width:100%;height:100px;position:relative}.bar span.line{top:calc(var(--id) * calc(100% / 4));background-color:#fff;width:100%;height:2px;position:absolute;left:0}.bar span.end-measure{background-color:#fff;width:2px;height:100%;position:absolute;top:0;right:0}.bar span.note{top:calc(var(--note-position) * calc(100px / 8));background-color:#fff;border-radius:100%;width:30px;height:25px;position:absolute;transform:skew(-15deg)}.bar span.four-time{left:calc(50% - 15px)}.bar span.four-time:before{content:"";background-color:var(--bg);border-radius:100%;width:25px;height:15px;position:absolute;top:5px;left:calc(50% - 12.5px);transform:skew(-25deg)}.bar span.two-time{left:calc(var(--note-id) * calc(33% - 15px))}.bar span.two-time:before{content:"";background-color:var(--bg);border-radius:100%;width:25px;height:15px;position:absolute;top:5px;left:calc(50% - 12.5px);transform:skew(-25deg)}.bar span.two-time:after{content:"";background:#fff;width:3px;height:75px;position:absolute;bottom:15px;left:17px;transform:skew(15deg)}.bar span.one-time{left:calc(var(--note-id) * calc(25% - 15px) - 15px)}.bar span.one-time:after{content:"";background:#fff;width:3px;height:75px;position:absolute;bottom:15px;left:17px;transform:skew(15deg)}.bar span.line-sup-odd{top:calc(var(--id) * calc(100%) * -1);width:50px;height:2px;transform:translateX(calc(var(--id) * -6px));background-color:#fff;position:absolute;left:-10px}.bar span.line-sup-even{top:calc(var(--id) * calc(100%) * -1 + 12px);width:50px;height:2px;transform:translateX(calc(var(--id) * -6px));background-color:#fff;position:absolute;left:-10px}.note-selection{flex-flow:wrap;justify-content:space-around;align-items:center;gap:20px;width:90%;height:fit-content;display:flex}.note-selection span{width:12.5%;height:50px;color:var(--text-h);background-color:var(--accent-bg);border:1px solid var(--accent-border);border-radius:5px;justify-content:center;align-items:center;transition:all .3s ease-in-out;display:flex}.note-selection span:hover{background-color:var(--accent-hover-bg);cursor:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3csvg%20role='img'%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%201024%201024'%20style='max-width:1.6em;%20height:%20auto;'%3e²%20%3cpath%20id='path'%20style='opacity:1;vector-effect:none;fill:light-dark(%23ffffff,%20%23000000);fill-opacity:1;'%20d='%20M%20698%20237C%20698%20237%20698%20362%20698%20362C%20698%20372%20691%20382%20681%20385C%20681%20385%20548%20430%20548%20430C%20548%20515%20548%20602%20548%20687C%20548%20689%20548%20691%20547%20693C%20545%20710%20535%20727%20523%20740C%20504%20760%20478%20775%20447%20782C%20416%20790%20386%20790%20360%20782C%20334%20774%20311%20756%20304%20729C%20297%20702%20309%20675%20327%20655C%20346%20636%20372%20621%20403%20613C%20434%20605%20464%20605%20490%20613C%20493%20614%20495%20615%20498%20616C%20498%20506%20498%20397%20498%20287C%20498%20276%20505%20266%20515%20263C%20515%20263%20665%20213%20665%20213C%20667%20212%20670%20212%20672%20212C%20686%20211%20698%20223%20698%20237C%20698%20237%20698%20237%20698%20237M%20548%20305C%20548%20305%20548%20377%20548%20377C%20548%20377%20648%20344%20648%20344C%20648%20344%20648%20271%20648%20271C%20648%20271%20548%20305%20548%20305M%20416%20661C%20393%20667%20374%20679%20364%20690C%20353%20701%20351%20710%20352%20717C%20354%20723%20360%20730%20375%20734C%20390%20739%20412%20740%20434%20734C%20457%20728%20476%20717%20486%20706C%20494%20697%20498%20690%20498%20685C%20499%20674%20487%20666%20475%20661C%20467%20659%20458%20657%20448%20657C%20438%20657%20427%20659%20416%20661C%20416%20661%20416%20661%20416%20661'%20transform=''%3e%3c/path%3e%3c/svg%3e") 26 44,pointer}.note-selection span.wrong{background-color:var(--wrong-bg);border-color:var(--wrong)}