*,:before,:after{box-sizing:border-box;scroll-behavior:smooth;margin:0;padding:0}:root{--base:#555;--base-100:#f1f1f1;--base-800:#000;--yellow:#ffda4b;--yellow-100:#fffbe6;--yellow-400:#ffda4b;--yellow-800:#8b6f00;--blue:#0a61ae;--blue-100:#e2f8ff;--blue-400:#61dafb;--blue-800:#0a61ae}body{font-optical-sizing:auto;font-family:Open Sans,sans-serif;font-size:20px;font-style:normal}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}header{background-color:#fff;border-bottom:1px solid #000;justify-content:space-between;max-width:1440px;margin:auto;padding-top:10px;padding-bottom:10px;display:flex}header .logo-holder{color:var(--base-800);align-items:center;padding:10px;font-weight:600;display:flex}header .logo-holder .logo{background-color:var(--base-100);color:var(--base-100);border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin-right:20px;font-size:32px;display:flex}header .logo-holder .logo-text{flex:1}header nav{align-items:center;display:flex}header nav ul{gap:5px;list-style-type:none;display:flex}header nav ul li{display:inline-block}header nav ul li a{color:var(--base);padding:10px 20px;display:inline-block}header nav ul li a:hover{background-color:var(--base-100);border-radius:10px;text-decoration:none}header nav .mobile-toggle{color:var(--base-800);padding:10px;display:none}@media (max-width:768px){header nav .mobile-toggle{display:inline-block;position:absolute;top:30px;right:20px}}@media (max-width:1024px){header{flex-direction:column;align-items:center}}@media (max-width:768px){header{flex-direction:column;align-items:center}header nav{width:100%;margin-top:10px}header nav ul{text-align:center;flex-direction:column;width:100%;display:none}header nav ul a{width:100%}header nav ul.active{display:flex}}.container{gap:30px;max-width:1440px;margin:30px auto}@media (max-width:1440px){.container{padding-left:30px;padding-right:30px}}.button{background-color:var(--blue);color:var(--base-100);border-radius:10px;padding:10px 30px;transition:all .3s;display:inline-block}.button:hover{background-color:var(--base-800);text-decoration:none}.button.white{color:var(--base-800);background-color:#fff}.button.white:hover{background-color:var(--base-100);color:var(--base-800)}.button.black{color:#fff;background-color:#000}.button.black:hover{background-color:var(--base);color:var(--base-100)}h1{margin-bottom:10px;font-size:64px;line-height:1}h1 small{font-weight:100;display:block}@media (max-width:1024px){h1{font-size:56px}}.hero{display:flex}@media (max-width:1024px){.hero{flex-direction:column}}.hero .hero-blue{background-color:var(--blue-100);border-radius:30px;flex-direction:column;flex:1;justify-content:center;padding:30px;display:flex}@media (max-width:768px){.hero .hero-blue span{display:none}}.hero .hero-blue .call-to-action{margin-top:10px;margin-bottom:10px}.hero .hero-blue .call-to-action a{margin-left:5px;margin-right:5px}@media (max-width:1024px){.hero .hero-blue .call-to-action a{margin:auto auto 5px}}.hero .hero-blue .social-links a{margin:2px}.hero .hero-blue .social-links a:hover{text-decoration:none}.hero .hero-yellow{background-color:var(--yellow);border-radius:30px;flex:1;justify-content:center;align-items:flex-end;padding:0 30px;display:flex}.hero .hero-yellow img{max-width:420px;margin-top:-60px;margin-bottom:-10px}.logos{background-color:var(--base-100);border-radius:30px;padding:30px 0}@media (max-width:1440px){.logos{border-radius:0}}.logos .marquee{align-items:center;width:100vw;max-width:100%;height:auto;min-height:128px;display:flex;position:relative;overflow:hidden}.logos .marquee .track{white-space:nowrap;will-change:transform;align-items:center;gap:10px;height:100%;animation:40s linear infinite marquee;display:flex;position:absolute}.logos .marquee .track img{object-fit:contain;flex-shrink:0;width:auto;height:120px}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}h2{text-align:center;color:var(--base-800);margin-bottom:10px;padding:30px;font-size:64px;line-height:1}h2 small{color:var(--base);font-size:.5em;font-weight:100;display:block}@media (max-width:1024px){h2{font-size:48px}}h3{color:var(--base-800);margin-bottom:20px;font-size:32px;font-weight:600;line-height:1}.certs .display-case{background-color:var(--yellow-100);border-radius:30px;flex-wrap:wrap;justify-content:center;gap:30px;padding:50px 30px;display:flex}@media (max-width:1024px){.certs .display-case{flex-direction:column;align-items:center}}.certs .display-case .cert-box{background-color:var(--blue-100);text-align:center;color:#000;border-radius:15px;width:180px;height:auto;padding:20px;position:relative;box-shadow:0 4px 10px #0003}.certs .display-case .cert-box .cert-icon{flex-direction:column;justify-content:space-between;display:flex}.certs .display-case .cert-box .cert-icon img{object-fit:centain;width:100%;height:auto;padding:5px;transition:all .3s;position:relative}.certs .display-case .cert-box .cert-icon:hover img{scale:1.05}.certs .display-case .cert-box.in-progress{opacity:.3;transition:opacity .3s}.certs .display-case .cert-box.in-progress:hover{opacity:1}.certs .display-case .cert-box.in-progress .tooltip{width:80%;color:var(--base-100);text-align:center;pointer-events:none;opacity:0;visibility:hidden;z-index:1;background-color:#0009;border-radius:8px;padding:6px 10px;font-weight:700;transition:opacity .3s,visibility .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)}.certs .display-case .cert-box.in-progress:hover .tooltip{opacity:1;visibility:visible}.certs .display-case .cert-box p{font-size:medium;font-weight:600}.certs p.legend{opacity:.5}.skills .holder-blue{background-color:var(--blue-100);border-radius:30px;padding:30px;display:flex}@media (max-width:1024px){.skills .holder-blue{flex-direction:column}}.skills .holder-blue .left-column{flex:1}.skills .holder-blue .left-column ul{flex-wrap:wrap;gap:10px;margin-bottom:20px;margin-right:100px;list-style-type:none;display:flex}.skills .holder-blue .left-column ul li{background-color:var(--blue-400);border-radius:15px;padding:10px 20px;display:inline-block}@media (max-width:1024px){.skills .holder-blue .left-column ul{justify-content:center;margin:auto auto 20px}}@media (max-width:1024px){.skills .holder-blue .left-column{text-align:center}}.skills .holder-blue .right-column{flex:1}.skills .holder-blue .right-column p{margin-bottom:20px}.work-experience .jobs{gap:30px;display:flex}@media (max-width:1024px){.work-experience .jobs{flex-direction:column}}.work-experience .jobs article{background-color:var(--yellow-100);border-radius:30px;flex:1;padding:30px}.work-experience .jobs article h3{margin-top:20px;margin-bottom:10px}.work-experience .jobs article div{color:var(--base-800);margin-bottom:5px;font-weight:600}.work-experience .jobs article p{margin-bottom:10px}.work-experience .jobs article figure{border-radius:15px;width:100%;padding-top:56.25%;position:relative;overflow:hidden}.work-experience .jobs article figure img{object-fit:cover;height:100%;transition:all 1s;position:absolute;top:0;left:0}.work-experience .jobs article figure figcaption{color:var(--base-100);text-align:center;opacity:0;visibility:hidden;background-color:#00000080;padding:5px;transition:all .3s;position:absolute;bottom:0;left:0;right:0}.work-experience .jobs article figure:hover figcaption{opacity:1;visibility:visible}.work-experience .jobs article figure:hover img{scale:1.1}.bento .bento-grid{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(5,1fr);gap:30px;height:960px;padding:30px;display:grid}@media (max-width:1024px){.bento .bento-grid{grid-template-rows:repeat(8,1fr)}}@media (max-width:768px){.bento .bento-grid{flex-direction:column;gap:30px;height:auto;display:flex}}.bento .bento-grid .bento-item{background-color:var(--base-100);border-radius:15px;padding:30px;position:relative;overflow:hidden}.bento .bento-grid .bento-item figcaption{color:var(--base-100);text-align:center;opacity:0;visibility:hidden;background-color:#00000080;padding:5px;transition:all .3s;position:absolute;bottom:0;left:0;right:0}.bento .bento-grid .bento-item img{object-fit:cover;height:100%;transition:all 1s;position:absolute;top:0;left:0}.bento .bento-grid .bento-item:hover figcaption{opacity:1;visibility:visible}.bento .bento-grid .bento-item:hover img{scale:1.1}@media (max-width:768px){.bento .bento-grid .bento-item{height:240px}}.bento .bento-grid .bento-item:first-child{grid-area:span 2/span 2}@media (max-width:1024px){.bento .bento-grid .bento-item:first-child{grid-area:span 2/span 2}}.bento .bento-grid .bento-item:nth-child(2){grid-area:span 1/span 2}@media (max-width:1024px){.bento .bento-grid .bento-item:nth-child(2){grid-area:span 2/span 3}}.bento .bento-grid .bento-item:nth-child(3){grid-area:span 1/span 1}@media (max-width:1024px){.bento .bento-grid .bento-item:nth-child(3){grid-area:span 2/span 3}}.bento .bento-grid .bento-item:nth-child(4){grid-area:span 1/span 1}@media (max-width:1024px){.bento .bento-grid .bento-item:nth-child(4){grid-area:span 4/span 2}}.bento .bento-grid .bento-item:nth-child(5){grid-area:span 1/span 2}@media (max-width:1024px){.bento .bento-grid .bento-item:nth-child(5){grid-area:span 2/span 3}}.bento .bento-grid .bento-item:nth-child(6){grid-area:span 2/span 5}@media (max-width:1024px){.bento .bento-grid .bento-item:nth-child(6){grid-area:span 2/span 5}}.viewport{background-color:var(--base-100);border-radius:30px;flex-wrap:wrap;justify-content:space-between;align-items:stretch;gap:30px;margin:60px auto;padding:60px 30px;display:flex}@media (max-width:1024px){.viewport{flex-direction:column}}.viewport .visitor{background-color:var(--yellow-100);border-radius:15px;flex:1;justify-content:center;align-items:center;max-width:30%;padding:30px;display:flex;position:relative}@media (max-width:1024px){.viewport .visitor{max-width:100%;height:auto;font-size:48px}}.viewport .visitor canvas{width:100%!important;height:auto!important}.viewport .visitor .doughnut-center{pointer-events:none;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.viewport .visitor .doughnut-center .doughnut-average{text-align:center;color:#333;font-size:1.5rem;font-weight:700;line-height:1.4}.viewport .line{background-color:var(--blue-100);border-radius:15px;flex:2;max-width:70%;padding:30px}@media (max-width:1024px){.viewport .line{max-width:100%}}
