@import"https://fonts.googleapis.com/css2?family=Handlee&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root,body,html{margin:0;padding:0;width:100vw;min-height:100vh;font-family:Libre Baskerville,serif;font-optical-sizing:auto;font-weight:400;font-style:normal;overflow:hidden}body,html{color:#fff;background:#000}.media-element{position:absolute;width:100%;height:100%;background-size:cover;background-position:center}.panel:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}.panel[data-panel=main]:first-of-type:after{background-image:linear-gradient(to right,#000000e6,#000c),url(/pc-background.gif)}.panel[data-panel=about]:first-of-type:after{background-image:linear-gradient(to left,#000000e6,#000000b3),url(/drums-cat-background.gif)}.panel[data-panel=about]:nth-of-type(2):after{background-image:linear-gradient(to right,#000000e6,#000000b3),url(/about-home.png)}.panel[data-panel=about]:nth-of-type(4):after{background-image:linear-gradient(to right,#000000e6,#000000b3),url(/about-school.png)}.panel[data-panel=about]:nth-of-type(5):after{background-image:linear-gradient(to right,#000000e6,#000000b3),url(/about-university.png)}.panel[data-panel=portfolio]:first-of-type:after{background-image:linear-gradient(to right,#000,#000000b3),url(/keyboard-background.gif)}.main-title{grid-area:header;text-align:center;font-size:2rem;width:100%;font-family:Handlee,cursive;font-weight:400;font-style:normal;transform:translateY(-50%);z-index:10;margin-top:6rem;margin-bottom:0}button:focus{outline:none}.scroll-container{scroll-snap-type:y mandatory;overflow-y:scroll;overflow-x:hidden;height:100vh}.panel{position:relative;min-height:100vh;width:100vw;display:flex;align-items:center;justify-content:center;flex-direction:column;scroll-snap-align:start;overflow-y:hidden}.panel.hidden{display:none}.panel-content{grid-area:content;width:60vw;font-size:.8rem;line-height:1.4;z-index:10;padding:3rem 0 8rem}.panel-image{grid-area:image;margin-top:1rem;width:60vw;border-radius:8px;z-index:10;position:relative}.panel-image img{width:auto;height:auto;border-radius:8px;max-height:400px;max-width:60vw;margin:0 auto;display:flex;z-index:10;position:relative;box-shadow:10px 10px 10px 10px #00000080}.panel-image img:hover{transform:scale(1.2);transition:transform .3s ease-in-out;cursor:zoom-in}.panel-image a img:hover{cursor:pointer}.panel-image img:not(:first-of-type){position:absolute;top:10%;left:50%;z-index:1;transform:scale(1.2)}@media (min-width: 768px){.main-title{font-size:3rem}.panel-content{font-size:1.2rem}.panel.with-images{display:grid;grid-template-areas:"header header" "content image";grid-template-columns:1fr 1fr}.panel.with-images .main-title{grid-column:1 / span 2;transform:translateY(0)}.panel.with-images .panel-content,.panel.with-images .panel-image{width:40vw;margin-left:10vw}}@media (min-width: 1200px){.main-title{font-size:4.5rem}.panel-content{font-size:1.5rem}}.scroll-continue-arrow{position:absolute;bottom:10vh;left:50%;width:60px;height:75px;transform:translate(-50%);font-size:2rem;color:#fff;animation:bounce 2s infinite;stroke:#fff;stroke-width:2px;overflow:hidden;animation:pulse 1.5s ease-in-out infinite;z-index:20;fill:none}.cursor{display:inline-block;margin-left:4px;font-weight:700;color:#fff;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:0}}.typewriter-highlight{position:relative;display:inline-block;color:#d63;font-weight:700;text-decoration:none;transition:all .3s ease}.typewriter-highlight svg{color:#d63}a.typewriter-highlight{cursor:pointer}a.typewriter-highlight:hover{color:#f84;text-decoration:underline}.typewriter-highlight:hover svg{display:none}.typewriter-circle{position:absolute;top:50%;left:49%;transform:translate(-50%,-52%) rotate(-2deg) scaleX(1.05);width:calc(100% + 25px);height:calc(100% + 22px);pointer-events:none;z-index:10}.typewriter-circle ellipse{stroke-dasharray:100;stroke-dashoffset:100;filter:url(#roughPaper);animation:drawHandCircle .6s cubic-bezier(.4,0,.2,1) forwards}.typewriter-highlight.fully-revealed{animation:glowPulse 2s ease-in-out infinite;animation-delay:.6s}@keyframes drawHandCircle{0%{stroke-dashoffset:100;opacity:0;transform:rotate(0)}10%{opacity:.9}40%{transform:rotate(.2deg)}70%{transform:rotate(-.3deg)}to{stroke-dashoffset:0;opacity:.8;transform:rotate(0)}}.typewriter-highlight:nth-child(odd) .typewriter-circle{transform:translate(-50%,-51%) rotate(2deg) scaleX(.95)}.typewriter-highlight:nth-child(2n) .typewriter-circle{transform:translate(-51%,-52%) rotate(-3deg) scaleY(1.08)}.typewriter-highlight:nth-child(3n) .typewriter-circle{transform:translate(-49%,-50%) rotate(1deg) scaleX(1.02) scaleY(.98)}.typewriter-highlight:hover .typewriter-circle ellipse{animation:redrawCircle .4s ease-out}@keyframes redrawCircle{0%{stroke-dashoffset:0}50%{stroke-dashoffset:50;opacity:.6}to{stroke-dashoffset:0;opacity:.9}}@keyframes glowPulse{0%,to{text-shadow:0 0 5px rgba(200,155,100,.5)}50%{text-shadow:0 0 20px rgba(200,155,100,.9),0 0 30px rgba(200,155,100,.6)}}.typewriter-highlight.warning{color:#fc0}.typewriter-highlight.warning:before{border-color:#fc0}.typewriter-highlight.danger{color:#f05}.typewriter-highlight.danger:before{border-color:#f05}.typewriter-highlight.info{color:#00d4ff}.typewriter-highlight.info:before{border-color:#00d4ff}.nav-toggle{position:fixed;top:2rem;right:2rem;width:60px;height:60px;background:transparent;border:none;cursor:pointer;z-index:1000;padding:0;outline:none}.nav-icon{width:100%;height:100%;overflow:visible}.nav-icon path,.nav-icon circle{stroke:#fff;stroke-width:4;stroke-linecap:round;fill:none;transition:all .4s cubic-bezier(.4,0,.2,1);transform-origin:center}.icon-path,.search-group,.close-group{opacity:0;pointer-events:none;transform:scale(.8);transition:opacity .3s ease,transform .4s cubic-bezier(.34,1.56,.64,1)}.search-group circle,.search-group path,.close-group path{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .5s ease-in-out}.icon-path.active,.search-group.active,.close-group.active{opacity:1;transform:scale(1)}.icon-path{stroke-dasharray:60;stroke-dashoffset:60}.icon-path.active{stroke-dashoffset:0}.hamburger-top.active{transition-delay:0s}.hamburger-mid.active{transition-delay:.1s}.hamburger-bot.active{transition-delay:.2s}.search-group.active circle,.search-group.active path{stroke-dashoffset:0}.close-group.active path{stroke-dashoffset:0}.nav-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000;z-index:999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s ease}.nav-overlay.visible{opacity:1;pointer-events:auto}.nav-overlay nav{display:flex;flex-direction:column;gap:.75rem;text-align:center}.nav-overlay a{font-family:Handlee,cursive;font-size:1.5rem;color:#fff;text-decoration:none;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;cursor:pointer}@media (min-width: 768px){.nav-overlay nav{gap:1.5rem}.nav-overlay a{font-size:2.5rem}}.nav-overlay a:hover{text-decoration:underline;text-decoration-thickness:2px}.nav-overlay.visible a{opacity:1;transform:translateY(0)}.nav-overlay a.active{color:#d63}form.contact-form{width:50%;z-index:10;padding-bottom:40px}form.contact-form label{display:inline-block;margin-bottom:8px;font-weight:700;width:100%}form.contact-form input,form.contact-form textarea{margin-bottom:16px;border:1px solid #ccc;border-radius:4px;width:100%;padding:10px;box-sizing:border-box}form.contact-form button{padding:10px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;width:100%}form.contact-form button:hover{background-color:#0056b3}