@import url(https://fonts.googleapis.com/css?family=Anton|Roboto);:root{--text-color:#121212;--link-hover-color:#3f3f3f;--background-color:#fffbf4;--primary-color:#d73204;--header-color:#fa4411;--modal-shadow:0.3;--gap:1em;--item-width:300px}@media (prefers-color-scheme:dark){:root{--text-color:#fffbf4;--link-hover-color:#dbdad9;--background-color:#121212;--primary-color:#6d77c5;--header-color:#4c59b8;--modal-shadow:1}}h1{color:#d73204;color:var(--primary-color);padding:0;text-align:center}h1,h2{font-family:Anton,sans-serif;font-weight:300;margin:auto}h2{color:#121212;color:var(--text-color);font-size:2.5rem;padding-left:24px;padding-top:30px}a,a:hover,a:visited{color:#d73204;color:var(--primary-color)}footer{padding-left:1em;padding-right:1em;padding-top:8rem;text-align:center}.social-links path{fill:#fffbf4;fill:var(--background-color)}body{-ms-overflow-style:none;background-color:#fffbf4;background-color:var(--background-color);color:#121212;color:var(--text-color);font-family:Lato,sans-serif;margin:0;padding:0;scrollbar-width:none}::-webkit-scrollbar{display:none}.app{opacity:0;transition:opacity 3s ease}.app.loaded{opacity:1}.about-me-text{font-size:18px;line-height:1.7;padding-left:16px;padding-right:16px}.about-me-text p{margin-bottom:0;margin-top:10px}.text-container{text-align:center}.text-container p{font-size:18px;line-height:1.7}.social-links{align-items:center;display:flex;gap:1.5rem;justify-content:center;overflow-x:auto;padding-left:16px;padding-right:16px;white-space:nowrap}.github-project-link-container{align-items:end;background-color:#fffbf4;border-radius:50%;box-shadow:0 0 5px #0000001a;display:flex;height:20px;justify-content:center;left:30px;position:absolute;top:30px;width:20px}.github-project-link path{color:#121212}.social-links a{align-items:center;background:#121212;background:var(--text-color);border-radius:20px;color:#fffbf4;color:var(--background-color);display:flex;flex-direction:row;padding:10px 20px;text-decoration:none}.social-links a:hover{background:#3f3f3f;background:var(--link-hover-color)}.content-container{margin:auto;max-width:1000px}.header{padding-top:15rem;z-index:10}@media (min-width:901px){.card-container{padding-left:24px;padding-right:24px}.header p{margin:auto;max-width:800px;padding-bottom:1em}.social-links{justify-content:center;padding-top:10px}h1{font-size:7rem;padding-left:0}.about-me-text{padding-left:24px;padding-right:24px}}@media (max-width:900px){.card-container{padding-left:16px;padding-right:16px}.header{padding-left:1rem;padding-right:1rem}.header p{margin-top:10px;text-align:left}.social-links{justify-content:flex-start}h1{font-size:3rem;text-align:left}h2{font-size:2rem;padding-left:1rem;padding-right:1rem}}.card-header{display:flex;flex-direction:row;justify-content:space-between;margin:0}.card-header p{color:#121212;color:var(--text-color);margin:0}.card-image-container{align-items:center;border-radius:6px;display:flex;justify-content:center;object-fit:cover;overflow:hidden;position:relative}.card-image-container img{object-fit:cover;transition:transform .3s ease-in-out,opacity .3s ease;width:100%}.card-image-container img:hover{cursor:pointer;transform:scale(1.1)}.p5-canvas{flex-direction:column;left:0;position:absolute;top:0;z-index:-1}.card-container{column-gap:1em;column-gap:var(--gap);column-width:300px;column-width:var(--item-width);margin:0 auto;max-width:100%;padding-top:10px}.card-container>.card{break-inside:avoid;margin-bottom:1em;margin-bottom:var(--gap);page-break-inside:avoid}@supports (grid-template-rows:masonry){.card-container{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-template-columns:repeat(auto-fill,minmax(var(--item-width),1fr));grid-template-rows:masonry}.card-container>.card{margin-bottom:0}}.modal-overlay{align-items:center;animation-duration:.5s;animation-fill-mode:forwards;background:#00000080;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.fadeIn{animation-name:fadeInAnimation}.fadeOut{animation-name:fadeOutAnimation}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}.modal-content{background:#fffbf4;background:var(--background-color);border-radius:16px;box-shadow:0 0 200px #0000004d;box-shadow:0 0 200px rgba(0,0,0,var(--modal-shadow));box-sizing:border-box;margin:6px;max-width:600px;padding:20px;position:relative;width:100%}.modal-content p{margin-bottom:0}.modal-image{border-radius:6px;height:auto;margin-bottom:1rem;width:100%}
/*# sourceMappingURL=main.d98344d3.css.map*/