@import"https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Source+Serif+Pro:wght@400;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{background-color:#3d3e42;font-family:Roboto,sans-serif;color:#fff;overflow-x:hidden}.center{max-width:780px;margin:0 auto}img{max-width:100%}h2{font-family:"Source Serif Pro",serif;font-size:3rem;font-weight:600;margin-bottom:20px}header{display:flex;max-width:780px;margin:0 auto;align-items:center;padding-top:30px;padding-left:10px;padding-right:10px}header nav{flex-grow:1;text-align:center}header nav a{color:hsla(0,0%,100%,.6);padding:10px;text-decoration:none}header nav a:hover{color:#fff}header div.social a{display:inline-block}header div.social a svg{height:20px;fill:hsla(0,0%,100%,.6);display:inline-block;margin:0 10px}header img{width:90px}@media screen and (max-width:480px){header div.social a svg,header img{display:none}}section#intro{max-width:780px;margin:0 auto;align-items:center;display:flex;justify-content:space-between;min-height:60vh;padding-top:30px;padding-left:10px;padding-right:10px}@media only screen and (max-width:540px){section#intro{display:block;padding-top:50px}section#intro img{display:block;margin:0 auto}}section#intro p{color:#fff;font-size:1.8rem;line-height:2.6rem;opacity:0;transition:all .3s linear;position:relative;top:-50px}section#intro.visible p{opacity:1;top:0}section#intro a{border:3px solid #fac86b;border-radius:7px;color:#fac86b;text-decoration:none;padding:10px 20px;display:inline-block;margin-top:20px;font-size:1.4rem;transition:all .3s linear;position:relative;opacity:0;bottom:-50px}section#intro.visible a{bottom:0;opacity:1}section#intro span{color:#fac86b;font-family:"Source Serif Pro",serif;font-size:3.2rem;font-weight:600}section#intro img{max-width:300px;opacity:0;transition:opacity .5s linear}section#intro.visible img{opacity:1}@media only screen and (max-width:300px){section#intro img{width:100%}section#intro span{font-size:3rem}}section#about{background-color:#31333b;box-shadow:inset 0 10px 10px rgba(0,0,0,.2);opacity:0;transition:opacity .3s linear;padding:100px 10px}section#about.visible{opacity:1}section#about p{padding-left:60px;line-height:1.8rem;font-size:1.2rem}section#about p:before{content:"";display:block;width:50px;height:2px;background-color:#fac86b;margin-left:-60px;position:relative;top:15px}section#skills{background-color:#31333b;padding-bottom:100px;padding-left:10px;padding-right:10px}section#skills h2{text-align:center}.skills-container{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:30px;gap:30px}@media only screen and (min-width:700px){.skills-container{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:30px;gap:30px}}@media only screen and (max-width:280px){.skills-container{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:10px;gap:10px}div .skill-box{padding:10px}.skill-box img{max-width:10px}}.skill-box{opacity:0;transition:all .4s linear;background-color:#3d3e42;padding:40px;text-align:center;border-radius:10px;position:relative;left:-20px}.skill-box span{display:block}.skills-container.visible .skill-box{opacity:1;left:0}.skill-box:nth-child(2){transition-delay:.1s}.skill-box:nth-child(3){transition-delay:.2s}.skill-box:nth-child(4){transition-delay:.3s}.skill-box:nth-child(5){transition-delay:.4s}.skill-box:nth-child(6){transition-delay:.5s}.skill-box:nth-child(7){transition-delay:.6s}.skill-box:nth-child(8){transition-delay:.7s}.skill-box:nth-child(9){transition-delay:.8s}.skill-box:nth-child(10){transition-delay:.9s}.skill-box:nth-child(11){transition-delay:1s}.skill-box:nth-child(12){transition-delay:1.1s}.skill-box:nth-child(13){transition-delay:1.2s}.skill-box:nth-child(14){transition-delay:1.3s}.skill-box:nth-child(15){transition-delay:1.4s}.skill-box:nth-child(16){transition-delay:1.5s}.skill-box:nth-child(17){transition-delay:1.6s}.skill-box:nth-child(18){transition-delay:1.7s}.skill-box:nth-child(19){transition-delay:1.8s}.skill-box:nth-child(20){transition-delay:1.9s}.skill-box:nth-child(21){transition-delay:2s}.skill-box img{display:inline-block;margin-bottom:10px;max-width:60px}section#portfolio{background-color:#31333b;padding-bottom:100px;padding-left:10px;padding-right:10px}section#portfolio h2{text-align:center}.portfolio-container{display:grid;grid-template-columns:repeat(1,1fr);grid-gap:30px;gap:30px}.portfolio-container a{display:block;opacity:0;position:relative;left:50px;transition:all .3s ease-in-out}.portfolio-container a:nth-child(2){transition-delay:.1s}.portfolio-container a:nth-child(3){transition-delay:.2s}.portfolio-container a:nth-child(4){transition-delay:.3s}.portfolio-container a:nth-child(5){transition-delay:.4s}.portfolio-container a:nth-child(6){transition-delay:.5s}.portfolio-container a:nth-child(7){transition-delay:.6s}.portfolio-container a:nth-child(8){transition-delay:.7s}.portfolio-container a:nth-child(9){transition-delay:.8s}.portfolio-container a:nth-child(10){transition-delay:.9s}.portfolio-container a:nth-child(11){transition-delay:1s}.portfolio-container a:nth-child(12){transition-delay:1.1s}.portfolio-container a:nth-child(13){transition-delay:1.2s}.portfolio-container a:nth-child(14){transition-delay:1.3s}.portfolio-container a:nth-child(15){transition-delay:1.4s}.portfolio-container a:nth-child(16){transition-delay:1.5s}.portfolio-container a:nth-child(17){transition-delay:1.6s}.portfolio-container a:nth-child(18){transition-delay:1.7s}.portfolio-container a:nth-child(19){transition-delay:1.8s}.portfolio-container a:nth-child(20){transition-delay:1.9s}.portfolio-container a:nth-child(21){transition-delay:2s}section#portfolio.visible a{opacity:1;left:0}.portfolio-item{background-color:#3d3e42;max-width:450px;margin:0 auto;border-radius:10px;color:#fff;position:relative;padding-bottom:60px}.portfolio-item>div{padding:10px}.portfolio-item article{max-width:500px;max-height:300px;-o-object-fit:cover;object-fit:cover;overflow:hidden}.portfolio-item>img{width:100%;height:100%}.portfolio-desc{padding:15px 0}.tech{display:flex;flex-wrap:wrap;gap:1px;align-items:center}.tech-item{background-color:#31333b;padding:5px;text-align:center;border-radius:10px}.portfolio-item-btn-container{width:100%;display:flex;justify-content:space-around;padding-top:10px;position:absolute;bottom:0}.portfolio-item-btn-container a{padding:10px;color:hsla(0,0%,100%,.6);text-decoration:none;display:flex;align-items:center;gap:5px}.portfolio-item-btn-container a:hover{border:1px solid #31333b;border-radius:20px}@media only screen and (min-width:780px){.portfolio-container{grid-template-columns:repeat(2,1fr)}}section#experience h2{position:relative;top:-25px}section#experience .timeline{padding:0 5px}section#experience .timeline .item{display:flex;opacity:0;transition:all .3s ease-in-out;position:relative;top:-50px}section#experience .timeline .item:nth-child(2){transition-delay:.3s}section#experience .timeline .item:nth-child(3){transition-delay:.6s}section#experience .timeline .item:nth-child(4){transition-delay:.9s}section#experience .timeline .item:nth-child(5){transition-delay:1.2s}section#experience .timeline .item:nth-child(6){transition-delay:1.5s}section#experience .timeline .item:nth-child(7){transition-delay:1.8s}section#experience .timeline .item:nth-child(8){transition-delay:2.1s}section#experience .timeline .item:nth-child(9){transition-delay:2.4s}section#experience .timeline .item:nth-child(10){transition-delay:2.7s}section#experience .timeline .item:nth-child(11){transition-delay:3s}section#experience .timeline .item:nth-child(12){transition-delay:3.3s}section#experience .timeline .item:nth-child(13){transition-delay:3.6s}section#experience .timeline .item:nth-child(14){transition-delay:3.9s}section#experience .timeline .item:nth-child(15){transition-delay:4.2s}section#experience .timeline .item:nth-child(16){transition-delay:4.5s}section#experience .timeline .item:nth-child(17){transition-delay:4.8s}section#experience .timeline .item:nth-child(18){transition-delay:5.1s}section#experience .timeline .item:nth-child(19){transition-delay:5.4s}section#experience .timeline .item:nth-child(20){transition-delay:5.7s}section#experience .timeline .item:nth-child(21){transition-delay:6s}section#experience .timeline .item .date{padding-right:15px;display:flex;position:relative}section#experience .timeline .item .date span.year{background-color:#5c5d61;padding:0 10px;height:30px;display:inline-block;line-height:30px}section#experience .timeline .item .date span.arrow{display:inline-block;width:0;height:0;border-color:transparent transparent transparent #5c5d61;border-style:solid;border-width:15px 0 15px 10px}section#experience .timeline .item .separator{display:flex;flex-direction:column}section#experience .timeline .item .separator .dot{width:30px;height:30px;background-color:#fac86b;border-radius:50%;box-shadow:0 0 20px #fac86b}section#experience .timeline .item .separator .line{min-height:10px;width:2px;background-color:#fff;flex-grow:1;margin-left:14px;margin-top:30px;margin-bottom:30px;transition:all .5s ease-in-out;max-height:0}section#experience .timeline .item .texts{padding-left:40px;padding-bottom:40px}section#experience .timeline .item .texts h3{font-size:1.7rem;font-weight:400}section#experience .timeline .item .texts h4{margin-top:6px;margin-bottom:6px;font-weight:400;font-size:1.4rem}section#experience .timeline .item .texts p{color:hsla(0,0%,100%,.55);line-height:1.3rem;margin-top:10px}section#experience.visible div.timeline div.item{opacity:1;top:0}section#experience div.timeline div.item:nth-child(2) .line{transition-delay:.3s}section#experience div.timeline div.item:nth-child(3) .line{transition-delay:.6s}section#experience div.timeline div.item:nth-child(4) .line{transition-delay:.9s}section#experience div.timeline div.item:nth-child(5) .line{transition-delay:1.2s}section#experience div.timeline div.item:nth-child(6) .line{transition-delay:1.5s}section#experience div.timeline div.item:nth-child(7) .line{transition-delay:1.8s}section#experience div.timeline div.item:nth-child(8) .line{transition-delay:2.1s}section#experience div.timeline div.item:nth-child(9) .line{transition-delay:2.4s}section#experience div.timeline div.item:nth-child(10) .line{transition-delay:2.7s}section#experience div.timeline div.item:nth-child(11) .line{transition-delay:3s}section#experience div.timeline div.item:nth-child(12) .line{transition-delay:3.3s}section#experience div.timeline div.item:nth-child(13) .line{transition-delay:3.6s}section#experience div.timeline div.item:nth-child(14) .line{transition-delay:3.9s}section#experience div.timeline div.item:nth-child(15) .line{transition-delay:4.2s}section#experience div.timeline div.item:nth-child(16) .line{transition-delay:4.5s}section#experience div.timeline div.item:nth-child(17) .line{transition-delay:4.8s}section#experience div.timeline div.item:nth-child(18) .line{transition-delay:5.1s}section#experience div.timeline div.item:nth-child(19) .line{transition-delay:5.4s}section#experience div.timeline div.item:nth-child(20) .line{transition-delay:5.7s}section#experience div.timeline div.item:nth-child(21) .line{transition-delay:6s}section#experience.visible div.timeline div.item .line{max-height:200px}section#contact{border-top:2px solid #fac86b;margin-top:50px;text-align:center;position:relative;padding:60px 0}section#contact h2{text-align:center;position:absolute;top:-28px;left:50%;width:350px;margin-left:-175px;display:inline-block;padding:0 30px;background-color:#3d3e42}section#contact div.box{background-color:#31333b;display:inline-flex;align-items:center;width:280px;margin:10px;padding:15px;border-radius:15px;justify-content:center;opacity:0;transition:all .3s ease-in-out}section#contact div.box:nth-child(2){transition-delay:.1s}section#contact div.box:nth-child(3){transition-delay:.2s}section#contact div.box:nth-child(4){transition-delay:.3s}section#contact div.box:nth-child(5){transition-delay:.4s}section#contact div.box:nth-child(6){transition-delay:.5s}section#contact div.box:nth-child(7){transition-delay:.6s}section#contact div.box:nth-child(8){transition-delay:.7s}section#contact div.box:nth-child(9){transition-delay:.8s}section#contact div.box:nth-child(10){transition-delay:.9s}section#contact div.box:nth-child(11){transition-delay:1s}section#contact div.box:nth-child(12){transition-delay:1.1s}section#contact div.box:nth-child(13){transition-delay:1.2s}section#contact div.box:nth-child(14){transition-delay:1.3s}section#contact div.box:nth-child(15){transition-delay:1.4s}section#contact div.box:nth-child(16){transition-delay:1.5s}section#contact div.box:nth-child(17){transition-delay:1.6s}section#contact div.box:nth-child(18){transition-delay:1.7s}section#contact div.box:nth-child(19){transition-delay:1.8s}section#contact div.box:nth-child(20){transition-delay:1.9s}section#contact div.box:nth-child(21){transition-delay:2s}section#contact div.box svg{height:30px;fill:#fff;margin-right:15px}section#contact div.box a{color:#fac86b;text-decoration:none}section#contact.visible div.box{opacity:1}@media only screen and (max-width:300px){div.box{max-width:265px}}footer{background:#31333b}footer div.social{display:flex}footer div.social svg{height:25px;fill:#fff}footer div.social div.links{padding:0 50px}footer div.social div.links a{position:relative;top:-10px;padding:0 6px}footer div.social .line{flex-grow:1;border-top:2px solid #fac86b}footer h2{margin-bottom:0;text-align:center;padding:50px 0;color:#fac86b;font-weight:400;font-size:2rem}