:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;--border-color: rgb(255, 255, 255);--bg-color: rgb(26, 26, 46);--accent: rgb(54, 128, 55);--secondary-text: #a8a8c0;color:var(--secondary-text);border-color:var(--border-color);background-color:var(--bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0}@view-transition{navigation: auto;}#root{background:radial-gradient(600px at 100px 100px,rgba(29,78,216,.15),transparent 60%);background-attachment:fixed}#root *{box-sizing:border-box}#root :is(h1,h2,h3,h4,b){color:var(--border-color)}#root p{font-size:.93em}#main{--head-padding: 5em;--main-margin: 5em;height:100vh;padding-left:var(--main-margin);display:grid;grid-template-columns:clamp(100px,35%,50%) 1fr;grid-column-gap:8em}header{margin-top:var(--head-padding);padding-inline:4em}header>section{display:flex;flex-direction:column}header .round-img-container{display:grid;width:100%;height:clamp(100px,150px,200px);grid-template-areas:"photo name" "photo title";grid-template-columns:10% auto-fit;grid-template-rows:70% 30%;grid-column-gap:.5m;padding-inline:.5em;padding-block:1em;border:0px solid var(--border-color);border-radius:10px}header .img-container{width:100%;height:100%;grid-area:photo}header .img-container img{object-fit:cover;width:auto;height:100%;background-clip:border-box;-webkit-background-clip:border-box;border-radius:50%}header h1{grid-area:name;font-size:clamp(1.5em,.4em,2.5em);margin:0;align-content:end}header h2{grid-area:title;margin:0;font-size:1em;font-weight:500}header nav{margin-top:1em}header nav a{text-decoration:none;color:inherit}header nav a.active{color:var(--border-color);font-size:large}header #agent-parent-container{height:clamp(100px,200px,245px);box-sizing:border-box;overflow-y:scroll}header .media-icons{margin-top:1.5em;display:flex;gap:1em}header .media-icons a{color:inherit}header .media-icons svg{width:20px;height:20px;fill:var(--secondary-text)}main{scroll-behavior:smooth;overflow-y:auto}main>*{padding-right:var(--main-margin)}main :is(#experience,#projects){margin-block:4em}main p:first-of-type{margin-top:0}#about{padding-top:var(--head-padding)}:is(.experience-card,.project-card) a{cursor:pointer;text-decoration:none;color:inherit;display:grid;grid-template-columns:clamp(50px,100px,150px) 1fr;grid-column-gap:2em;padding:1em}:is(.experience-card,.project-card) a .timeframe{font-size:.75em;text-transform:uppercase;color:var(--secondary-text)}:is(.experience-card,.project-card) a div:has(img){width:100%}:is(.experience-card,.project-card) a div:has(img) img{width:100%}:is(.experience-card,.project-card) a h4{margin:0;padding:0}:is(.experience-card,.project-card) a :is(.experience-content,.project-content){display:flex;flex-direction:column;justify-content:space-between}:is(.experience-card,.project-card) a :is(.experience-content,.project-content)>div{display:flex;align-items:baseline;gap:.5em}:is(.experience-card,.project-card) a .tech-stack{padding-block:.7em;display:flex;gap:.5em;flex-wrap:wrap}:is(.experience-card,.project-card) a .tech-stack>*{width:fit-content;color:var(--accent);padding:.3em .5em;text-transform:uppercase;font-size:.65em;font-weight:800;background-color:var(--secondary-text)}:is(#experience,#projects):hover a:has(.experience-content,.project-content):not(:hover){opacity:.5}a:has(.experience-content,.project-content):hover{background-color:#ffffff1a}a:has(.experience-content,.project-content):hover h4{color:var(--accent)!important}@media only screen and (min-width: 1400px){#main{--main-margin: 10em;width:100%;margin:0 auto}}@media only screen and (max-width: 1290px){header{padding-inline:.5em}main{overflow-y:scroll}main>*{padding-right:1em}main :is(#experience,#projects){margin-block:1em}}@media only screen and (max-width: 950px){#main{display:grid;grid-template-columns:80%;grid-column-gap:2em}main{overflow-y:visible}nav{display:none}}@media only screen and (max-width: 852px){#main{margin-left:.5em;padding:0;display:grid;grid-template-columns:100%;grid-column-gap:2em}#about{padding-top:1em}header{margin:0;padding:0}:is(.experience-card,.project-card) a{cursor:pointer;text-decoration:none;color:inherit;display:grid;grid-template-columns:1fr;grid-row-gap:2em}}@media only screen and (max-width: 852px) and (orientation: landscape){.project-card a{cursor:pointer;text-decoration:none;color:inherit;display:grid;grid-template-columns:clamp(100px,50%,50%) 1fr;grid-row-gap:2em}}details#prompts-container{font-size:.7em;padding:.3em;margin-bottom:.5em;display:flex;gap:.3em;flex-direction:column;width:100%;border:1px solid var(--border-color);border-radius:10px}details#prompts-container summary{cursor:pointer;width:100%}details#prompts-container div{display:flex;flex-wrap:wrap;gap:.3em}details#prompts-container span{cursor:pointer;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;width:fit-content;max-width:20ch;padding:.2em .5em;border:1px solid var(--accent);border-radius:10px}#agent-main{border-radius:10px;border:1px solid var(--secondary-text);display:flex;flex-direction:column;background-color:var(--border-color);color:var(--accent)}#answer{overflow-y:scroll;min-height:50px;height:fit-content;max-height:130px;border:0px solid green;font-size:.8em;padding:.5em;display:flex;flex-direction:column;gap:1em}#answer p{margin:0}#answer :has(.question-area){background-color:var(--secondary-text);color:var(--border-color);text-align:right;width:100%;padding:.2em;border-radius:10px}form{display:flex;flex-direction:column;gap:1rem;position:relative}form textarea{resize:none;border-radius:10px;padding:1em;border-color:var(--secondary-text)}form .action-toolbar{width:fit-content;position:absolute;right:0;bottom:0;margin:.3em;display:flex;gap:.5em;align-items:baseline}form .action-toolbar>span{color:var(--secondary-text);font-size:.6em;cursor:default}form .action-toolbar button{width:32px;height:32px;border-radius:50%;background-color:inherit;cursor:pointer}form .action-toolbar button svg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;cursor:inherit}