@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.5rem,2.5vw,2.5vw);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 (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{-webkit-appearance:none;-moz-appearance:none;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}}.thumbnails{width:100%;display:flex;gap:10px;flex-wrap:nowrap;overflow:hidden}.thumbnails>div{cursor:pointer}.thumbnails>div>img{max-width:100%;flex:1 1 auto;height:auto;object-fit:contain}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-overlay .modal-content{color:#000;background:#fff;padding:20px 0;border-radius:8px;width:95%;height:95%;max-width:800px;max-height:800px;position:relative}.modal-overlay .modal-content .modal-close{color:#000;position:absolute;top:0;right:5px;width:35px;height:35px;border:none;background:transparent;font-size:35px;cursor:pointer;z-index:1100}.carousel{position:relative;width:100%;height:100%;overflow:hidden;text-align:center}.carousel img{width:89%;height:auto;object-fit:cover}.carousel .prev,.carousel .next{position:absolute;top:50%;transform:translateY(-50%);background-color:#00000080;color:#fff;border:none;padding:10px;cursor:pointer;font-size:20px}.carousel .prev{left:10px}.carousel .next{right:10px}.carousel .indicators{position:absolute;bottom:0;left:50%;transform:translate(-50%)}.carousel .indicators .indicator{height:10px;width:10px;background-color:gray;border:none;border-radius:50%;margin:0 5px;cursor:pointer}.carousel .indicators .indicator.active{background-color:#00f}.image-gallery .large-view .selected-image{width:100%;height:auto;object-fit:cover}.image-gallery .thumbnail-view{display:flex;gap:4px;overflow:hidden}.image-gallery .thumbnail-view>div{cursor:pointer}.image-gallery .thumbnail-view>div>img{width:100%;height:auto;object-fit:cover}#root{--padding-inline: 6vw;--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}#root a.externalLink:hover{color:#0000cd!important}#root>main{padding-inline:var(--padding-inline);font-size:var(--font-size);transition:background-color 1s linear;overflow-x:hidden;display:flex;flex-direction:column;align-items:center}#root>main>section{max-width:1440px}#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: 768px){#root>main h2{font-size:1.2rem}#root>main p,#root>main li{font-size:1rem}}@media (max-width: 768px){#root{--padding-inline: 3vw}}@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}}#root .footer{height:75px;text-align:center;align-content:center;color:#000;background-color:#deb887}@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;margin-top:20vh;overflow:hidden;font-family:Anton,sans-serif;font-weight:400;font-style:normal;cursor:default;line-height:1.2;white-space:nowrap}#home .banner h1{font-size:5vw;color:#202020}#home .banner h2{font-size:3vw;color:#bb5e1b;margin-top:.8rem}@media (max-width: 1440px){#home .banner h1{font-size:7vw}#home .banner h2{font-size:5vw}}#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;left:0;top:0;right:0;bottom: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{text-align:center}}#about{padding-top:4vh;display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:2vw;color:#000;align-content:center}#about>div:first-child{grid-row:span 2}#about h2{font-family:Anton,sans-serif;font-size:2rem;font-style:normal;margin-bottom:2vh}#about ul{margin-inline:1em}#about .description{background-color:#a8ccee}#about .skills{background-color:#d9d9d9}#about .skills>div{display:grid;grid-template-columns:repeat(6,1fr);gap:.5vw;width:100%}#about .skills>div aside{background-color:#5f9ea0;font-family:Roboto Condensed,sans-serif;font-optical-sizing:auto;font-style:normal;font-size:1rem;color:#fff;padding-block:1em;white-space:nowrap;text-align:center;border-radius:50px;overflow:hidden}@media (max-width: 1440px){#about .skills>div{grid-template-columns:repeat(4,1fr)}#about .skills>div aside{padding-block:.75em}}@media (max-width: 768px){#about .skills>div{grid-template-columns:repeat(3,1fr);gap:1vw}#about .skills>div aside{font-size:.8rem;padding-block:.5em}}@media (max-width: 650px){#about .skills>div{grid-template-columns:repeat(2,1fr)}}@media (max-width: 425px){#about .skills>div{grid-template-columns:repeat(3,1fr)}}#about .frontend{background-color:#ecdcb2}#about .backend{background-color:#b8eccd}#about .desktop{background-color:#edadee}#about .messageme{background-color:#d9d9d9}@media (max-width: 768px){#about{grid-template-columns:1fr 1fr}}@media (max-width: 425px){#about{grid-template-columns:1fr;grid-template-rows:repeat(6,auto)}#about .boxOnView{justify-self:center}#about .boxOnView>div{grid-row:unset;min-height:unset}#about .boxOnView p{margin-top:.9rem}}#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 .boxOnView>div{background-color:#fff;min-height:100%;color:#000;display:flex;flex-direction:column;align-items:flex-start}#projects>div .boxOnView>div .header{margin-bottom:1.5vh;display:flex;align-items:baseline;flex-wrap:wrap}#projects>div .boxOnView>div .header h2{font-family:Anton,sans-serif;font-size:1.5rem;font-style:normal;margin-right:15px;margin-bottom:.5vh}#projects>div .boxOnView>div .header span{margin:0;padding:0;font-size:1.2rem;font-weight:700;text-wrap:nowrap}#projects>div .boxOnView>div .notecap{font-size:1rem}#projects>div .boxOnView>div>p{margin-bottom:1rem}#projects>div .boxOnView>div .cmdlink{display:inline-block;width:auto;font-size:1.3rem}#projects>div .boxOnView>div .underconSVG{margin:auto}#contact{color:#000;padding-block:1vw 3vw;width:100%}#contact .boxOnView .container{background-color:#fdf5e6}#contact .boxOnView .container h1{font-family:Anton,sans-serif;font-style:normal;width:100%;text-align:center;font-size:clamp(1.5rem,4vw,2rem)}#contact .boxOnView .container .socialmedia{padding-top:3vw;display:grid;grid-template-columns:1fr 1fr;gap:3vw;height:fit-content;width:fit-content;margin:auto}#contact .boxOnView .container .socialmedia div{display:flex;gap:1vw;align-items:center}#contact .boxOnView .container .socialmedia div img{height:75px}@media (max-width: 1100px){#contact .boxOnView .container .socialmedia div img{height:50px}}#contact .boxOnView .container .socialmedia div p{font-size:1.5rem;line-height:1}#contact .boxOnView .container .socialmedia div p b{line-height:1.5}#contact .boxOnView .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 .boxOnView .container .socialmedia div p{font-size:1.2rem}#contact .boxOnView .container .socialmedia div p a.wrap{font-size:1rem}}@media (max-width: 630px){#contact .boxOnView .container .socialmedia{grid-template-columns:1fr}#contact .boxOnView .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}}