footer{background-color:#000000b3;justify-content:center;align-items:center;display:flex}footer .container{align-items:center;margin-inline:auto;padding:10px 0;display:flex}footer .container span{color:#fff;padding-right:5px;font-weight:500}footer img{-webkit-filter:grayscale()invert();width:auto;height:35px}header{box-sizing:border-box;z-index:7;width:100%;padding:.5rem 1rem;transition:color .5s,background-color .5s,filter .5s;position:fixed;top:0;left:50%;overflow:hidden;transform:translate(-50%)}header .container{justify-content:space-between;align-items:center;max-width:70rem;margin-inline:auto;display:flex}div.overlay{visibility:hidden;opacity:0;transition:all .5s}header .container span{text-transform:uppercase;font-size:1.3rem;font-weight:700}header .container span a{padding:5px}header.scrolled{color:#dedede;background-color:#242424}header img{width:24px}nav ul{margin:0;padding:0;list-style:none}header.scrolled img{filter:invert()}header a,nav a,header a:visited,nav a:visited{color:inherit;text-decoration:none}header nav.links{display:flex}header nav.links a{padding:5px}header a.lang-switch,a.lang-switch{padding:5px;font-weight:700}header a.active,nav a.active,nav a:hover,header a:hover{background-color:gray}header .menu-button,nav.menu{visibility:hidden;display:none}@media (width<=500px){header nav.links{visibility:hidden;display:none}header div.menu-button{visibility:visible;display:flex}header div.menu-button img{align-self:center}nav.menu{opacity:0;z-index:6;background-color:#242424;grid-auto-flow:column;justify-items:center;width:100%;margin:0;padding:0;transition:all .5s ease-in-out,opacity .5s .2s;display:grid;position:fixed;top:5%;left:50%;transform:translate(-50%,-100%)}nav.menu.active{opacity:1;visibility:visible;flex-flow:column;transform:translate(-50%)}nav.menu.active+div.overlay{opacity:.7;visibility:visible;z-index:5;background-color:#000;width:100vw;height:100%;position:fixed;left:0}nav.menu li{color:#fff;text-align:center;padding:5px;list-style:none}}html,body{width:100%;height:100%;margin:0}main{width:100%;max-width:70rem;margin-inline:auto;padding:4rem 0}hr{width:100%}@media (width<=500px){main{padding:3rem 0}}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2a2a2a;align-content:center;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;transition:background-color .7s,color .7s}body.dark{background-color:#202020}body.dark *,body.dark p{color:#e3e3e3}body.dark section.about img.tech-icon,body.dark img[data-menu-toggle]{filter:invert()}*{scroll-behavior:smooth}p,li{font-size:18px}a.anchor{visibility:hidden;display:block;position:relative;top:-100px}section{padding-bottom:20px}:root{--background:#bcbcbc66;--outline-text:0 0 2px #e2e2e2, 0 0 2px #e2e2e2, 0 0 2px #e2e2e2, 0 0 2px #e2e2e2}section.hero{position:relative}section.hero .name{z-index:1;background-color:var(--background);animation:.7s ease-out slideInFromLeft;position:relative}section.hero .prof{z-index:1;background-color:var(--background);animation:1s ease-out slideInFromRight;position:relative}section.hero h1,section.hero h2{text-transform:uppercase;text-align:left;text-shadow:var(--outline-text);margin:0;font-size:min(10vw,7rem);font-weight:500}section.hero h1:first-of-type{margin-left:2%}section.hero h1:nth-of-type(2){margin-left:5%}section.hero h2{text-transform:uppercase;font-weight:900}section.hero h2:first-of-type{margin-left:25%}section.hero h2:nth-of-type(2){margin-left:30%}section.hero picture{z-index:0;animation:.7s ease-out slideInFromRight;position:absolute;top:2%;right:2%}section.hero img{object-fit:contain;z-index:0;width:min(70vw,800px);max-width:100%;animation:.7s ease-out slideInFromRight;position:absolute;top:2%;right:2%}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes slideInFromRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media (width<=800px){section.hero{height:90vw}section.hero div.info{position:absolute;bottom:0%;left:0;right:0}}section.about{margin-inline:.5rem}section.about>h1{text-align:center;font-size:2rem}section.about>div{grid-template-columns:repeat(3,1fr);gap:50px 0;display:grid}section.about .about-copy{grid-column:span 2;margin-inline:1rem}section.about>div .about-copy,section.about>div .stack{opacity:0;transition:opacity 1s .5s}section.about div.philosophy{grid-column:1/4}section.about .active{opacity:1!important}section.about div.tech{grid-template-rows:min-content;grid-template-columns:repeat(3,1fr);justify-items:center;row-gap:10px;display:grid}section.about div.stack{grid-template-rows:min-content;justify-items:center;row-gap:20px;display:grid}section.about .active div.stack:nth-child(2n-1){animation:1.2s ease-out .5s forwards fadeInDropDown}section.about .active div.stack:nth-child(2n){animation:.9s ease-out .5s forwards fadeInDropDown}section.about .active div.stack:nth-child(3n){animation:1.5s ease-out .5s forwards fadeInDropDown}section.about img.tech-icon{-webkit-filter:grayscale();width:48px;height:48px}section.about .tech-label{text-align:center;margin:0;font-size:14px;font-weight:300}section.about li{margin:5px 0}@keyframes fadeInDropDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:100;transform:translateY(0)}}@media (width<=800px){section.about .about-copy p{font-size:1rem}section.about>div{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2, min)}section.about div.tech{grid-template-columns:repeat(2,1fr);justify-items:center;row-gap:40px}}section.projects{margin-inline:1rem}section.projects .card div.stack{grid-auto-flow:column;place-content:center;gap:2px;display:grid}section.projects .card img.tech-icon.small{width:30px;height:30px}section.projects h1{text-align:center;font-size:2rem}section.projects .card-container{place-items:start center;height:110vh;max-height:900px;display:grid;position:relative;top:10%}section.projects .card{background-color:#fff;border:1px solid #000;width:350px;padding:10px;transition:transform .5s ease-out;position:absolute;box-shadow:2px 2px 2px 2px gray}body.dark section.projects .card h3{color:#000000e6}section.projects .card>a{height:100%;color:inherit;grid-template-rows:min-content;align-items:baseline;text-decoration:none;display:grid}section.projects .card h3{text-align:center;font-size:1.5rem}section.projects .card>a>img{border:1px solid gray;width:100%;height:auto}@media (width>=1000px){section.projects .card:nth-child(2){transform:translate(3%)rotate(-5deg)}section.projects .card:nth-child(3){transform:translate(-3%)rotate(5deg)}section.projects .card:nth-child(4){transform:translate(5%)rotate(7deg)}section.projects .card:nth-child(5){transform:translate(-5%)rotate(-7deg)}section.projects .card:nth-child(6){transform:translate(7%)rotate(10deg)}section.projects:hover .card:nth-child(2){transform:translate(-100%)translateY(-15%)rotate(-5deg)}section.projects:hover .card:nth-child(3){transform:translate(100%)translateY(-3%)rotate(18deg)}section.projects:hover .card:nth-child(4){transform:translateY(100%)rotate(3deg)}section.projects:hover .card:nth-child(5){transform:translate(100%,100%)rotate(-5deg)}section.projects:hover .card:nth-child(6){transform:translate(-100%,100%)rotate(5deg)}section.projects:hover .card:nth-child(7){transform:translateY(205%)rotate(-5deg)}}@media (width<=1000px){section.projects div.card-container{grid-auto-flow:row;gap:20px;height:100%;max-height:none;display:grid;position:static}section.projects div.card-container div.card{width:95%;position:static}section.projects .card:first-of-type{transform:translate(-100%)rotate(-50deg)}section.projects .card:nth-of-type(2){transform:translate(-100%)rotate(30deg)}section.projects .card:nth-of-type(3){transform:translate(-100%)rotate(-20deg)}section.projects .card:nth-of-type(4){transform:translate(-100%)rotate(-40deg)}section.projects .card:nth-of-type(5){transform:translate(-100%)rotate(20deg)}section.projects .card:nth-of-type(6){transform:translate(-100%)rotate(-10deg)}section.projects .card:nth-of-type(7){transform:translate(-100%)rotate(-5deg)}section.projects .card.active{transform:translate(0)rotate(0)}}