@import "https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap";body{--text-bg:azure;background-image:url(/assets/sonic-silver-solid-color-background-lRzqCShb.jpg);background-repeat:round}main{--header-height:40px;box-sizing:border-box;color:#000000de;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-top:40px;margin-top:var(--header-height);flex-direction:column;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){main{--lightningcss-light: ;--lightningcss-dark:initial}}main,main a{display:flex}main a{color:#06c;align-items:center;font-weight:500;text-decoration:none;transition:color .2s}:is(main a) :hover{text-decoration:underline}main header{height:var(--header-height);z-index:1000;background-color:#000;flex-direction:column;align-items:center;width:100%;display:flex;position:fixed;top:0;left:0}:is(main header) nav{display:flex}:is(:is(main header) nav) a{color:#fff;align-items:center;padding:10px 20px;position:relative}:is(:is(main header) nav) a:not(:last-child):after{content:"";background-color:#fff;width:1px;height:1.2em;position:absolute;right:0}:is(:is(main header) nav) a.active{color:#0f0;background:0 0}main a:hover{color:#535bf2}main .container{--space-xs:8px;--space-lg:20px;--space-xl:24px;--container-max:1200px;background-color:var(--text-bg);border-radius:24px;border-radius:var(--space-xl);box-sizing:border-box;inline-size:100%;margin:20px auto 0;margin:var(--space-lg)auto 0;max-width:1200px;max-width:var(--container-max);min-height:98vh;padding:20px;padding:var(--space-lg);border:1px solid #00000014;flex-direction:column;transition:box-shadow .18s,transform .18s;display:flex;position:relative;box-shadow:0 8px 20px #00000080}@supports (color:rgb(0 0 0/0)){main .container{box-shadow:0 var(--space-xs)var(--space-lg)#00000080}}:is(main .container) .main{min-width:0;max-width:100%}main h1,main h2,main h3,main li,main p{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere;word-break:normal;margin:0}main article{margin:0}@media (max-width:768px){body{margin:0}body main .container{box-shadow:none;border:none;border-radius:0;flex-direction:column;margin:0;display:flex;overflow-y:auto}:is(body main .container) article{margin:0}}body[location=home] main .container{align-items:center;gap:1em}:is(body[location=home] main .container) h1{text-align:center;text-shadow:2px 2px 4px #0000004d;font-family:Major Mono Display,monospace;font-style:normal;font-weight:400}:is(body[location=home] main .container) .view-counter{color:#e9e2e2;background-color:#000;border:2px solid #000;border-radius:35%;align-self:flex-end;gap:4px;margin-right:10em;padding:.25em .25em 0;display:flex}:is(body[location=home] main .container) img.profile-picture{border-radius:50%;min-width:0;max-width:300px;max-height:300px}:is(body[location=home] main .container) .references{flex-direction:row;gap:4em;display:flex}:is(:is(:is(body[location=home] main .container) .references) .recent-posts) h3{text-decoration:underline}:is(:is(:is(body[location=home] main .container) .references) .recent-posts) nav{flex-direction:row;justify-content:space-between;gap:1em;display:flex}:is(:is(:is(:is(body[location=home] main .container) .references) .recent-posts) nav) .date{font-weight:700}:is(:is(:is(:is(body[location=home] main .container) .references) .recent-posts) nav) a{color:#000;font-style:italic;font-weight:400}:is(:is(:is(:is(body[location=home] main .container) .references) .recent-posts) nav) a:hover{text-decoration:underline}:is(:is(body[location=home] main .container) .references) .socials{flex-direction:column;gap:1em;display:flex}:is(:is(:is(body[location=home] main .container) .references) .socials)>a{color:#e9e2e2;background-color:#000;border:2px solid #000;border-radius:50%;padding:.5em}@media (max-width:768px){body[location=home] main .container img.profile-picture{align-self:center;max-width:300px;max-height:300px;padding:0}body[location=home] main .container .references{flex-direction:column}:is(body[location=home] main .container .references) .socials{flex-direction:row;justify-content:space-between}body[location=home] main .container .view-counter{margin-right:0}}:is(body[location=projects] main [class^=container\ ]) h2{margin:1rem}:is(body[location=projects] main .container) article{grid-gap:1rem;grid-template-columns:2fr 1fr;gap:1rem;margin:2rem;display:grid}:is(:is(body[location=projects] main .container) article) img{grid-column:2;place-self:start end;width:auto;min-width:0;max-width:100%}:is(:is(body[location=projects] main .container) article)>:not(img){grid-column:1;min-width:0}@media (max-width:768px){body[location=projects] main .container{padding:0}:is(body[location=projects] main .container) article{flex-direction:column;gap:0;margin:0 0 2rem;display:flex}:is(:is(body[location=projects] main .container) article) h2{order:0}:is(:is(body[location=projects] main .container) article) img{order:1}:is(:is(body[location=projects] main .container) article) p{order:2}:is(:is(body[location=projects] main .container) article) a{order:3}}body[location=resume] main .container{--space-sm:12px;--space-md:16px;--space-2xl:40px;--space-4xl:80px;--sidebar-min:160px;--sidebar-ideal:28%;--sidebar-max:320px;--logo-font-weight:900;--sidebar-divider:#0096c8cc;--accent:#0096c826}:is(body[location=resume] main .container) .main>aside.content,:is(body[location=resume] main .container) .main>aside.sidebar{min-width:0;max-width:100%}:is(body[location=resume] main .container) .header .title-row h1{font-size:2.8em;line-height:1.1}:is(body[location=resume] main .container) .header .title-row .tagline,:is(body[location=resume] main .container) .main aside.content section article .duration\/location,:is(body[location=resume] main .container) .main aside.content section article .functional-area,:is(body[location=resume] main .container) .main aside.sidebar section article p.dates-location{font-style:italic}:is(body[location=resume] main .container) .header{flex-direction:row;align-items:center;display:flex}:is(:is(body[location=resume] main .container) .header) button.open-sidebar{border-radius:var(--space-sm);margin-top:var(--space-2xl);padding:var(--space-sm)var(--space-md);background-color:#3a095b;align-self:flex-start;font-size:larger;display:none}:is(:is(body[location=resume] main .container) .header) .title-row{margin:var(--space-lg)var(--space-2xl);text-align:center;flex-direction:column;flex:1;display:flex}:is(body[location=resume] main .container) .intro{text-align:justify}:is(body[location=resume] main .container) .main{gap:var(--space-lg);margin-top:var(--space-lg);flex-flow:wrap;max-width:100%;display:flex;position:relative}:is(:is(body[location=resume] main .container) .main) aside.sidebar{background:linear-gradient(to left,var(--accent),var(--text-bg));flex:0 1 clamp(var(--sidebar-min),var(--sidebar-ideal),var(--sidebar-max));-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--space-xl),#000 calc(100% - var(--space-xl)),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--space-xl),#000 calc(100% - var(--space-xl)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--space-xl),#000 calc(100% - var(--space-xl)),transparent 100%);padding:var(--space-xl)var(--space-md);position:relative}:is(:is(:is(body[location=resume] main .container) .main) aside.sidebar):after{background:var(--sidebar-divider);content:"";block-size:100%;inline-size:4px;position:absolute;inset:0 0 0 auto}:is(:is(:is(body[location=resume] main .container) .main) aside.sidebar) section{text-align:right;flex-direction:column;align-items:flex-end;margin-bottom:50px;display:flex}:is(:is(body[location=resume] main .container) .main) aside.content{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere;white-space:normal;word-break:normal;flex-direction:column;flex:480px;margin-left:0;display:flex}:is(:is(:is(body[location=resume] main .container) .main) aside.content) section{border-bottom:1px solid #00000026;flex-direction:column;margin-bottom:30px;padding-bottom:30px;display:flex}:is(:is(:is(body[location=resume] main .container) .main) aside.content) section:last-child{border-bottom:none}:is(:is(body[location=resume] main .container) .main) section.contact{--icon-position:after}:is(:is(:is(body[location=resume] main .container) .main) section.contact) .email,:is(:is(:is(body[location=resume] main .container) .main) section.contact) .github,:is(:is(:is(body[location=resume] main .container) .main) section.contact) .linked-in,:is(:is(:is(body[location=resume] main .container) .main) section.contact) .location,:is(:is(:is(body[location=resume] main .container) .main) section.contact) .telephone{align-items:center;gap:var(--space-xs);flex-direction:row;display:inline-flex}:is(:is(:is(:is(body[location=resume] main .container) .main) section.contact) .email,:is(:is(:is(body[location=resume] main .container) .main) section.contact) .github,:is(:is(:is(body[location=resume] main .container) .main) section.contact) .linked-in,:is(:is(:is(body[location=resume] main .container) .main) section.contact) .telephone,:is(:is(:is(body[location=resume] main .container) .main) section.contact) .location):after{font-family:"Font Awesome 6 Free",sans-serif;font-weight:var(--logo-font-weight);order:1}:is(:is(:is(body[location=resume] main .container) .main) section.contact) .email:after{content:""}:is(:is(:is(body[location=resume] main .container) .main) section.contact) .github:after,:is(:is(:is(body[location=resume] main .container) .main) section.contact) .linked-in:after{font-family:"Font Awesome 6 Brands",sans-serif}:is(:is(:is(body[location=resume] main .container) .main) section.contact) .github:after{content:""}:is(:is(:is(body[location=resume] main .container) .main) section.contact) .linked-in:after{content:""}:is(:is(:is(body[location=resume] main .container) .main) section.contact) .telephone:after{content:""}:is(:is(:is(body[location=resume] main .container) .main) section.contact) .location:after{content:""}@media (max-width:768px){body[location=resume] main .container{padding:0}body[location=resume] main .container .intro{padding:var(--space-sm);text-align:center}body[location=resume] main .container .main{padding:var(--space-sm);flex-direction:column}:is(body[location=resume] main .container .main) aside.sidebar{display:none}body[location=resume] main .container .header button.open-sidebar{display:inline-flex}body[location=resume] main .container .main.sidebar-open{min-block-size:100vh;margin:0}body[location=resume] main .container .main.sidebar-open aside.sidebar{background:var(--text-bg);block-size:100%;min-block-size:unset;padding:var(--space-xl)var(--space-md);z-index:1000;display:block;position:absolute;inset:0;overflow-y:auto;-webkit-mask-image:none;mask-image:none}:is(body[location=resume] main .container .main.sidebar-open aside.sidebar):after{display:none}:is(body[location=resume] main .container .main.sidebar-open aside.sidebar) button.close-sidebar{right:var(--space-md);background:#6e0808;position:absolute}:is(body[location=resume] main .container .main.sidebar-open aside.sidebar) section{text-align:left;align-items:flex-start}:is(:is(body[location=resume] main .container .main.sidebar-open aside.sidebar) section) h2{text-align:left}:is(body[location=resume] main .container .main aside.sidebar section.contact) .email:after,:is(body[location=resume] main .container .main aside.sidebar section.contact) .github:after,:is(body[location=resume] main .container .main aside.sidebar section.contact) .linked-in:after,:is(body[location=resume] main .container .main aside.sidebar section.contact) .location:after,:is(body[location=resume] main .container .main aside.sidebar section.contact) .telephone:after{order:-1}}body[location=resume] main .container:hover{box-shadow:0 12px 28px #0000001f,0 4px 14px #0000000f}@media (prefers-reduced-motion:reduce){body[location=resume] main .container:hover{transform:translateY(-2px)}}body[location=resume] main .container .main aside.sidebar section ul{margin:0;padding:0;list-style:none}:is(body[location=resume] main .container .main aside.sidebar section ul) li{white-space:normal}body[location=resume] main .container .main aside.sidebar section h2{text-align:right;white-space:normal;min-width:0;max-width:100%;margin:0;display:block}body[location=posts] main [class^=container\ ] .markdown{flex-direction:column;gap:1em;display:flex}:is(body[location=posts] main [class^=container\ ] .markdown) p code{background-color:#8889872d;border-radius:3px;padding:.2em .4em;font-size:1em}:is(body[location=posts] main [class^=container\ ] .markdown) .codehilite pre{color:#d4d4d4;background-color:#1e1e1e;border-radius:4px;padding:1em;font-family:Courier New,monospace;font-size:.9em;line-height:1.5;overflow-x:auto}:is(body[location=posts] main [class^=container\ ] .markdown) .codehilite .s1,:is(body[location=posts] main [class^=container\ ] .markdown) .codehilite .s2{color:#ce9178}:is(body[location=posts] main [class^=container\ ] .markdown) .codehilite .na{color:#9cdcfe}:is(body[location=posts] main [class^=container\ ] .markdown) .codehilite .mf,:is(body[location=posts] main [class^=container\ ] .markdown) .codehilite .mi{color:#b5cea8}:is(body[location=posts] main [class^=container\ ] .markdown) .codehilite .kc{color:#569cd6}@media (max-width:768px){body[location=posts] main [class^=container\ ] .markdown{padding:0}:is(body[location=posts] main [class^=container\ ] .markdown) h1{font-size:1.3rem}:is(body[location=posts] main [class^=container\ ] .markdown) h2{font-size:1.2rem}:is(body[location=posts] main [class^=container\ ] .markdown) h3{font-size:1.1rem}}