@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0";@import "https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap";*{margin:0;padding:0}@media (prefers-color-scheme:light){:root{--body-background:#e5e5e5;--header-background:#b81f24;--nav-background:gray;--nav-color:#fff;--header-color:#fff;--header-title:#fff;--main-background:#fff;--main-headings:#b81f24;--main-color:#000;--main-link:#302ae6;--dark-mode-icon:#fff;--project-divider:#000;--links-background:#b81f24}}@media (prefers-color-scheme:dark){:root{--body-background:#000;--header-background:#333;--nav-background:#404040;--nav-color:#ccc;--header-title:#b81f24;--header-color:#ccc;--main-background:#333;--main-color:#ccc;--main-link:#9a97f3;--dark-mode-icon:#b81f24;--project-divider:#fff;--links-background:#000}}body{background-color:var(--body-background);color:var(--main-color);font-family:Roboto Slab,serif}body.no-scroll-fixed{width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}#tabs{flex-wrap:wrap;justify-content:space-around;align-items:center;gap:10px;margin:2.5rem auto;padding:0 1rem;display:flex}#tabs button{background-color:var(--main-background);color:var(--main-color);cursor:pointer;border:1px solid #e5e7eb;border-radius:4px;outline:none;padding:10px 20px;font-family:inherit;font-size:.95rem;font-weight:500;transition:all .2s ease-in-out;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}#tabs button:hover{color:#b81f24;border-color:#d1d5db;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}#tabs button.active{background-color:var(--header-background);color:#fff;border-color:#b81f24;font-weight:600;box-shadow:0 2px 4px #0003}.material-symbols-outlined{font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24}#page-wrapper{grid-template:"header"350px"main"/1fr;height:100vh;display:grid}header{grid-area:header}main{grid-area:main}.loader{aspect-ratio:1;--_m:conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;width:50px;-webkit-mask:var(--_m);-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;background:#25b09b;border-radius:50%;padding:8px;animation:1s linear infinite l3;-webkit-mask-composite:source-out;mask-composite:subtract}@keyframes l3{to{transform:rotate(1turn)}}.hide{display:none!important}.left{flex-direction:row}.right{flex-direction:row-reverse}header{background-color:var(--header-background);color:var(--header-color);justify-content:center;align-items:center;gap:10px;padding:20px;font-family:Roboto,sans-serif;display:flex}header img{border:10px solid #fff}nav{flex-direction:column;justify-content:center;align-items:end;display:flex}nav a{color:var(--header-color);cursor:pointer;font-size:30px;text-decoration:none}nav a:hover{text-decoration:underline}main{max-width:900px;margin:10px auto}main a{color:var(--main-link);text-decoration:none}main a:hover{text-decoration:underline}main p{padding:10px 0}#filter-bar{justify-content:space-between;align-items:center;gap:10px;display:flex}select{border:1px solid var(--main-color);background-color:var(--main-background);color:var(--main-color);margin:0 10px;padding:5px}.project,.card{background-color:var(--main-background);margin:10px;padding:10px;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}#loading-card{align-items:center;gap:10px;display:flex}.project-header{justify-content:space-between;align-items:center;margin-bottom:5px;display:flex}button{cursor:pointer;justify-content:center;align-items:center;display:flex}.skills{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:5px;display:flex}.skills img{cursor:pointer}.project a{color:var(--main-link)}.links{justify-content:center;align-items:center;gap:5px;display:flex}.links a{border:1px solid var(--links-background);color:var(--main-color);border-radius:5px;margin:10px;padding:5px;text-decoration:none;transition:all .2s linear}.links a:hover{background-color:var(--links-background);color:#fff}.iframe-container{width:100%;overflow-x:auto}@media (width>=1490px){header h1{font-size:8rem}header img{height:300px}}@media (width>=1135px) and (width<=1489px){header h1{font-size:5rem}header img{height:250px}}@media (width>=910px) and (width<=1134px){header h1{font-size:3rem}header img{height:200px}}@media (width<=600px){header,#filter-bar{flex-direction:column}}@media (width>=910px){#mobile-nav-toggle{display:none}}@media (width<=909px){#mobile-nav-toggle{cursor:pointer;z-index:4;cursor:pointer;background:0 0;border:none;flex-direction:column;justify-content:space-around;width:40px;height:30px;padding:0;display:flex;position:absolute;top:10px;right:10px}#mobile-nav-toggle span{background-color:var(--header-color);width:100%;height:4px;transition:all .3s ease-in-out;display:block}#mobile-nav-toggle.active span:first-child{transform:translateY(7px)rotate(45deg)}#mobile-nav-toggle.active span:nth-child(2){opacity:0}#mobile-nav-toggle.active span:nth-child(3){transform:translateY(-13px)rotate(-45deg)}header h1{font-size:3rem}header img{height:150px}nav{background-color:var(--header-background);z-index:3;opacity:0;visibility:hidden;justify-content:center;gap:30px;padding:10px;transition:transform .4s ease-out,opacity .4s ease-out,visibility .4s;position:fixed;top:0;bottom:0;right:0;transform:translate(100%)}nav.active{background-color:var(--header-background);opacity:1;visibility:visible;transform:translate(0);box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}main{margin:10px}}