@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kode+Mono:wght@400..700&display=swap";:root{--bg-color-1: #1D2021;--bg-color-2: #282828;--bg-color-3: #3C3836;--fg-color-1: #FBF1C7;--fg-color-2: #EBDBB2;--fg-color-3: #D5C4A1;--blue-1: #234B56;--blue-2: #458588;--blue-3: #83A598;--red-1: #CC241D;--red-2: #FB4934;--green-1: #98971A;--green-2: #B8BB26;--primary-font: "Kode Mono", monospace;--text-font: "Inter", sans-serif;--page-margin: 15vw;--content-margin: 10vw}p,li,span{font-family:var(--text-font);color:var(--fg-color-3);font-size:clamp(1rem,1.5vw,2rem)}h1,h2,h3,h4,h5{font-family:var(--primary-font)}h1{font-size:clamp(2rem,4vw,4rem);font-weight:200;color:var(--fg-color-1)}h2{color:var(--fg-color-2);font-size:clamp(1.5rem,2vw,4rem)}h3{color:var(--fg-color-3);font-size:clamp(1.25rem,1vw,4rem)}h4{color:var(--fg-color-3);font-size:clamp(1rem,.75vw,2rem)}body{background-color:var(--bg-color-1)}*{margin:0;padding:0;transition:.2s}button{outline:none;cursor:pointer;border:none}a{text-decoration:none;text-decoration-color:inherit;color:inherit;text-align:center}a:visited,a:active,a:enabled{color:inherit}ul{list-style:none}html{scroll-behavior:smooth}.nav-container{margin:0 var(--content-margin);width:calc(100% - 2 * var(--content-margin))}.nav-list{display:flex;width:100%;flex-direction:row;align-items:flex-start;justify-content:center;flex-wrap:wrap;gap:2rem}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;border:.5px solid var(--fg-color-1);font-size:1.5rem;width:20vw;height:100%;background-color:color-mix(in srgb,var(--fg-color-1),transparent 95%)}.nav-item a{padding:1rem;height:100%;width:100%;text-align:center}.nav-item:hover{cursor:pointer;background-color:var(--fg-color-1);color:var(--bg-color-1)}.blog-item-container{background:linear-gradient(135deg,color-mix(in srgb,var(--bg-color-3),var(--fg-color-3) 10%),var(--bg-color-3));padding:2rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:calc(100% - 4rem);border:1px solid var(--fg-color-1);gap:1rem}.blog-item-header{font-weight:700;font-size:3rem}.blog-item-subheader{font-size:1.5rem;font-size:200;margin-bottom:.5rem;opacity:.8}.blog-item-content{font-size:1.5rem}.home-page-container{background-color:var(--bg-color-1);display:flex;z-index:-2}.home-page-content{background-color:var(--bg-color-2);min-height:100vh;margin:0 var(--page-margin);padding:2rem 0;display:flex;flex-direction:column;align-items:flex-start;gap:2rem;min-width:calc(100% - 2 * var(--page-margin));z-index:1}.home-page-status strong{font-weight:200;text-decoration:underline}.home-page-header-container{margin:0 var(--content-margin);margin-top:1rem;display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:2rem}.home-page-pfp-container{position:relative;z-index:1;height:100%}.home-page-pfp-image{filter:saturate(0%);height:100%;width:100%}.home-page-pfp-container:after{content:"";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--fg-color-3);z-index:5;opacity:.3}.home-page-about-container{padding:1rem var(--content-margin);background-color:var(--bg-color-3);display:flex;flex-direction:column;align-items:flex-start;min-width:calc(100% - 2 * var(--content-margin))}.home-page-about-content{margin-bottom:.5rem}.home-page-about-button{margin-top:2rem;padding:.5em 1em;align-self:flex-end;font-weight:400;background-color:var(--blue-3);font-size:1.5rem;width:clamp(10em,20vw,20em)}.home-page-about-button>a{display:flex;flex-direction:column;align-items:center;justify-content:center}.home-page-about-button:hover{background-color:color-mix(in srgb,var(--blue-3),white 20%)}.home-page-blog-container{margin:0 var(--content-margin);width:calc(100% - 2 * var(--content-margin))}.home-page-blog-header{position:relative;margin-bottom:1rem}.home-page-blog-header:after{position:absolute;content:"";bottom:0;left:0;height:1px;width:50%;border-bottom:1px dashed var(--fg-color-1)}.home-page-blog-item-list{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:2rem;width:100%;gap:3rem}.blog-page-container{position:relative;background-color:var(--bg-color-1);display:flex;margin:0 var(--page-margin)}.blog-page-content{position:relative;background-color:var(--bg-color-2);min-height:100vh;display:flex;padding:60px var(--content-margin);flex-direction:column;align-items:flex-start;gap:1rem;width:100%}.blog-page-header-container{margin-top:1rem}.blog-page-blog-item-container{margin-top:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;width:100%}.return-home-link,.return-home-link:visited,.return-home-link:active{color:var(--fg-color-1);padding:1rem;border:.5px solid color-mix(in srgb,var(--fg-color-3),transparent 50%);border-radius:5px;font-size:24px}.return-home-link:hover{background-color:var(--bg-color-3)}@media screen and (max-width: 800px){:root{--page-margin: 2vw}}@media screen and (max-width: 1000px){:root{--page-margin: 4vw}}@media screen and (max-width: 1200px){:root{--page-margin: 6vw}}@media screen and (max-width: 1400px){:root{--page-margin: 8vw}}.blog-post-container{background-color:var(--bg-color-1);display:flex;flex-direction:row;gap:2rem;margin:0 var(--page-margin);margin-top:60px}.blog-post-content{flex:8;padding:var(--content-margin);background-color:var(--bg-color-2);min-height:100vh;border-radius:5px;border:.5px solid color-mix(in srgb,var(--fg-color-1),transparent 80%);display:flex;flex-direction:column;align-items:flex-start;gap:1rem}.blog-post-toc-container{padding:2rem;height:100%;border:.5px solid color-mix(in srgb,var(--fg-color-1),transparent 80%);top:10px}@media screen and (max-width: 1000px){.blog-post-toc-container{display:none}}.blog-post-toc-list{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.blog-post-toc-item:hover{cursor:pointer}.blog-post-nav-container{margin-top:1rem}.blog-post-title-container{margin-top:4rem}.blog-post-text-content-container{margin-top:1rem;line-height:2em}.blog-post-text-content{margin-top:1rem}.blog-page-blog-item-container{margin:0 var(--content-margin);min-width:calc(100% - 2 * var(--content-margin))}.blog-post-toc-container{background-color:var(--bg-color-2)}.blog-post-toc-list{display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%}.blog-post-toc-item{font-size:1.5rem;color:var(--fg-color-1)}.blog-post-toc-item:visited{color:var(--fg-color-1)}.blog-post-text-content-container code{background-color:var(--bg-color-1);color:var(--blue-2);padding:.25rem}.blog-post-text-content-container strong{color:var(--red-2)}.blog-post-text-content-container ul{list-style:circle;padding-left:2rem;margin-bottom:1em}.blog-post-text-content-container h1{font-size:calc(2rem + .5vw);line-height:calc(1em + 1rem);margin-top:.5em}.blog-post-text-content-container h2{margin-bottom:.5em}.blog-post-text-content-container p{margin-bottom:1em;font-size:calc(1rem + .2vw)}.blog-post-text-content-container a{color:var(--green-1);text-decoration:underline}.blog-post-text-content-container li{font-size:calc(1rem + .2vw)}.blog-post-text-content-container img{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:auto;max-width:100%}.blog-post-text-content-container details{position:relative;background-color:var(--bg-color-3);padding:1rem;color:var(--fg-color-3);border:.5px solid color-mix(in srgb,var(--fg-color-1),transparent 80%)}.blog-post-text-content-container details:before{content:"";position:absolute;top:0;left:0;width:2px;height:100%;background-color:var(--fg-color-3)}.blog-post-text-content-container summary{color:var(--fg-color-1)}.blog-post-text-content-container h1 code{background-color:#0000;color:var(--fg-color-1);padding:0}.error-page-container{background-color:var(--bg-color-2);min-height:100vh;margin:0 var(--page-margin);padding:2rem 0;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;min-width:calc(100% - 2 * var(--page-margin))}.error-page-header{padding:2rem 0;margin:0 var(--content-margin);margin-top:1rem}.error-page-content{padding:1rem var(--content-margin);display:flex;flex-direction:column;align-items:flex-start;min-width:calc(100% - 2 * var(--content-margin))}:root{--content-margin: 6vw}.keyboard-page-container{background-color:var(--bg-color-1);display:flex;margin:0 var(--page-margin)}.keyboard-page-content{background-color:var(--bg-color-2);padding:0 var(--content-margin);min-height:100vh;width:100;border-radius:5px;border:.5px solid color-mix(iqn srgb,var(--fg-color-1),transparent 80%);display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:60px var(--content-margin)}.keyboard-page-headers{margin-top:1rem}.keyboard-page-canvas-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5rem;width:calc(100vw - 2 * var(--page-margin));background-color:var(--bg-color-1);margin:auto;border:1px solid #bbb;border-radius:10px;box-shadow:0 0 50px #141414;padding:2vw 0}.keyboard-page-canvas{border:10px solid var(--fg-color-3)}.keyboard-page-button-container{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:2rem;padding:2rem}.keyboard-page-button{font-size:24px;padding:1em 1.5em;color:var(--fg-color-1);background-color:none;background:none;border:.5px solid var(--fg-color-1)}.keyboard-page-button:hover{background-color:var(--bg-color-3)}.melody-icon-list{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:2vw;overflow:scroll;width:calc(100% - 5vw);background-color:var(--bg-color-2);padding:2rem}.melody-icon-container{border:1px solid var(--fg-color-1);padding:2rem 3rem;min-width:200px}.melody-icon-container:hover{cursor:pointer;background-color:color-mix(in srgb,var(--fg-color-1),transparent 80%)}.challenge-page-container{position:relative;background-color:var(--bg-color-1);display:flex;margin:0 var(--page-margin);align-items:center}.challenge-page-content{background-color:var(--bg-color-2);min-height:100vh;padding:60px var(--content-margin);display:flex;flex-direction:column;align-items:flex-start;gap:1rem;width:100%}.challenge-page-header-container{margin-top:1rem}.challenge-page-challenge-item-container{display:flex;flex-direction:column;gap:2rem;width:100%}.challenge-item-container{display:flex;flex-direction:row;width:100%;border:1px solid var(--fg-color-1);justify-content:space-between;align-items:center;border-radius:5px;padding:2rem}.challenge-item-container:hover{cursor:pointer;background-color:color-mix(in srgb,var(--fg-color-1),transparent 90%)}.challenge-item-tag-list{display:flex;flex-direction:row;gap:2rem}.challenge-item-tag{padding:.5rem .75rem;border:.5px solid var(--fg-color-3);border-radius:5px}.challenge-item-points{font-weight:400;font-size:48px}.gallery-page-container{background-color:var(--bg-color-1);display:flex;margin:0 var(--page-margin)}.gallery-page-content{position:relative;background-color:var(--bg-color-2);min-height:calc(100vh - 120px);display:flex;padding:60px var(--content-margin);flex-direction:column;align-items:flex-start;gap:1rem;width:100%}.gallery-page-header-container{margin-top:1rem}.gallery-page-gallery-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem;width:100%}.gallery-page-gallery-item{height:clamp(8rem,15vw,20rem)}.gallery-page-gallery-image{height:100%;width:100%}.gallery-page-modal-container{top:0;left:0;width:100%;height:100%;background-color:#000000b3;position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden}.gallery-page-modal-header-container{background-color:var(--bg-color-1);padding:2rem;width:calc(100% - 4rem);display:flex;flex-direction:row;justify-content:space-between;align-items:center}.gallery-page-modal-close{height:2rem;width:2rem}.gallery-page-modal-center-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:100%;width:100%}.gallery-page-modal-center-svg{height:10vw;width:10vw}.gallery-page-modal-image{z-index:3;max-height:100%;max-width:80vw}.gallery-hidden{opacity:.3}.repetoire-page-container{background-color:var(--bg-color-1);display:flex;margin:0 var(--page-margin)}.repetoire-page-content{position:relative;background-color:var(--bg-color-2);min-height:calc(100vh - 120px);display:flex;padding:60px var(--content-margin);flex-direction:column;align-items:flex-start;gap:1rem;width:100%}.repetoire-page-header-container{margin-top:1rem}