@keyframes moon-slide-in{from{transform:translateX(-100px);}to{transform:translateX(0);}}@keyframes moon-slide-out{from{transform:translateX(0);}to{transform:translateX(-100px);}}@keyframes sun-slide-in{from{transform:translateX(100px);}to{transform:translateX(0);}}@keyframes sun-slide-out{from{transform:translateX(0);}to{transform:translateX(100px);}}@keyframes cloud-slide-right{from{transform:translateX(-100px);}to{transform:translateX(100px);}}@keyframes cloud-slide-left{from{transform:translateX(100px);}to{transform:translateX(-100px);}}@keyframes fade-in{from{opacity:0;}to{opacity:1;}}@keyframes fade-out{from{opacity:1;}to{opacity:0;}}:root.animate *{transition:background-color 1s ease,color 1s ease,fill 1s ease;}
:root[data-theme='dark']{--body-background-color:#353535;--body-color:#b6b6b6;--header-background-color:#11111180;--project-background-color:#272727;svg{#dark{opacity:1;}#light{opacity:0;}#cloud{transform:translate(-100px);}&.code{text{fill:#d4d4d4;}.bg{fill:#1e1e1e;}.bracket-1{fill:#ffff00;}.bracket-2{fill:#d351c8;}.bracket-3{fill:#2e94e7;}.variable{fill:#9cdcfe;}.constant{fill:#b5cea8;}.type{fill:#4ec9b0;}.function{fill:#dcdcaa;}.keyword{fill:#569cd6;font-style:italic;&.control{fill:#c586c0;}}.string{fill:#ce9178;.scape{fill:#ebc498;}}}}&.animate{svg{#dark{animation:fade-in 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;#moon{animation:moon-slide-in 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;}}#light{animation:fade-out 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;#sun{animation:sun-slide-out 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;}}#cloud{animation:cloud-slide-left 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;}}}}@media (prefers-color-scheme:dark){:root{--body-background-color:#353535;--body-color:#b6b6b6;--header-background-color:#11111180;--project-background-color:#272727;svg{#dark{opacity:1;}#light{opacity:0;}#cloud{transform:translate(-100px);}&.code{text{fill:#d4d4d4;}.bg{fill:#1e1e1e;}.bracket-1{fill:#ffff00;}.bracket-2{fill:#d351c8;}.bracket-3{fill:#2e94e7;}.variable{fill:#9cdcfe;}.constant{fill:#b5cea8;}.type{fill:#4ec9b0;}.function{fill:#dcdcaa;}.keyword{fill:#569cd6;&.control{fill:#c586c0;}}.string{fill:#ce9178;.scape{fill:#ebc498;}}}}&.animate{svg{#dark{animation:fade-in 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;#moon{animation:moon-slide-in 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;}}#light{animation:fade-out 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;#sun{animation:sun-slide-out 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;}}#cloud{animation:cloud-slide-left 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;}}}}}
:root[data-theme='light']{--body-background-color:#dadada;--body-color:#333333;--header-background-color:#e0e0e080;--project-background-color:#c1c1c1;svg{#dark{opacity:0;}#light{opacity:1;}#cloud{transform:translate(100px);}&.code{text{fill:#000000;}.bg{fill:#ffffff;}.bracket-1{fill:#2e94e7;}.bracket-2{fill:#098658;}.bracket-3{fill:#9e1010;}.variable{fill:#001080;}.constant{fill:#098658;}.type{fill:#267f99;}.function{fill:#795e26;}.keyword{fill:#0000ff;font-style:italic;&.control{fill:#af00db;}}.string{fill:#a31515;.scape{fill:#cf4141;}}}}&.animate{svg{#dark{animation:fade-out 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;#moon{animation:moon-slide-out 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;}}#light{animation:fade-in 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;#sun{animation:sun-slide-in 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;}}#cloud{animation:cloud-slide-right 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;}}}}@media (prefers-color-scheme:light){:root{--body-background-color:#dadada;--body-color:#333333;--header-background-color:#e0e0e080;svg{#dark{opacity:0;}#light{opacity:1;}#cloud{transform:translate(100px);}&.code{text{fill:#000000;}.bg{fill:#ffffff;}.bracket-1{fill:#2e94e7;}.bracket-2{fill:#098658;}.bracket-3{fill:#9e1010;}.variable{fill:#001080;}.constant{fill:#098658;}.type{fill:#267f99;}.function{fill:#795e26;}.keyword{fill:#0000ff;&.control{fill:#af00db;}}.string{fill:#a31515;.scape{fill:#cf4141;}}}}&.animate{svg{#dark{animation:fade-out 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;#moon{animation:moon-slide-out 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;}}#light{animation:fade-in 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;#sun{animation:sun-slide-in 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;}}#cloud{animation:cloud-slide-right 1s ease-in-out forwards;transform-box:fill-box;transform-origin:center;}}}img[data-lang-key='agalang_image']{content:url(../../imgs/agamca.webp);}}}
*{margin:0;padding:0;box-sizing:border-box;}:root{--project-card-items:2;--project-card-margin:0.5em;}html,body{height:100%;}body{font-display:swap;--image-scale:1;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background-color:var(--body-background-color);color:var(--body-color);display:flex;flex-direction:column;align-items:center;> aga-header{top:0;backdrop-filter:blur(10px);background-color:var(--header-background-color);width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-content:center;justify-content:space-around;box-shadow:0 0 5px red;position:sticky;z-index:10;> div{display:flex;align-items:center;> svg{height:2.3em;padding:0 10px;}}> nav{> ul{height:100%;width:100%;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);> li{width:111px;box-sizing:content-box;padding:10px;text-align:center;> a{display:block;height:100%;text-decoration:none;color:var(--body-color);font-size:1.5em;font-weight:bold;}&:hover{background-color:#ff000040;}}}}> div{display:flex;flex-wrap:wrap;> select{border-style:none;outline:none;cursor:pointer;font-size:1.3em;background-color:transparent;color:currentColor;display:flex;align-items:center;height:100%;justify-content:center;padding:10px;&:focus{background-color:var(--project-background-color);}> option{backdrop-filter:blur(10px);background-color:var(--project-background-color);&:hover{background-color:#ff000080;}}}> button{border:none;outline:none;cursor:pointer;font-size:1.3em;background-color:transparent;display:flex;align-items:center;> svg{margin-left:30%;width:4rem;height:2rem;}}}}> main{display:flex;justify-content:center;flex-direction:column;> section#error{display:flex;flex-wrap:wrap;justify-content:center;> h2#error-message{display:flex;justify-content:center;align-items:flex-end;height:100%;width:100%;margin-top:5rem;font-size:4.5rem;}> h3#message-error{display:flex;justify-content:center;font-size:2.5rem;}}> aga-section[data-type='projects']{display:flex;flex-direction:column;align-items:center;margin-bottom:3rem;> h2{width:100%;display:flex;justify-content:center;font-size:3em;}>aga-project,>a>aga-project{width:calc((100% / var(--project-card-items)) - (var(--project-card-margin) * 2));}> div.container{display:flex;flex-wrap:wrap;justify-content:center;width:100%;> a{width:calc((100% / var(--project-card-items)) - (var(--project-card-margin) * 2));margin:var(--project-card-margin);color:var(--body-color);text-decoration:none;> aga-project{--image-hover-scale:1.1;width:100%;height:100%;}}> aga-project{--image-hover-scale:1.05;margin:var(--project-card-margin);width:calc((100% / var(--project-card-items)) - (var(--project-card-margin) * 2));}> a > aga-project,> aga-project{border-radius:1em;display:grid;grid-template-areas:'title'
'image'
'developed-in'
'description';padding:1em;background-color:var(--project-background-color);> div.image-wrapper{overflow:hidden;border-radius:0.5em;aspect-ratio:582 / 347;grid-area:image;> img,> svg{width:100%;aspect-ratio:582 / 347;transition:transform 0.3s ease;transform-origin:center;transform:scale(var(--image-scale));}}> h3{font-size:1.5em;margin-bottom:0.3em;grid-area:title;}> p{grid-area:description;&.developed-in{margin:0.5em 0.5em 0 0;font-size:0.8em;text-align:right;font-weight:bold;grid-area:developed-in;}}&:hover{--image-scale:var(--image-hover-scale);}}}}}> footer{margin-top:auto;width:100%;> p{margin:auto;text-align:center;padding:1rem 0;}}}::-webkit-scrollbar{width:10px;}::-webkit-scrollbar-track{background:var(--project-background-color);border-left:1px red solid;}::-webkit-scrollbar-thumb{background:var(--body-background-color);border-left:1px red solid;}::-webkit-scrollbar-thumb:hover{background:rgba(255,0,0,0.5);}html{scrollbar-width:thin;scrollbar-color:var(--body-background-color) var(--project-background-color);}svg{user-select:none;-moz-user-select:none;&.code .keyword{font-style:italic;}}
@media screen and (width > 700px){body > main > aga-section[data-type='projects'] > div.container{> .last-odd{width:100%;}> a.last-odd > aga-project,> aga-project.last-odd{grid-template:'image title title' 2.5rem 'image description developed-in' auto / 4fr 3fr 2fr;gap:calc(var(--project-card-margin) * 2);width:100%;> h3{text-align:center;}}}}@media screen and (width > 1200px){body > main{width:70%;}}@media screen and (max-width:1200px){body > main{width:80%;}}@media screen and (max-width:880px){:root{--project-card-items:1;}body{> header{flex-direction:row;align-items:center;> h1{width:100%;}> div{flex-direction:row;> select,> button{padding:1rem;}}> nav > ul{padding:1rem;flex-wrap:wrap;> li{width:50%;> a{width:100%;}}}}> main{width:90%;}}}@media screen and (max-width:700px){body > main{width:90%;}}@media screen and (max-width:600px){body{> header{flex-direction:column;align-items:center;> nav > ul{padding:1rem;flex-wrap:wrap;> li{width:50%;> a{width:100%;}}}}> main{width:90%;}}}@media screen and (max-width:570px){body{> header{justify-content:center;> div{flex-direction:row;width:100%;justify-content:center;}}}}