:root{--size: 18px;--foreground: #f5f5f5;--foreground-90: #f5f5f5e6;--foreground-75: #f5f5f5bf;--foreground-50: #f5f5f580;--foreground-25: #f5f5f540;--foreground-10: #f5f5f51a;--foreground-05: #f5f5f50d;--background: #242424;--background-95: #242424f2;--background-90: #242424e6;--background-75: #242424bf;--background-50: #24242480;--background-25: #24242440;--background-10: #2424241a;--background-05: #2424240d;--accent-background: hsl(208, 81%, 37%);--accent-background-10: hsl(208, 81%, 27%);--accent-foreground: hsl(208, 81%, 67%);--random-time: 1s;--border-radius: .25rem;--border-radius-sm: .125rem;--font-weight: 200}@media screen and (min-width: 320px){:root{--size: calc(18px + 5 * ((100vw - 320px) / 680))}}@media screen and (min-width: 1000px){:root{--size: 22px}}html{scroll-behavior:smooth;font-size:var(--size);text-wrap:pretty;font-weight:var(--font-weight);-webkit-user-select:none!important;user-select:none!important;background-color:#000}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font:inherit}body{display:flex;flex-direction:column;min-width:320px;font-family:base;line-height:1.5;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none;background-color:#000}article{display:flex;flex-direction:column;gap:0;max-width:800px}small{font-size:.75rem}button{position:relative;padding:.5rem 1rem;white-space:nowrap;width:fit-content;background:var(--accent-background);border:none;border-radius:var(--border-radius);color:var(--foreground-90);cursor:pointer;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;letter-spacing:.025em;font-weight:500;outline:rgba(0,0,0,.05) solid .25rem}button:active{background:var(--accent-background-10)}button.busy{opacity:.75;pointer-events:none;background:var(--accent-background-10)}button.busy:before{display:inline-block;content:"";width:1rem;height:1rem;border:.125rem solid #fff;border-bottom-color:transparent;border-radius:50%;margin-right:.5rem;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}textarea{position:relative;z-index:2;width:100%;height:fit-content;min-height:10rem;resize:none;padding:1rem;border:none;border-radius:var(--border-radius-sm);text-overflow:ellipsis;background:var(--foreground-10);text-align:left;letter-spacing:.05rem;outline:solid .125rem rgba(0,0,0,.25)}textarea:focus-within{outline-color:var(--accent-background-10)}fieldset{display:flex;flex-direction:column;border:none;width:100%}fieldset ul{list-style:none}fieldset .error-description{color:tomato;display:none}fieldset:disabled{opacity:.7}fieldset>p{margin-top:1rem}fieldset.has-error,.fieldset-has-error,.submitted fieldset:has(:invalid),.submitted.has-error fieldset{color:tomato}fieldset.has-error .error-description,.fieldset-has-error .error-description,.submitted fieldset:has(:invalid) .error-description,.submitted.has-error fieldset .error-description{display:block}a{text-decoration:none;color:var(--accent-foreground)}a:visited,a:hover{text-decoration:underline}@media screen and (prefers-color-scheme: light){:root{--foreground: #242424;--background: #f5f5f5}}@keyframes spinB{to{transform:rotate(360deg)}0%{transform:rotate(0)}}.invisible,.visible{transition:opacity 1s ease-in-out}.invisible.invisible,.visible.invisible{opacity:.15}.invisible.visible,.visible.visible{opacity:1}h2,h3{transition-duration:1.15s;line-height:1}form{display:flex;width:100%;max-width:700px;flex-direction:column;position:relative;justify-content:center;align-items:center}form>footer{margin-top:1rem}h2{font-size:2rem;margin:1em 0 .5em}section>h2{margin-top:0}h3{font-size:1.35rem;margin:1em 0 .5em}h4{font-size:1.05rem;margin:1em 0 .5em}.sections{position:relative;display:flex;flex-direction:column;padding:0 3rem 0 1.5rem;width:100%;background-color:#242424}@media screen and (max-width: 999px){.sections{max-width:100%;padding:0 3.5rem 0 2rem}}.sections>section{position:relative;display:flex;flex-direction:column;overflow-x:hidden;padding:3rem 0;align-items:center;max-width:1000px;margin:0 auto}.sections>section [data-anchor-id]{position:absolute;top:50%;left:0;height:1px;width:1px}.sections>section main{position:relative;display:flex;flex-direction:column;row-gap:1rem;justify-content:center;align-items:center}.sections>section.active{opacity:1}.sections>section:active{outline:white solid 4.25rem inset}.sections nav{--transition-duration: .2s;animation:fade-in 1s ease-in-out forwards;opacity:0;animation-delay:1s;position:fixed;top:10%;right:0;z-index:1000;padding:1rem;cursor:pointer;transition:all var(--transition-duration) ease-in-out;-webkit-tap-highlight-color:transparent}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sections nav ol{list-style:none;display:flex;flex-direction:column;gap:.5rem;pointer-events:all;background-color:var(--background-95);border:transparent solid 1px;border-radius:var(--border-radius);box-shadow:transparent 0 0 .5rem;transition:all var(--transition-duration) ease-in-out}.sections nav ol li{border:solid 1px var(--foreground-50);border-left:none;border-right:none;transition:all var(--transition-duration) ease-in-out}.sections nav ol li a{display:block;height:0;width:0;min-width:1rem;overflow:hidden;text-align:right;transition:all var(--transition-duration) ease-in-out,background-color .25s ease-in-out;text-decoration:none;color:#fff}.sections nav ol li.active{border-color:#fff;border-top-width:2px;box-shadow:#ffffffde 0 0 .25rem}.sections nav.active{margin-right:0}.sections nav.active ol{box-shadow:#00000080 0 0 .5rem;border-color:var(--foreground-10);gap:0}.sections nav.active ol li{border-color:var(--foreground-05);box-shadow:none!important}.sections nav.active ol li.active{background-color:var(--foreground-10)}.sections nav.active ol li a{display:block;width:6.5rem;height:2rem;padding:0 1rem 0 1.5rem;line-height:2rem}.sections nav.active ol li a:hover{background-color:var(--foreground-05)}.loading{display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;background-color:var(--background);color:var(--foreground)}.loader{width:100px;height:100px;position:relative}.loader .blob{width:5rem;height:5rem;background:linear-gradient(135deg,#1263ab,#67afef);border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 20px #0d497d;animation:morph 2s linear infinite}@keyframes morph{0%,to{border-radius:50%;transform:translate(-50%,-50%) scale(1)}33%{border-radius:30% 70% 70% 30%/30% 29% 71% 70%;transform:translate(-50%,-50%) rotate(90deg) scale(1.2)}66%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;transform:translate(-50%,-50%) rotate(180deg) scale(.8)}}#welcome{position:relative;width:100%;justify-content:center;align-items:center;min-height:100vh;padding-top:0;padding-bottom:0;overflow-x:visible;--animation-delay: .5s;--animation-duration: 1s}#welcome .title{display:flex;flex-direction:column;justify-content:flex-end;height:50vh;position:relative;width:100%;max-width:800px;margin:0 auto;z-index:2;background:var(--background);overflow:hidden;border-bottom:1px solid var(--foreground-50)}#welcome .title .brand{position:relative;background:transparent;transform:translateY(100%);animation:slide-up var(--animation-duration) ease-in-out forwards;animation-delay:var(--animation-delay)}@keyframes slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}#welcome .title svg.i-am{width:34%;transform:translateY(25%)}#welcome .title svg.brian{width:100%}#welcome .subtitle{height:50vh;padding-top:.5rem;width:100%;max-width:800px;position:relative;line-height:1;z-index:1}#welcome .subtitle:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,transparent 0%,var(--background-90) 30%,var(--background-95) 70%,var(--background) 100%);z-index:1}#welcome .subtitle ul{display:flex;flex-direction:column;list-style:none;gap:.5rem;transform:translateY(-110%);animation:slide-down var(--animation-duration) ease-in forwards;animation-delay:var(--animation-delay);font-size:5vw}@keyframes slide-down{0%{transform:translateY(-110%)}to{transform:translateY(0)}}@media screen and (min-width: 1000px){#welcome .subtitle ul{font-size:2rem}}#skills article{max-width:800px;display:flex;flex-direction:column;gap:1rem}#skills .progress-bar{height:1rem;width:100%;background-color:var(--foreground-10);border-radius:var(--border-radius)}#skills .progress-bar div{height:100%;transition:width 2s ease-in-out;background-color:var(--accent-background);border-radius:var(--border-radius-sm)}#skills .progress-bar.visible{opacity:1}#skills .progress-bar:not(.visible) div[style]{width:0!important;transition-duration:.5s}#skills .legend{width:100%;position:relative}#skills .legend .progress-bar{position:relative;height:1.75rem}#skills .legend .progress-bar span{display:block;position:absolute;z-index:1;padding:.25rem .5rem;top:0}#skills .legend .progress-bar span:nth-of-type(1){right:0}#skills .legend .progress-bar span:nth-of-type(2){left:0}#skills .legend .progress-bar span:nth-of-type(2):hover~div{width:15%!important}#skills .legend .progress-bar span:nth-of-type(1):hover~div{width:85%!important}#skills ul{display:grid;gap:2rem;row-gap:0;grid-template-columns:1fr;width:100%}@media screen and (min-width: 1000px){#skills ul{grid-template-columns:1fr 1fr 1fr}}@media screen and (min-width: 600px){#skills ul{grid-template-columns:1fr 1fr}}#skills ul li{margin-bottom:.5rem;list-style:none}#skills ul li.visible{opacity:1}#skills ul li:not(.visible){opacity:.15}#skills ul li h4{font-size:1rem;margin:0 0 .25rem;display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap}#skills ul li h4 span.title{white-space:nowrap}#skills ul li h4 span.years{color:var(--foreground-50);text-align:right}#projects .intro{margin-bottom:1rem}#projects svg{width:.75rem}#projects .sources span:first-child{display:none}#contact{min-height:100vh;text-align:center;justify-content:center}#contact form fieldset{outline:none!important}#contact form .error-description span:not(.active){display:none}#contact form .found-email{display:none}#contact form .found-email span{color:#3cb371}#contact form.submitted:not(.has-email) .missing-email{display:block}#contact form.has-email .found-email{display:block}#contact form .success{display:none}#contact form.success>*:not(.success){opacity:0;pointer-events:none}#contact form.success .success{display:block}#recruiters{min-height:100vh;position:relative;margin-bottom:3rem}#recruiters .intro{justify-content:center;align-items:center;gap:1rem}#recruiters img{display:block;margin:1rem auto 0!important}#recruiters input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background);margin:0;font:inherit;color:var(--accent-foreground);width:1.15em;height:1.15em;border:.15em solid currentcolor;border-radius:50%;transform:translatey(-.075em);display:grid;place-content:center}#recruiters input[type=radio]:before{content:"";width:.65em;height:.65em;border-radius:50%;transform:scale(0);transition:transform .12s ease-in-out;box-shadow:inset 1em 1em var(--accent-foreground);background-color:canvastext}#recruiters input[type=radio]:checked:before{transform:scale(1)}#recruiters .quiz-pass{display:block;margin-top:2rem}#recruiters .quiz-pass h3{color:var(--accent-foreground)}#recruiters .sending{position:absolute;z-index:10;top:10rem;left:50%;transform:translate(-50%);color:var(--accent-foreground);gap:2rem;align-items:center}#recruiters form{width:100%}#recruiters form fieldset.email label{margin-bottom:1rem}#recruiters form fieldset.email p{text-align:center}#recruiters form fieldset.email [type=email]{width:100%;padding:.5rem}#recruiters form fieldset .options{display:flex;flex-direction:column}#recruiters form fieldset .options p{padding:.5rem 0}#recruiters form fieldset .options .fail-reason{display:none;color:tomato}#recruiters form fieldset .options label{display:flex;flex-direction:row;gap:.5rem;align-items:center;padding:.75rem;cursor:pointer;border-radius:var(--border-radius);background-color:var(--foreground-10)}#recruiters form fieldset .options label:has(:checked){outline:solid .125rem var(--accent-background)}#recruiters form fieldset .options label:has(:checked):is([for$=fail]){outline:solid .125rem tomato}#recruiters form fieldset .options label:has(:checked)+.fail-reason{display:block}#recruiters form fieldset .options label input[type=radio]{flex-shrink:0}#recruiters form.quiz{gap:1rem}#recruiters .intro,#recruiters form.quiz,#recruiters button.check-results,#recruiters .quiz-fail,#recruiters .quiz-pass,#recruiters .sending,#recruiters .quiz-sent{display:none}#recruiters[data-state=intro] .intro,#recruiters[data-state=quiz] form.quiz,#recruiters[data-state=quiz] button.check-results,#recruiters[data-state=fail] .quiz-fail,#recruiters[data-state=fail] form.quiz,#recruiters[data-state=pass] .quiz-pass,#recruiters[data-state=sending] .sending,#recruiters[data-state=sending] .quiz-pass,#recruiters[data-state=sent] .quiz-sent{display:flex}#recruiters[data-state=sending] .quiz-pass{pointer-events:none}#recruiters[data-state=fail] button.check-results{display:none!important}body>footer{position:relative;z-index:10;text-align:center;padding:1rem;line-height:1.2;background:#121212;margin-top:-3rem;height:3rem;outline:var(--background-75) solid 2px}
