.primary-header{position:sticky;top:0;width:100%;background-color:#040403;display:flex;align-items:center;justify-content:space-between;height:7rem;color:#fff;z-index:1000}.primary-header .logo{font-size:3rem;margin-left:2rem;font-weight:900;text-transform:uppercase}.primary-header .primary-nav{height:4.5rem;display:flex;align-items:center;justify-content:flex-end}.primary-header .primary-nav ul{list-style-type:none;justify-content:space-around;align-items:center;display:flex}.primary-header .primary-nav ul li a{text-decoration:none;font-size:1.6rem;text-transform:uppercase;color:#fff;padding:3rem 2.5vw;transition:all .5s}.primary-header .primary-nav ul li a:hover{background-color:#fff;color:#040403}@media (width < 768px){.primary-header .primary-nav ul{position:absolute;display:none;top:0;width:100%;height:100vh;background-color:#040403;z-index:1000;flex-direction:column;justify-content:center;gap:10rem;translate:100%;transition:translate .4s}.primary-header .primary-nav ul.open{translate:0%;display:flex}.primary-header .primary-nav ul li{width:100%;text-align:center}.primary-header .primary-nav ul li a{display:block;padding:1rem}}.primary-header .primary-nav .hamburger-react{display:none;color:#fff}@media (width < 768px){.primary-header .primary-nav .hamburger-react{display:block;margin-right:1rem;z-index:10000}}.hero{min-height:calc(100vh - 7rem);background:#fff;color:#040403}.hero .wrapper{display:flex;flex-direction:column;gap:3rem;align-items:center}.hero .wrapper h2{font-size:clamp(2.8rem,5vw,3.2rem);text-align:center}.hero .wrapper p{font-size:1.8rem}.hero .wrapper button{all:unset;background-color:#040403;padding:2rem;width:clamp(250px,50%,768px);text-align:center;color:#dcf7fe;font-size:2.4rem;border-radius:1rem;box-shadow:.4rem .4rem .4rem #79795a;transition:box-shadow .3s;cursor:pointer}.hero .wrapper button:hover{box-shadow:.2rem .2rem .2rem #79795a}.vertical-timeline *{box-sizing:border-box}.vertical-timeline{width:95%;max-width:1170px;margin:0 auto;position:relative;padding:2em 0}.vertical-timeline:after{content:"";display:table;clear:both}.vertical-timeline:before{content:"";position:absolute;top:0;left:18px;height:100%;width:4px;background:var(--line-color)}.vertical-timeline.vertical-timeline--one-column-right:before{right:18px;left:unset}@media only screen and (min-width:1170px){.vertical-timeline.vertical-timeline--two-columns{width:90%}.vertical-timeline.vertical-timeline--two-columns:before{left:50%;margin-left:-2px}}.vertical-timeline-element{position:relative;margin:2em 0}.vertical-timeline-element>div{min-height:1px}.vertical-timeline-element:after{content:"";display:table;clear:both}.vertical-timeline-element:first-child{margin-top:0}.vertical-timeline-element:last-child{margin-bottom:0}@media only screen and (min-width:1170px){.vertical-timeline-element{margin:4em 0}.vertical-timeline-element:first-child{margin-top:0}.vertical-timeline-element:last-child{margin-bottom:0}}.vertical-timeline-element-icon{position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 4px #fff,inset 0 2px #00000014,0 3px 0 4px #0000000d}.vertical-timeline--one-column-right .vertical-timeline-element-icon{right:0;left:unset}.vertical-timeline-element-icon svg{display:block;width:24px;height:24px;position:relative;left:50%;top:50%;margin-left:-12px;margin-top:-12px}@media only screen and (min-width:1170px){.vertical-timeline--two-columns .vertical-timeline-element-icon{width:60px;height:60px;left:50%;margin-left:-30px}}.vertical-timeline-element-icon{-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden}.vertical-timeline--animate .vertical-timeline-element-icon.is-hidden{visibility:hidden}.vertical-timeline--animate .vertical-timeline-element-icon.bounce-in{visibility:visible;-webkit-animation:cd-bounce-1 .6s;-moz-animation:cd-bounce-1 .6s;animation:cd-bounce-1 .6s}@-webkit-keyframes cd-bounce-1{0%{opacity:0;-webkit-transform:scale(.5)}60%{opacity:1;-webkit-transform:scale(1.2)}to{-webkit-transform:scale(1)}}@-moz-keyframes cd-bounce-1{0%{opacity:0;-moz-transform:scale(.5)}60%{opacity:1;-moz-transform:scale(1.2)}to{-moz-transform:scale(1)}}@keyframes cd-bounce-1{0%{opacity:0;-webkit-transform:scale(.5);-moz-transform:scale(.5);-ms-transform:scale(.5);-o-transform:scale(.5);transform:scale(.5)}60%{opacity:1;-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.vertical-timeline-element-content{position:relative;margin-left:60px;background:#fff;border-radius:.25em;padding:1em;box-shadow:0 3px #ddd}.vertical-timeline--one-column-right .vertical-timeline-element-content{margin-right:60px;margin-left:unset}.vertical-timeline-element--no-children .vertical-timeline-element-content{background:0 0;box-shadow:none}.vertical-timeline-element-content:after{content:"";display:table;clear:both}.vertical-timeline-element-content h2{color:#303e49}.vertical-timeline-element-content .vertical-timeline-element-date,.vertical-timeline-element-content p{font-size:13px;font-size:.8125rem;font-weight:500}.vertical-timeline-element-content .vertical-timeline-element-date{display:inline-block}.vertical-timeline-element-content p{margin:1em 0 0;line-height:1.6}.vertical-timeline-element-title,.vertical-timeline-element-subtitle{margin:0}.vertical-timeline-element-content .vertical-timeline-element-date{float:left;padding:.8em 0;opacity:.7}.vertical-timeline-element-content-arrow{content:"";position:absolute;top:16px;right:100%;height:0;width:0;border:7px solid transparent;border-right:7px solid #fff}.vertical-timeline--one-column-right .vertical-timeline-element-content-arrow{content:"";position:absolute;top:16px;right:unset;left:100%;height:0;width:0;border:7px solid transparent;border-left:7px solid #fff}.vertical-timeline--one-column-right .vertical-timeline-element-content:before{left:100%;border-left:7px solid #fff;border-right:unset}.vertical-timeline-element--no-children .vertical-timeline-element-content:before{display:none}.vertical-timeline-element--no-children .vertical-timeline-element-content-arrow{display:none}@media only screen and (min-width:768px){.vertical-timeline-element-content h2{font-size:20px;font-size:1.25rem}.vertical-timeline-element-content p{font-size:16px;font-size:1rem}.vertical-timeline-element-content .vertical-timeline-element-date{font-size:14px;font-size:.875rem}}@media only screen and (min-width:1170px){.vertical-timeline--two-columns .vertical-timeline-element-content{margin-left:0;padding:1.5em;width:44%}.vertical-timeline--two-columns .vertical-timeline-element-content-arrow{top:24px;left:100%;transform:rotate(180deg)}.vertical-timeline--two-columns .vertical-timeline-element-content .vertical-timeline-element-date{position:absolute;width:100%;left:124%;top:6px;font-size:16px;font-size:1rem}.vertical-timeline--two-columns .vertical-timeline-element.vertical-timeline-element--right .vertical-timeline-element-content,.vertical-timeline--two-columns .vertical-timeline-element:nth-child(even):not(.vertical-timeline-element--left) .vertical-timeline-element-content{float:right}.vertical-timeline--two-columns .vertical-timeline-element.vertical-timeline-element--right .vertical-timeline-element-content-arrow,.vertical-timeline--two-columns .vertical-timeline-element:nth-child(even):not(.vertical-timeline-element--left) .vertical-timeline-element-content-arrow{top:24px;left:auto;right:100%;transform:rotate(0)}.vertical-timeline--one-column-right .vertical-timeline-element.vertical-timeline-element--right .vertical-timeline-element-content-arrow,.vertical-timeline--one-column-right .vertical-timeline-element:nth-child(even):not(.vertical-timeline-element--left) .vertical-timeline-element-content-arrow{top:24px;left:100%;right:auto;transform:rotate(0)}.vertical-timeline--two-columns .vertical-timeline-element.vertical-timeline-element--right .vertical-timeline-element-content .vertical-timeline-element-date,.vertical-timeline--two-columns .vertical-timeline-element:nth-child(even):not(.vertical-timeline-element--left) .vertical-timeline-element-content .vertical-timeline-element-date{left:auto;right:124%;text-align:right}}.vertical-timeline--animate .vertical-timeline-element-content.is-hidden{visibility:hidden}.vertical-timeline--animate .vertical-timeline-element-content.bounce-in{visibility:visible;-webkit-animation:cd-bounce-2 .6s;-moz-animation:cd-bounce-2 .6s;animation:cd-bounce-2 .6s}@media only screen and (min-width:1170px){.vertical-timeline--two-columns.vertical-timeline--animate .vertical-timeline-element.vertical-timeline-element--right .vertical-timeline-element-content.bounce-in,.vertical-timeline--two-columns.vertical-timeline--animate .vertical-timeline-element:nth-child(even):not(.vertical-timeline-element--left) .vertical-timeline-element-content.bounce-in{-webkit-animation:cd-bounce-2-inverse .6s;-moz-animation:cd-bounce-2-inverse .6s;animation:cd-bounce-2-inverse .6s}}@media only screen and (max-width:1169px){.vertical-timeline--animate .vertical-timeline-element-content.bounce-in{visibility:visible;-webkit-animation:cd-bounce-2-inverse .6s;-moz-animation:cd-bounce-2-inverse .6s;animation:cd-bounce-2-inverse .6s}}@-webkit-keyframes cd-bounce-2{0%{opacity:0;-webkit-transform:translateX(-100px)}60%{opacity:1;-webkit-transform:translateX(20px)}to{-webkit-transform:translateX(0)}}@-moz-keyframes cd-bounce-2{0%{opacity:0;-moz-transform:translateX(-100px)}60%{opacity:1;-moz-transform:translateX(20px)}to{-moz-transform:translateX(0)}}@keyframes cd-bounce-2{0%{opacity:0;-webkit-transform:translateX(-100px);-moz-transform:translateX(-100px);-ms-transform:translateX(-100px);-o-transform:translateX(-100px);transform:translate(-100px)}60%{opacity:1;-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);-o-transform:translateX(20px);transform:translate(20px)}to{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translate(0)}}@-webkit-keyframes cd-bounce-2-inverse{0%{opacity:0;-webkit-transform:translateX(100px)}60%{opacity:1;-webkit-transform:translateX(-20px)}to{-webkit-transform:translateX(0)}}@-moz-keyframes cd-bounce-2-inverse{0%{opacity:0;-moz-transform:translateX(100px)}60%{opacity:1;-moz-transform:translateX(-20px)}to{-moz-transform:translateX(0)}}@keyframes cd-bounce-2-inverse{0%{opacity:0;-webkit-transform:translateX(100px);-moz-transform:translateX(100px);-ms-transform:translateX(100px);-o-transform:translateX(100px);transform:translate(100px)}60%{opacity:1;-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);-o-transform:translateX(-20px);transform:translate(-20px)}to{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translate(0)}}.tag{border-radius:1rem;text-transform:uppercase;font-weight:700;padding:0 1rem;color:#040403;margin:.3rem .3rem .3rem 0;font-size:1rem;cursor:pointer;background-color:#dcf7fe}#projects{background:#040403;color:#dcf7fe}#projects .wrapper{width:clamp(60%,90%,1440px)}.vertical-timeline-element-content .vertical-timeline-element-title{color:#040403;font-size:1.8rem}.vertical-timeline-element-content .vertical-timeline-element-subtitle{color:#040403;font-style:italic}.vertical-timeline-element-content .vertical-timeline-element-date{font-size:1.2rem;color:#040403}@media (width >= 1170px){.vertical-timeline-element-content .vertical-timeline-element-date{color:#fff;margin:0 2rem;font-size:1.6rem!important}}.vertical-timeline-element-content .image{text-align:center}.vertical-timeline-element-content .image img{max-width:90%}.vertical-timeline-element-content .tags{display:flex;flex-wrap:wrap}.vertical-timeline-element-content .links{width:100%;display:flex;justify-content:space-around}.vertical-timeline-element-content .links a{color:#00008b;text-decoration:none}.vertical-timeline-element-content .links a+a{margin-left:1rem}.vertical-timeline-element-content .links a:hover{color:#00f}.show-all-projects{color:#87ceeb;font-size:1.8rem;position:absolute;bottom:2rem;right:2rem;text-decoration:none}.show-all-projects:hover{color:#add8e6}form{display:flex;flex-direction:column}form label{font-weight:700;font-size:1.6rem}form input,form textarea{margin-bottom:2rem;padding:1rem}form input::placeholder,form textarea::placeholder{font-style:italic}form textarea{min-height:12rem}form button{all:unset;width:50%;margin:0 auto;text-align:center;border:.1rem solid #fff;border-radius:1rem;background-color:#fff;color:#040403;font-size:1.4rem;font-weight:700;letter-spacing:.2rem;cursor:pointer;box-shadow:.4rem .4rem .4rem #dcf7fe;transition:box-shadow,translate .6s;padding-bottom:1rem}form button:hover{box-shadow:.2rem .2rem .2rem #dcf7fe}footer{height:20rem;background-color:#fff;color:#040403;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem}footer a{all:unset;cursor:pointer;font-size:1.6rem}footer div a{font-size:3rem;display:inline-block;margin-inline:2rem;transition:color .6s}footer a:hover{color:#0069a8}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:10px}body{font-family:system-ui;font-size:1.125rem;line-height:1.5;position:relative;overflow-x:hidden}section{padding-block:3rem;text-align:justify;min-height:100vh;display:flex;justify-content:center;align-items:center;line-height:2.4rem;max-width:100vw;overflow:hidden}section .wrapper{width:clamp(70%,80%,1280px);margin-inline:auto;overflow-x:hidden}@media (width >= 960px){section .wrapper{width:50%}}section .wrapper h2{font-size:3.6rem;padding-block:1.6rem}section .wrapper p{padding-block:1.2rem;font-size:1.4rem}section#projects{position:relative}section#about{background:#fff;color:#040403}section#skills{background-color:#dcf7fe;color:#040403;text-align:center}section#skills .wrapper{all:unset;width:clamp(70%,80%,1280px);display:flex;flex-direction:column;gap:2rem;height:100%}section#skills .wrapper h3{font-size:2rem;rotate:-6deg}section#skills .wrapper ul{display:flex;flex-wrap:wrap;justify-content:space-around;font-size:1.6rem;list-style-type:none;margin-bottom:2rem;row-gap:5rem}section#skills .wrapper ul>*{flex-basis:25%}section#skills .wrapper ul:last-child>*{flex-basis:33%}section#skills .wrapper ul svg{font-size:5rem}section#skills .wrapper ul object{width:5rem}section#skills .wrapper ul li svg{transition:color 1s,background-color 1s}section#skills .wrapper ul li svg:hover{color:#333!important;background-color:transparent}section#skills .wrapper ul li object{transition:filter 1s}section#skills .wrapper ul li object:hover{filter:invert(20%) sepia(5%) saturate(0%) hue-rotate(206deg) brightness(92%) contrast(97%)!important}section#skills .wrapper ul li.html5 svg{color:#e55424}section#skills .wrapper ul li.css3 svg{color:#176eb5}section#skills .wrapper ul li.sass svg{color:#cc66a0}section#skills .wrapper ul li.javascript svg{background-color:#000;color:#f6ef28}section#skills .wrapper ul li.node svg{color:#2c9b2c}section#skills .wrapper ul li.ruby object{filter:invert(21%) sepia(19%) saturate(7229%) hue-rotate(342deg) brightness(123%) contrast(93%)}section#skills .wrapper ul li.python svg{color:#3d7ab3}section#skills .wrapper ul li.php svg{color:#767dad}section#skills .wrapper ul li.react svg{color:#60cbf6}section#skills .wrapper ul li.redux object{filter:invert(29%) sepia(99%) saturate(964%) hue-rotate(238deg) brightness(87%) contrast(86%)}section#skills .wrapper ul li.rails object{filter:invert(14%) sepia(61%) saturate(6497%) hue-rotate(3deg) brightness(82%) contrast(122%)}section#skills .wrapper ul li.react-native svg{color:#60cbf6}section#skills .wrapper ul li.postgresql object{filter:invert(37%) sepia(18%) saturate(1574%) hue-rotate(165deg) brightness(91%) contrast(87%)}section#skills .wrapper ul li.puppeteer object{filter:invert(31%) sepia(79%) saturate(438%) hue-rotate(165deg) brightness(95%) contrast(83%)}section#skills .wrapper ul li.git svg{color:#f04624}section#skills .wrapper ul li.jest object{filter:invert(11%) sepia(86%) saturate(5161%) hue-rotate(348deg) brightness(93%) contrast(93%)}section#skills .wrapper ul li.mocha object{filter:invert(44%) sepia(18%) saturate(901%) hue-rotate(345deg) brightness(92%) contrast(95%)}section#contact{background:#040403;color:#dcf7fe}