section.title h1,.block.title h1{position:relative;text-transform:uppercase;font-weight:100;letter-spacing:3px;text-align:center;width:fit-content;margin:auto;font-family:"Dosis";font-size:clamp(2rem,5vw,3rem);font-weight:200}section.title h1:first-letter,.block.title h1:first-letter{font-size:110%}section.title h1::before,.block.title h1::before{content:"";position:absolute;inset:0;background-color:#090a0b;transform-origin:right}@keyframes scale-x-out-1000ms{from{transform:scaleX(1)}to{transform:scaleX(0)}}section.title h1::before,.block.title h1::before{animation:scale-x-out-1000ms 1000ms 0ms ease-in-out both;animation-play-state:paused;animation-timing-function:cubic-bezier(0.19, 1, 0.22, 1)}section.title h1::after,.block.title h1::after{content:"";position:absolute;height:5px;width:5px;bottom:5px;opacity:0;background-color:#fffafb;animation-name:a_reveal_h2_dot;animation-play-state:paused;animation-delay:400ms;animation-duration:500ms;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(0.68, -0.55, 0.27, 1.55)}@keyframes a_reveal_h2_dot{0%{transform:translateY(-10px);opacity:0}50%{opacity:1}100%{transform:translateY(0px);opacity:1}}@media(min-width: 576px){section.workflow .content,section.coding .content,section.design .content,section.other .content{max-width:500px;margin:auto}}@media(min-width: 768px){section.workflow .content,section.coding .content,section.design .content,section.other .content{gap:25px;max-width:700px}}section.workflow .container-items,section.coding .container-items,section.design .container-items,section.other .container-items{display:flex;flex-flow:column;gap:15px}section.workflow .container-items .item,section.coding .container-items .item,section.design .container-items .item,section.other .container-items .item{display:flex;flex-flow:column;gap:10px;background-color:rgba(28,31,33,.9);padding:10px;border-radius:5px;opacity:0}@keyframes translate-y-in-up-250ms{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}section.workflow .container-items .item,section.coding .container-items .item,section.design .container-items .item,section.other .container-items .item{animation:translate-y-in-up-250ms 250ms calc(100ms * var(--index)) ease-in-out both;animation-play-state:paused}section.workflow .container-items .item::after,section.coding .container-items .item::after,section.design .container-items .item::after,section.other .container-items .item::after{content:"";position:absolute;top:0;left:0;height:5px;width:5px;border:2px solid rgba(255,250,251,.6);border-right:0;border-bottom:0;border-radius:0 0 0 0}section.workflow .container-items .item::before,section.coding .container-items .item::before,section.design .container-items .item::before,section.other .container-items .item::before{content:"";position:absolute;bottom:0px;right:0px;height:5px;width:5px;border:2px solid rgba(255,250,251,.6);border-left:0;border-top:0;border-radius:0% 0% 20% 0%}@media(min-width: 768px){section.workflow .container-items .item,section.coding .container-items .item,section.design .container-items .item,section.other .container-items .item{padding:15px}section.workflow .container-items .item::before,section.workflow .container-items .item::after,section.coding .container-items .item::before,section.coding .container-items .item::after,section.design .container-items .item::before,section.design .container-items .item::after,section.other .container-items .item::before,section.other .container-items .item::after{height:10px;width:10px}}section.workflow .container-items .item .half.top,section.coding .container-items .item .half.top,section.design .container-items .item .half.top,section.other .container-items .item .half.top{display:flex;gap:15px}@media(min-width: 768px){section.workflow .container-items .item .half.top,section.coding .container-items .item .half.top,section.design .container-items .item .half.top,section.other .container-items .item .half.top{gap:25px}}section.workflow .container-items .item .half.top .wrapper-img img,section.coding .container-items .item .half.top .wrapper-img img,section.design .container-items .item .half.top .wrapper-img img,section.other .container-items .item .half.top .wrapper-img img{width:50px;background-color:#090a0b;border-radius:10px;padding:10px}@media(min-width: 768px){section.workflow .container-items .item .half.top .wrapper-img img,section.coding .container-items .item .half.top .wrapper-img img,section.design .container-items .item .half.top .wrapper-img img,section.other .container-items .item .half.top .wrapper-img img{width:75px;max-height:75px}}@media(min-width: 768px){section.workflow .container-items .item .half.top .details .name,section.coding .container-items .item .half.top .details .name,section.design .container-items .item .half.top .details .name,section.other .container-items .item .half.top .details .name{font-size:18px}}section.workflow .container-items .item .half.top .details .container-tags,section.coding .container-items .item .half.top .details .container-tags,section.design .container-items .item .half.top .details .container-tags,section.other .container-items .item .half.top .details .container-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}section.workflow .container-items .item .half.top .details .container-tags span,section.coding .container-items .item .half.top .details .container-tags span,section.design .container-items .item .half.top .details .container-tags span,section.other .container-items .item .half.top .details .container-tags span{background-color:#ba4235;padding:3px 5px;border-radius:3px;text-transform:capitalize;font-size:13px;font-weight:200}@media(min-width: 768px){section.workflow .container-items .item .half.top .details .container-tags span,section.coding .container-items .item .half.top .details .container-tags span,section.design .container-items .item .half.top .details .container-tags span,section.other .container-items .item .half.top .details .container-tags span{font-size:15px}}section.workflow .container-items .item .half.bottom,section.coding .container-items .item .half.bottom,section.design .container-items .item .half.bottom,section.other .container-items .item .half.bottom{display:flex;align-items:center;justify-content:space-between}section.workflow .container-items .item .half.bottom .level,section.coding .container-items .item .half.bottom .level,section.design .container-items .item .half.bottom .level,section.other .container-items .item .half.bottom .level{display:grid;position:relative;height:100%;width:60%;border-radius:15px;overflow-y:hidden}@media(min-width: 768px){section.workflow .container-items .item .half.bottom .level,section.coding .container-items .item .half.bottom .level,section.design .container-items .item .half.bottom .level,section.other .container-items .item .half.bottom .level{width:75%}}section.workflow .container-items .item .half.bottom .level .bar,section.coding .container-items .item .half.bottom .level .bar,section.design .container-items .item .half.bottom .level .bar,section.other .container-items .item .half.bottom .level .bar{width:100%;height:5px;background-color:#fffafb;border-radius:15px;overflow:hidden}@media(min-width: 768px){section.workflow .container-items .item .half.bottom .level .bar,section.coding .container-items .item .half.bottom .level .bar,section.design .container-items .item .half.bottom .level .bar,section.other .container-items .item .half.bottom .level .bar{height:7px}}section.workflow .container-items .item .half.bottom .level .bar::after,section.coding .container-items .item .half.bottom .level .bar::after,section.design .container-items .item .half.bottom .level .bar::after,section.other .container-items .item .half.bottom .level .bar::after{content:"";position:absolute;inset:0;background-color:#ba4235;transform:scaleX(0);transform-origin:left}section.workflow .container-items .item .half.bottom .level .stripe,section.coding .container-items .item .half.bottom .level .stripe,section.design .container-items .item .half.bottom .level .stripe,section.other .container-items .item .half.bottom .level .stripe{position:absolute;height:100%;width:2px;background-color:#090a0b;transform:scaleY(2);transform-origin:left center}section[data-inview=true] .item .bar::after{animation:a_bar 1s forwards cubic-bezier(0.65, 0, 0.35, 1) 500ms}section[data-inview=true] .item .stripe{animation:a_stripe 1s forwards cubic-bezier(0.65, 0, 0.35, 1) 500ms}@keyframes a_bar{from{transform:scaleX(0)}to{transform:scaleX(calc(var(--level) * 10%))}}@keyframes a_stripe{from{left:0}to{left:calc(var(--level) * 10%)}}
/*# sourceMappingURL=skills.css.map */