@import"https://fonts.googleapis.com/css2?family=Anton&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap";@import"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";.navbar{--bar-width: 40px;--bar-height: 5px;--hamburger-gap: 5px;--foreground: lightgray;--background: lightgray;--hamburger-margin: 8px;--animation-timing: .2s ease-in-out;--hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);--x-width: calc(var(--hamburger-height) * 1.41421356237);top:0;left:0;width:100%;color:#fff;position:fixed;display:flex;white-space:nowrap;text-overflow:ellipsis;padding-inline:1em;line-height:1;z-index:100}.navbar:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;background:#00000080;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);box-shadow:0 4px 8px #0003}.navbar a{color:inherit;text-decoration:none}.navbar ul{list-style:none;justify-content:space-around;align-items:center}.navbar>.navHome{flex:1;font-family:Anton,sans-serif;font-size:clamp(1.4rem,2.3vw,2.3vw);align-content:center;padding:2vh 0}.navbar>.navHome>a:hover{text-shadow:0 0 5px #dcdcdc,0 0 10px #dcdcdc,0 0 15px #dcdcdc,0 0 20px #dcdcdc,0 0 25px #dcdcdc,0 0 30px #dcdcdc}.navbar>nav{height:auto}.navbar>nav>ul{display:flex;height:100%}.navbar>nav>ul>*{height:100%;align-content:center;padding:1em}.navbar>nav>ul>li>a{font-size:clamp(1.5rem,1.5vw,1.5vw)}.navbar>nav>ul .dropdown .fa-caret-down{margin-left:8px;transition:transform .5s}.navbar>nav>ul .dropdown .dropdown-button{font-size:1rem;border:none;outline:none;color:inherit;background-color:inherit;font-family:inherit;margin:0}.navbar>nav>ul .dropdown .dropdown-content{display:none;position:absolute;right:10px;top:80%;border-radius:10px;max-height:90vh;z-index:101;padding:1em;white-space:nowrap;text-overflow:ellipsis;overflow-y:auto}.navbar>nav>ul .dropdown .dropdown-content ul{display:grid;grid-template-columns:1fr 1fr;gap:.7em}.navbar>nav>ul .dropdown .dropdown-content ul li{padding:.5em .75em}.navbar>nav>ul .dropdown:hover .dropdown-content{display:block}.navbar>nav>ul .dropdown:hover .fa-caret-down{color:var(--hover-color);transform:rotate(180deg)}.navbar>.menuBtn{display:none}.navbar:has(input:not(:checked)){transition:transform .3s ease}.navbar:has(input:not(:checked)):is(.scrollUp,.navbar:has(input:not(:checked)):hover){transform:translateY(0)}.navbar:has(input:not(:checked)).scrollDown{transform:translateY(-100%)}@media not (max-width:600px){.navbar nav>ul>li>a:hover{text-shadow:0 0 5px #dcdcdc,0 0 10px #dcdcdc,0 0 15px #dcdcdc,0 0 20px #dcdcdc,0 0 25px #dcdcdc,0 0 30px #dcdcdc}}@media(max-width:600px){.navbar nav{width:auto;max-height:90vh;position:absolute;top:85%;right:5px;transition:translate var(--animation-timing);translate:110%;overflow-y:auto;overflow-x:hidden;padding:1em;border-radius:10px;background:#00000080;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);box-shadow:0 4px 8px #0003;border:1px solid rgba(255,255,255,.3)}.navbar nav>ul{display:flex;flex-direction:column;align-items:start;justify-items:center;height:auto}.navbar nav>ul>*{padding:.5em .75em}.navbar nav>ul .dropdown{padding-right:1em;padding-bottom:0}.navbar nav>ul .dropdown .dropdown-content{position:static;display:block;width:100%;box-shadow:none;padding-block:0;padding-inline:0;padding:0 0 0 1em;margin-block:.5em;margin-inline-start:.2em;border:none;border-left:1px solid #a9a9a9;font-size:.9rem;border-radius:0}.navbar nav>ul .dropdown .dropdown-content>ul{row-gap:0}.navbar nav>ul .dropdown .fa-caret-down{display:none}.navbar nav li>a:hover{text-shadow:0 0 5px #dcdcdc,0 0 10px #dcdcdc,0 0 15px #dcdcdc,0 0 20px #dcdcdc,0 0 25px #dcdcdc,0 0 30px #dcdcdc}.navbar .menuBtn{display:flex;flex-direction:column;gap:var(--hamburger-gap);width:max-content;position:absolute;top:var(--hamburger-margin);right:var(--hamburger-margin);z-index:102;cursor:pointer}.navbar .menuBtn:has(input:checked){--foreground: lightgray;--background: lightgray}.navbar .menuBtn:has(input:focus-visible):before,.navbar .menuBtn:has(input:focus-visible):after,.navbar .menuBtn input:focus-visible{border:1px solid var(--background);box-shadow:0 0 0 1px var(--foreground)}.navbar .menuBtn:before,.navbar .menuBtn:after,.navbar .menuBtn input{content:"";width:var(--bar-width);height:var(--bar-height);background-color:var(--foreground);border-radius:9999px;transform-origin:left center;transition:opacity var(--animation-timing),width var(--animation-timing),rotate var(--animation-timing),translate var(--animation-timing),background-color var(--animation-timing)}.navbar .menuBtn input{appearance:none;padding:0;margin:0;outline:none;pointer-events:none}.navbar .menuBtn:has(input:checked):before{rotate:45deg;width:var(--x-width);translate:0 calc(var(--bar-height) / -2)}.navbar .menuBtn:has(input:checked):after{rotate:-45deg;width:var(--x-width);translate:0 calc(var(--bar-height) / 2)}.navbar .menuBtn input:checked{opacity:0;width:0}.navbar .menuBtn:has(input:checked)+nav{translate:0}.navbar .menuBtn:hover:before,.navbar .menuBtn:hover:after,.navbar .menuBtn:hover input{box-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff,0 0 5px #fff,0 0 6px #fff}}#root{--padding-inline: 2vw;--font-size: 1.5rem}#root a[target=_blank]{color:#0000cd;font-weight:700}#root a[target=_blank]:visited{color:#0000cd}#root a.externalLink{font-weight:400;text-decoration:none;color:#000!important;font-size:clamp(.85rem,1.4vw,1rem);display:inline-block;max-width:100%;overflow-wrap:anywhere;word-break:break-word}#root a.externalLink:hover{color:#0000cd!important}#root .box-onview{display:inline-block;opacity:0;transform:translateY(50px);transition:opacity .5s ease-out,transform 1s ease-out;box-sizing:border-box;margin:0;padding:0}#root .box-onview.shown{opacity:1;transform:translateY(0)}@media(prefers-reduced-motion:reduce){#root .box-onview{transition:none;transform:none}}#root>main{padding-inline:var(--padding-inline);font-size:var(--font-size);transition:background-color 1s linear;overflow-x:hidden}#root>main .main-content{max-width:1320px;margin:0 auto;padding:0 4px}#root>main.view-home{background-color:#dcdcdc}#root>main.view-about{background-color:#4682b4}#root>main.view-projects{background-color:teal}#root>main.view-contact{background-color:#deb887}@media(max-width:425px){#root{--padding-inline: 1vw;--font-size: 1rem}#root .mobile-hide{display:none}#root .mobile-wrap{flex-wrap:wrap}#root .mobile-text-center{text-align:center}}@keyframes rotate{to{transform:rotate(360deg)}}#home{min-height:100vh;min-height:100svh;width:100%;display:grid;grid-template-columns:3fr 1fr}#home .banner{align-content:center;overflow:hidden;font-family:Anton,sans-serif;font-weight:400;font-style:normal;cursor:default;text-align:center}#home .banner h1{line-height:1.15;white-space:normal}#home .banner h1:first-child{font-size:clamp(2rem,5.5vw,5rem);color:#202020}#home .banner h1:last-child{font-size:clamp(1.5rem,4.5vw,4rem);color:#bb5e1b}#home .contactme{align-content:center;min-width:140px}#home .contactme>div{width:fit-content;height:fit-content;text-align:center;margin-inline:auto;position:relative}#home .contactme>div svg{max-width:120px;animation:rotate 40s linear infinite}#home .contactme>div svg .svgStyles{shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd}#home .contactme>div svg .fill{fill:#202020;fill-rule:nonzero}#home .contactme>div a{display:block;position:absolute;inset:0;cursor:pointer;font-family:Anton,sans-serif;font-weight:400;font-size:clamp(1px,10vw,18px);line-height:1.2;color:#fff;text-decoration:none;align-content:center;z-index:100;transition:text-shadow 5s ease-out;white-space:nowrap}#home .contactme>div a:hover{transition-duration:1s;text-shadow:0 0 5px #dcdcdc,0 0 10px #dcdcdc,0 0 15px #dcdcdc,0 0 20px #dcdcdc,0 0 25px #dcdcdc,0 0 30px #dcdcdc}#home .contactme>div:hover svg{animation-play-state:paused}@media(max-width:768px){#home{grid-template-columns:1fr;grid-template-rows:1.2fr 1fr}#home .banner{align-content:end}}#about{padding-block:2vh;gap:2vw;color:#000;display:flex;flex-direction:column}#about .box-onview>div{min-height:100%;padding:2vw;border-radius:clamp(5px,2vw,20px);box-shadow:0 4px 8px #0003}#about .box-onview>div>*{align-content:center}#about .box-onview>div h2{font-family:Anton,sans-serif;font-size:2rem;font-style:normal;margin-bottom:2vh}@media(max-width:600px){#about .box-onview>div h2{font-size:1.5rem}#about .box-onview>div p,#about .box-onview>div li{font-size:1.2rem}}#about .about-top{display:grid;grid-template-columns:1.7fr 1fr;gap:2vw;align-items:stretch}#about .about-side{display:grid;grid-template-rows:repeat(3,auto);gap:2vw}#about .about-side li{font-size:1.1rem}@media(max-width:900px){#about .about-top{grid-template-columns:1fr}}@media(max-width:425px){#about .box-onview{justify-self:center}#about .box-onview>div{min-height:unset;width:90vw}#about .box-onview p{margin-top:.9rem}}#about ul{margin-inline:1em}#about p+p{margin-top:1rem}#about .description{background-color:#a8ccee}#about .skills{background-color:#d9d9d9}#about .skills .skills-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 1.5rem}#about .skills .skills-group h3{font-family:Anton,sans-serif;font-size:clamp(1rem,2vw,1.2rem);margin:0 0 .5rem;color:#202020;letter-spacing:.5px}#about .skills .skill-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}#about .skills .skill-chips li{background-color:#5f9ea0;font-family:Roboto Condensed,sans-serif;font-optical-sizing:auto;font-style:normal;font-size:clamp(.8rem,1.1vw,.95rem);color:#fff;padding:.45em .9em;border-radius:6px;white-space:nowrap}@media(max-width:1024px){#about .skills .skills-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:768px){#about .skills .skills-groups{grid-template-columns:1fr}#about .skills .skill-chips li{font-size:clamp(.8rem,3.2vw,.95rem);white-space:normal}}#about .frontend{background-color:#ecdcb2}#about .backend{background-color:#b8eccd}#about .desktop{background-color:#edadee}#about .messageme{background-color:#d9d9d9}#projects{padding-top:4vh;line-height:1.2}#projects>h1{font-family:Anton,sans-serif;font-style:normal;width:100%;text-align:center;font-size:clamp(1.5rem,4vw,2rem);margin:0 0 1em}#projects>div{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:row;gap:2vw;align-content:center}@media(max-width:620px){#projects>div{grid-template-columns:1fr}}#projects>div .box-onview>div{background-color:#fff;padding:2vw;border-radius:clamp(5px,2vw,20px);box-shadow:0 4px 8px #0003;min-height:100%;color:#000;display:flex;flex-direction:column;align-items:flex-start}#projects>div .box-onview>div .header{margin-bottom:1.5vh;display:flex;align-items:baseline;flex-wrap:wrap}#projects>div .box-onview>div .header h2{font-family:Anton,sans-serif;font-size:1.5rem;font-style:normal;margin-right:15px;margin-bottom:.5vh}#projects>div .box-onview>div .header span{margin:0;padding:0;font-size:1.2rem;font-weight:700;text-wrap:nowrap}#projects>div .box-onview>div .notecap{font-size:1rem}#projects>div .box-onview>div>p{margin-bottom:1rem;font-size:1.3rem}@media(max-width:600px){#projects>div .box-onview>div>p{font-size:1.1rem}}#projects>div .box-onview>div .cmdlink{display:inline-block;width:auto;font-size:1.3rem}#projects>div .box-onview>div .underconSVG{margin:auto}#contact{display:flex;justify-content:center;align-items:center;color:#000;padding-block:1vw 8vw}#contact .box-onview{width:100%}#contact .box-onview .container{padding:2vw 4vw 4vw;border-radius:clamp(5px,2vw,20px);background-color:#fdf5e6;box-shadow:4px 8px 15px #0003}#contact .box-onview .container h1{font-family:Anton,sans-serif;font-style:normal;width:100%;text-align:center;font-size:clamp(1.5rem,4vw,2rem)}#contact .box-onview .container .socialmedia{padding-top:3vw;display:grid;grid-template-columns:1fr 1fr 1fr;gap:3vw;height:fit-content;width:fit-content;margin:auto}#contact .box-onview .container .socialmedia div{display:flex;gap:1vw;align-items:center;min-width:0}#contact .box-onview .container .socialmedia div img{height:75px}@media(max-width:1100px){#contact .box-onview .container .socialmedia div img{height:50px}}#contact .box-onview .container .socialmedia div p{font-size:1.5rem;line-height:1;min-width:0}#contact .box-onview .container .socialmedia div p b{line-height:1.5}#contact .box-onview .container .socialmedia div p a.wrap{font-size:1.2rem;word-break:break-all;overflow-wrap:break-word;word-wrap:break-word}@media(max-width:1260px){#contact .box-onview .container .socialmedia div p{font-size:1.2rem}#contact .box-onview .container .socialmedia div p a.wrap{font-size:1rem}}@media(max-width:970px){#contact .box-onview .container .socialmedia{grid-template-columns:1fr 1fr}}@media(max-width:630px){#contact .box-onview .container .socialmedia{grid-template-columns:1fr}#contact .box-onview .container .socialmedia div{gap:3vw}}*,*:after,*:before{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth}:root{font-family:Roboto Condensed,Arial,sans-serif;font-optical-sizing:auto;font-style:normal;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;scroll-snap-type:y proximity;overflow-x:hidden;--cursor-x: 0;--cursor-y: 0}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}}