html,body{height:100%;padding:16px}:root{font-family:Roboto,system-ui,Avenir,Arial,sans-serif;line-height:1.5;font-weight:400;margin:0 auto;max-width:1280px;color-scheme:dark;color:#ffffffde;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;--accent-color: #ddaaccc7;--accent-color-hover: #ddaacc;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100%}nav{display:flex;align-items:center;margin:0 auto;position:relative}nav a{margin:1%;font-size:large;text-decoration:none;color:#fff}nav .title{margin-right:auto}nav .title.active{color:#fff}nav a.active{color:var(--accent-color)}nav a:hover,nav .title.active:hover{color:var(--accent-color)}.hamburger{display:none;flex-direction:column;cursor:pointer;padding:5px}.bar{width:25px;height:3px;background-color:#fff;margin:3px 0;transition:.3s}.bar.open:nth-child(1){transform:rotate(-45deg) translate(-5px,7px)}.bar.open:nth-child(2){opacity:0}.bar.open:nth-child(3){transform:rotate(45deg) translate(-5px,-7px)}.nav-links{display:flex}.nav-links a{margin:0 10px}.github-mark{width:32px;height:32px;margin-left:10px}@media(max-width:768px){html,body{padding:4px}nav{flex-direction:row;justify-content:space-between;align-items:center}nav .title{margin-right:auto;margin-bottom:0}.hamburger{display:flex}.nav-links{display:none;position:absolute;top:100%;left:0;right:0;background-color:#000;flex-direction:column;padding:10px;box-shadow:0 2px 5px #0003}.nav-links.open{display:flex;width:100%}.nav-links a{margin:10px 0;padding:10px;border-bottom:1px solid rgba(255,255,255,.1)}}.container{margin-top:20%}.grid{display:grid;grid-template-areas:"header image" "subheader image" "buttons image";align-items:center;margin:auto 0;padding:8px}.header{grid-area:header;font-size:56px;font-weight:700;width:60%}.subheader{grid-area:subheader;margin-top:10px;color:var(--accent-color);font-size:36px;width:60%;font-weight:700}.buttons{margin-top:15px;grid-area:buttons}.image{grid-area:image;margin-left:auto;max-width:80%}@media(max-width:768px){.grid{grid-template-areas:"header" "image" "subheader" "buttons";text-align:center}.header,.subheader{width:100%}.image{margin:20px auto;max-width:100%}.buttons{display:flex;flex-direction:column;align-items:center}}.button{background-color:var(--accent-color);color:#fff;font-size:18px;margin:5px;padding:12px;border-radius:10px;font-weight:700;text-decoration:none}.button:hover{background-color:var(--accent-color-hover)}@media(max-width:768px){.button{font-size:16px;padding:10px}}.projects-container{display:flex;flex-direction:column;height:100%;justify-items:flex-start}.list{display:flex;flex-wrap:wrap;justify-content:space-between}.projects{margin-top:10px;width:300px;border-radius:5px;padding:8px;align-items:center;display:flex;flex-direction:column}.projects_link{text-decoration:none;color:#fff}.projects:hover{background-color:#e3e3e3a0}.projects_image{width:90%;margin:auto}.projects_title{font-size:32px;font-weight:700;text-align:center;margin-top:10px}.projects_caption{font-size:16px;text-align:center;margin:10px 0}.credit{width:100%;font-size:smaller;text-align:center;margin-top:auto;padding-bottom:10px}nav{width:100%}@media(max-width:768px){.list{justify-content:center}.projects{width:90%;max-width:300px}}.block{display:grid;grid-template-areas:"content image";grid-template-columns:70% 30%;width:100%;margin:20px 0;align-items:center}.content{grid-area:content}.qn{color:var(--accent-color-hover);font-size:32px;font-weight:700}.detail{font-size:16px;text-align:justify}.pfp{border-radius:50%;width:200px;height:200px;object-fit:cover}@media(max-width:768px){.block{grid-template-areas:"content" "image";grid-template-columns:1fr}.content{grid-area:content}.qn{font-size:24px}.detail{font-size:14px}.pfp{margin:20px auto}}.project_detail{display:flex;width:100%}.project_details{flex:3}.project_title{font-size:36px;font-weight:700;color:var(--accent-color-hover)}.project_image{flex:2;object-fit:contain;margin-right:10px}.view_project{display:flex;align-items:center;flex-direction:row}@media(max-width:768px){.project_detail{flex-direction:column}.project_image{margin-right:0;margin-bottom:20px}}