@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}}@media (width<=750px){.topBar{font-size:1.7vh}p{font-size:2vh}}.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);box-shadow:0 0 5px var(--accent), 0 0 25px var(--accent), 0 0 50px var(--accent), 0 0 75px var(--accent)}.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(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}.bar span.treble-clef{background-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%2020010904//EN'%20'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3e%3csvg%20version='1.0'%20xmlns='http://www.w3.org/2000/svg'%20width='640.000000pt'%20height='1280.000000pt'%20viewBox='0%200%20640.000000%201280.000000'%20preserveAspectRatio='xMidYMid%20meet'%3e%3cmetadata%3e%20Created%20by%20potrace%201.15,%20written%20by%20Peter%20Selinger%202001-2017%20%3c/metadata%3e%3cg%20transform='translate(0.000000,1280.000000)%20scale(0.100000,-0.100000)'%20stroke='none'%20style='fill:%20light-dark(%23fff,%20%23000);'%3e%3cpath%20d='M4128%2012781%20c-166%20-53%20-386%20-249%20-543%20-482%20-83%20-123%20-238%20-429%20-314%20-622%20-167%20-425%20-246%20-822%20-258%20-1307%20-9%20-350%2013%20-649%2088%20-1209%2039%20-293%2040%20-305%2022%20-321%20-10%20-9%20-112%20-96%20-228%20-192%20-829%20-692%20-1259%20-1160%20-1574%20-1715%20-183%20-323%20-306%20-697%20-352%20-1068%20-16%20-126%20-16%20-417%200%20-555%2044%20-391%20178%20-789%20374%20-1115%20138%20-230%20375%20-500%20587%20-669%20400%20-318%20859%20-520%201292%20-567%20127%20-14%20488%20-5%20608%2014%2047%208%2087%2013%2088%2011%202%20-1%2042%20-285%2089%20-631%20l85%20-628%202%20-235%20c1%20-249%20-5%20-311%20-51%20-475%20-106%20-384%20-378%20-636%20-766%20-710%20-103%20-20%20-326%20-19%20-439%200%20-191%2034%20-347%20104%20-443%20199%20l-60%2060%20105%208%20c315%2025%20509%20136%20615%20351%2052%20106%2068%20196%2062%20352%20-9%20227%20-71%20380%20-212%20520%20-89%2089%20-157%20133%20-267%20173%20-66%2024%20-86%2027%20-213%2027%20-111%200%20-151%20-4%20-195%20-19%20-242%20-83%20-419%20-260%20-499%20-501%20-43%20-128%20-55%20-219%20-48%20-360%2021%20-408%20258%20-772%20627%20-963%20111%20-58%20213%20-94%20354%20-124%20132%20-28%20450%20-31%20590%20-5%20411%2078%20705%20256%20893%20543%20202%20308%20250%20656%20169%201239%20-86%20627%20-167%201237%20-164%201239%202%202%2039%2015%2083%2030%20298%20105%20598%20308%20790%20537%20313%20373%20455%20839%20416%201366%20-23%20312%20-79%20530%20-197%20768%20-113%20229%20-270%20418%20-469%20568%20-101%2076%20-308%20183%20-430%20222%20-183%2060%20-417%2091%20-582%2079%20-91%20-6%20-92%20-6%20-97%2017%20-3%2013%20-22%20146%20-41%20294%20-20%20149%20-58%20436%20-86%20640%20l-50%20370%2028%2024%20c91%2077%20389%20360%20514%20487%20506%20518%20752%201038%20834%201764%2057%20512%2060%20849%209%201215%20-68%20493%20-208%20904%20-401%201177%20-133%20189%20-202%20225%20-345%20179z%20m284%20-1129%20c100%20-44%20172%20-142%20204%20-279%2019%20-82%2021%20-275%204%20-388%20-40%20-274%20-185%20-663%20-344%20-925%20-147%20-240%20-434%20-586%20-662%20-795%20-164%20-151%20-264%20-238%20-268%20-234%20-4%204%20-25%20147%20-46%20312%20-51%20406%20-25%20763%2084%201139%20132%20451%20309%20792%20526%201008%20108%20107%20171%20149%20270%20177%2060%2017%20173%2010%20232%20-15z%20m-1043%20-4513%20l77%20-577%20-56%20-17%20c-229%20-71%20-507%20-257%20-672%20-449%20-251%20-293%20-390%20-635%20-405%20-996%20-15%20-383%20122%20-753%20372%20-1006%20143%20-146%20306%20-238%20477%20-272%2071%20-14%2079%20-14%20102%202%2030%2019%2034%2056%2010%2081%20-9%209%20-44%2030%20-78%2047%20-249%20125%20-411%20349%20-462%20641%20-73%20415%20180%20878%20579%201062%2067%2031%20234%2082%20242%2073%201%20-1%2077%20-563%20168%20-1248%20113%20-848%20162%20-1247%20155%20-1251%20-6%20-4%20-56%20-14%20-112%20-23%20-284%20-43%20-581%20-46%20-780%20-6%20-408%2081%20-848%20336%20-1099%20639%20-305%20366%20-448%20745%20-448%201183%200%20237%2031%20425%20106%20653%20139%20424%20366%20769%20795%201208%20265%20272%20942%20878%20949%20849%202%20-9%2038%20-276%2080%20-593z%20m596%20-1415%20c166%20-32%20355%20-114%20487%20-214%2095%20-72%20235%20-224%20291%20-317%20135%20-225%20184%20-429%20174%20-728%20-12%20-391%20-132%20-688%20-367%20-909%20-107%20-101%20-313%20-226%20-411%20-251%20l-25%20-6%20-27%20203%20c-15%20112%20-54%20401%20-87%20643%20-173%201284%20-210%201562%20-210%201582%200%2021%203%2022%2048%2017%2026%20-3%2083%20-12%20127%20-20z'/%3e%3c/g%3e%3c/svg%3e");background-position:50%;background-repeat:no-repeat;background-size:cover;width:60px;height:150%;position:absolute;top:-20%;left:10px}@media screen and (width<=750px){.music-sheet{padding:20% 2%}}.note-selection{flex-flow:wrap;justify-content:space-around;align-items:center;gap:10px;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)}