.hero{display:flex;flex-direction:column;justify-content:center;gap:20px;text-align:center;height:100dvh;min-height:500px}.hero__image{max-width:200px;border-radius:50%}.hero span{display:flex;flex-direction:column;gap:25px;justify-content:center}.hero span a{margin:0 10px}.hero span a img{width:30px}.hero a{width:fit-content;align-self:center;cursor:pointer}.hero button{background-color:var(--color-btn);color:var(--color-btn-text);border:none;border-radius:20px;width:126px;height:50px;font-size:20px;font-weight:700;box-shadow:0 4px 4px #00000040;transition:box-shadow .2s ease-in-out,transform .2s ease-in-out}.hero button:hover{transform:scale(1.05);cursor:pointer}.hero button:active{transform:translateY(2px);box-shadow:0 2px 2px #00000040}.hero__colorModecontainer{position:relative}.hero__colorMode{position:absolute;right:0;width:25px;left:15rem}.hero__colorMode:hover{cursor:pointer}.info{display:flex;flex-direction:column;gap:20px}.info__description{max-width:24ch;align-self:center}.info__skills{display:flex;flex-direction:row;justify-content:space-evenly}.projects{display:flex;flex-direction:column;text-align:center}.projects__image{max-width:250px;align-self:center;background-color:var(--project-card-background);border-radius:20px}.projects__projects-container{display:flex;flex-direction:column;align-items:center;gap:30px}.projects a{width:fit-content;text-decoration:none;color:#fff;transition:transform .2s ease-in-out}.projects a:hover{transform:scale(1.05)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,figure{margin:0;padding:0}img,video,svg{max-width:100%}:root{--color-background: #fff;--color-btn: #df3225;--color-btn-text: #fff;--project-card-background: rgba(255, 255, 255, 0);--color-text: #222;--color-form-text: #555;--color-footer-text: #888}[data-theme=dark]{--color-background: #222;--color-btn: #fff;--color-btn-text: #222;--project-card-background: rgba(255, 255, 255, 0);--color-text: #fff;--color-form-text: #fff;--color-footer-text: #bbb}body{background-color:var(--color-background);display:flex;justify-content:center;margin:20px auto 60px}#root{display:flex;flex-direction:column;gap:60px}h1,h2,h3,p{color:var(--color-text);margin:0;padding:0}h2,h3,p{font-family:Roboto Mono,monospace}h1,h2{text-transform:uppercase}h2,h3{font-size:20px}h1{font-family:Rubik,sans-serif;font-size:32px}p{font-size:16px;font-weight:300}.sectionTitle{margin-bottom:30px}.hover{cursor:pointer}