@import "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap";:root{--bg:#0f0e17;--border:#fffffe;--headline:#fffffe;--para:#a7a9be;--btn:#ff8906;--btn-hover:#d97400;--btn-text:#fffffe;--tertiary:#e53170;--light-black:#2e2f3e}html{scroll-behavior:smooth}*{box-sizing:border-box;margin:0;padding:0}body{font-optical-sizing:auto;background-color:var(--bg);color:var(--headline);font-family:Open Sans,sans-serif}header{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:sticky;top:0}header nav{border:3px solid var(--border);width:80%;box-shadow:4px 4px var(--border);border-radius:8px;justify-content:space-between;align-items:center;margin:10px auto;padding:8px 12px;display:flex}header nav .logo h2{font-size:24px}header nav .navs{gap:16px;display:flex}header nav .navs a{color:var(--btn-text);text-decoration:none}header nav .navs a:hover{color:var(--btn)}header nav .socials{align-items:center;gap:16px;display:flex}header nav .socials a{color:var(--btn-text);font-size:20px;text-decoration:none}header nav .socials a:hover{color:var(--tertiary)}main{width:80%;margin:20px auto}main .section-hero{justify-content:space-evenly;align-items:center;gap:24px;height:85vh;display:flex}main .section-hero div{flex-direction:column;gap:16px;display:flex}main .section-hero div h1{font-size:52px}main .section-hero div h4{color:var(--para);font-size:16px;font-weight:400}main .section-hero div svg{width:40vw}.btn-group{margin-top:10px}.btn-group button{width:fit-content;color:var(--btn-text);background-color:var(--btn);cursor:pointer;border:none;border-radius:4px;padding:8px 12px;font-size:16px}.btn-group button:hover{background-color:var(--btn-hover)}.section-timeline,.section-articles{margin-top:100px}.section-timeline h2,.section-articles h2{margin-bottom:12px;font-size:52px}.section-timeline div h4:before{content:"";background-color:var(--border);border-radius:50%;width:16px;height:16px;position:absolute}.section-timeline div div h4{text-align:center;margin-bottom:16px;font-size:32px;position:relative}.card{justify-content:center;align-items:center;gap:100px;padding:16px;display:flex}.section-timeline .card{border-bottom:3px solid var(--border)}.card div{width:50%}.section-timeline .card:nth-child(2n){border-left:3px solid var(--border);border-end-start-radius:10px;flex-direction:row}.section-timeline .card:nth-child(odd){border-right:3px solid var(--border);border-bottom-right-radius:10px;flex-direction:row-reverse}.section-timeline .card:nth-child(odd) h4:before{top:50%;right:-42px;transform:translateY(-50%)}.section-timeline .card:nth-child(2n) h4:before{top:50%;left:-42px;transform:translateY(-50%)}.card>div:first-of-type{background-color:var(--border);color:var(--bg);border-radius:8px;flex-direction:column;gap:16px;width:50%;padding:16px;display:flex}.list-experience{padding:0 0 0 16px}video,.project-ss{border:3px solid var(--border);box-shadow:4px 4px var(--border);width:100%;margin:auto;padding:16px}img{width:100%;margin:auto;padding:16px}.list-experience,.tech{width:80%;color:var(--light-black);border:3px solid var(--bg);border-radius:8px;margin:auto;padding:16px}.tech{flex-wrap:wrap;gap:16px;list-style:none;display:flex}.tech li{background-color:var(--btn);color:var(--btn-text);border-radius:4px;padding:4px 8px;font-size:16px}.project-cta{width:fit-content;color:var(--btn-text);background-color:var(--tertiary);cursor:pointer;border:none;border-radius:4px;margin:auto;padding:8px 12px;font-size:16px;text-decoration:none}.list-experience li{margin-left:16px;font-size:16px}.red{color:#ff2929}.image-frame{border:3px solid var(--border);width:100%;height:300px;box-shadow:4px 4px var(--border);margin:auto;position:relative;overflow:hidden}.image-frame img{will-change:transform;width:100%;height:auto;padding:16px;animation:12s linear infinite scrollImage;position:absolute;top:0}@keyframes scrollImage{0%{transform:translateY(0)}to{transform:translateY(calc(300px - 100%))}}.section-articles .card div h4{text-align:center;font-size:32px}.section-articles .card:nth-child(2n){flex-direction:row}.section-articles .card:nth-child(odd){flex-direction:row-reverse}footer{justify-content:center;align-items:center;height:100px;font-size:32px;display:flex}footer p{align-items:center;gap:6px;display:inline-flex}footer i{font-size:1em;line-height:1}.iconoir-heart-solid{color:var(--tertiary)}.iconoir-html5{color:var(--btn)}.iconoir-css3{color:#33f}section{scroll-margin-top:80px}
