﻿@keyframes polygon{0%{transform:perspective(800px) rotateY(0deg)}30%{transform:perspective(800px) rotateY(360deg)}100%{transform:perspective(800px) rotateY(360deg)}}@keyframes polygon-morph{0%{transform:perspective(800px) rotateY(0deg) scale(1)}30%{transform:perspective(1000px) rotateY(20deg) scale(0.8)}100%{transform:perspective(800px) rotateY(0deg) scale(1)}}@keyframes fade-left{0%{transform:translateX(-100px);opacity:0}10%{transform:translateX(0px);opacity:.5}90%{transform:translateX(0px);opacity:.5}100%{transform:translateX(100px);opacity:0}}@keyframes scroll{0%{transform:translateY(0px)}10%{transform:translateY(-20px)}30%{transform:translateY(0px)}100%{transform:translateY(0px)}}@keyframes float{0%{transform:translateY(0px)}50%{transform:translateY(10px)}100%{transform:translateY(0px)}}@keyframes fade-from-left{0%{transform:translateX(-100px);opacity:0}100%{transform:translateX(0px);opacity:1}}@keyframes fade-from-bottom{0%{transform:translateY(100px);opacity:0}100%{transform:translateY(0px);opacity:1}}@keyframes fade{0%{opacity:0}100%{opacity:1}}@keyframes scaleup{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes fade-from-right{0%{transform:translateX(100px);opacity:0}100%{transform:translateX(0px);opacity:1}}.fade-left{animation:fade-left 3s ease-in-out}*{box-sizing:border-box;margin:0;padding:0}body{font-family:"Josefin Sans",sans-serif;background-color:#eee;scroll-behavior:smooth}.btn{padding:10px 10px;background-color:#00adb5;color:#fff;width:fit-content;cursor:pointer}.btn a{text-decoration:none;color:inherit}.btn:hover{background-color:#00c5cf}.btn-secondary{background-color:#393e46}.btn-secondary:hover{background-color:#444a54}.navbar{overflow:hidden;width:100%;position:fixed;z-index:100;height:80px;display:flex;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);justify-content:space-between;box-shadow:0px 0px 10px rgba(0,0,0,.215)}.navbar .name{padding:5px 20px;display:flex;justify-self:center;align-self:center;gap:10px}.navbar .name .firstname{color:#00adb5}.navbar ul{text-decoration:none;display:flex;padding-right:100px;margin:0;align-items:center}.navbar ul .active{background-position:0px 80px;color:#fff}.navbar ul li{background-image:linear-gradient(0deg, #00ADB5 50%, transparent 50%);background-size:100% 300%;transition:all .5s ease-in-out;background-position:0px 0px;height:100%;width:100%;padding:0 40px;display:flex;align-items:center;justify-content:center;white-space:nowrap;list-style:none;font-weight:600;cursor:pointer}.navbar ul li:hover{background-position:0px 80px;color:#fff}.hero{display:flex;width:100%;justify-content:space-between;height:100vh}.hero .image-self{height:500px;width:500px;box-shadow:inset 0px 0px 10px rgba(0,0,0,.692);border-radius:50%;overflow:hidden;position:relative}.hero .image-self img{height:100%;position:absolute;object-fit:cover}.hero .headline{position:relative;flex:1;display:flex;justify-content:center;align-items:center;overflow-x:hidden}.hero .headline .headline-text{z-index:1;text-align:center;font-size:1.7rem;position:relative}.hero .headline .headline-text .headline1{position:absolute;width:400px;left:-150%;opacity:0}.hero .headline .triangle{display:flex;justify-content:center;width:100%;overflow:hidden;position:absolute;top:30%}.hero .headline .triangle svg{filter:drop-shadow(10px 50px 10px rgba(0, 0, 0, 0.2))}.text-primary{color:#00adb5}.profile{flex:1;display:flex;justify-content:center;align-items:center}.circle{position:relative;width:500px;height:500px;border-radius:50%;background-image:linear-gradient(0deg, rgba(57, 62, 70, 0.6039215686) 0%, #00adb5 20%, transparent 50%),linear-gradient(45deg, #393e46 10%, #00adb5 20%, transparent 50%)}.circle-sm{position:relative;width:100px;position:absolute;bottom:80px;height:100px;border-radius:50%;background-image:linear-gradient(17deg, #00adb5 8.02%, #4ff7ff 91.69%)}.circle-sm i{position:absolute;top:50%;left:25%;font-size:2.5rem}.circle-sm::before{content:"";position:absolute;width:100%;height:100%;border-radius:50%;background-image:linear-gradient(17deg, #00adb5 8.02%, #4ff7ff 91.69%);filter:blur(10px);opacity:.5}.circle-sm::after{content:"";position:absolute;bottom:-20px;width:100%;height:10%;border-radius:50%;background-color:#2bd5ff;filter:blur(10px);opacity:.5}.circle-2{right:0px;animation:float 3s ease-in-out infinite}.circle-2 i{left:36%}.circle-1{animation:float 5s ease-in-out infinite}.circle-3{right:210px;bottom:-30px;animation:float 4s ease-in-out infinite}.circle-3 i{left:33%}.scroll{display:flex;justify-content:center;position:absolute;bottom:30px;left:calc(50% - 25px)}.scroll img{width:50px;height:50px;animation:scroll 3s ease-out infinite}.about{position:relative;overflow:hidden}.about .header-text{text-align:center;padding-top:100px;font-size:4rem;word-spacing:20px;letter-spacing:20px;padding-left:20px;padding-right:20px}.about .curve-divider{width:100%}.about svg{top:0;z-index:-1;position:absolute}.about .img-container-about{top:50px;position:absolute;width:100%;display:flex;justify-content:center}.about .img-container-about img{width:400px;object-fit:contain}.about .about-text{color:#fff;font-size:1.5rem;font-weight:200;margin-top:180px;padding:30px 50px;background-color:#00adb5}.about .about-text ul{margin-top:40px;display:flex;justify-content:space-evenly;gap:20px}.skills{padding:20px 200px}.skills .header-text{text-align:center;font-size:2rem;margin-bottom:20px}.skills .stacks{display:grid;grid-template-columns:repeat(auto-fit, minmax(1fr, 500px));gap:50px}.skills .skill{display:flex;gap:50px}.skills .stack-container{display:grid;width:100%;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));place-items:center;gap:50px}.skills .stack-container img{height:100px;object-fit:contain;filter:grayscale(100%);transition:all .2s ease-in-out}.skills .stack-container img:hover{filter:grayscale(0%);transform:scale(110%)}.project-showcase{padding:40px 100px;display:flex;flex-direction:column;gap:70px}.project-showcase .details ul{line-height:20px;list-style:none}.project-showcase .details ul li::before{content:"•";color:#00adb5;font-weight:bold;display:inline-block;width:1em}.project-showcase .description p{margin-bottom:20px}.project-showcase .right{flex-direction:row-reverse;text-align:right}.project-showcase .right .details ul{text-align:left}.project-showcase .right .subtitle{left:unset;right:-20px}.project-showcase .subtitle{opacity:6%;width:400px;white-space:nowrap;overflow:hidden;top:-30px;left:-20px;font-size:4rem;position:absolute}.project-showcase .title{font-size:2.5rem}.project-showcase .header-text{text-align:center;font-size:2rem;font-weight:600;padding:20px 0}.project-showcase .project{display:flex;gap:50px}.project-showcase .project .details{display:flex;flex-direction:column;gap:20px;position:relative;flex:1}.project-showcase .project .image-container{flex:1}.project-showcase .project .technologies{line-height:30px}.project-showcase .project .technologies h4{padding-left:30px;line-height:30px}.project-showcase .project .link{width:100%;display:flex}.right .link{justify-content:end}.footer{width:100%;display:flex;justify-content:space-evenly;align-items:center;background-color:#222831;color:#fff;height:150px;padding:20px 0}.footer .name{padding-left:20px;text-align:center;line-height:30px}.footer .name h2{font-weight:200}.footer .contact-links{text-align:center;line-height:5px}.footer .contact-links h2{margin-bottom:20px}.footer .contact-links .links{display:flex;gap:10px}.footer .contact-links a{text-decoration:none;color:#fff}.footer .contact-links a:hover{color:#00adb5}.splide__slide img{width:100%;height:auto}@media(max-width: 1300px){.hide-sm-1{display:none !important}body{font-size:1rem}.hero{flex-direction:column;padding-top:80px;padding-bottom:80px;height:auto;gap:150px}.hero .headline{min-height:300px;overflow:hidden}.hero .headline .triangle{top:-20%;left:10%;transform:scale(0.8)}.skills{padding:20px}.project-showcase{text-align:center}.project-showcase .project{flex-direction:column}.project-showcase .project ul{text-align:start}.project-showcase .right{text-align:center;flex-direction:column}.project-showcase .right ul{text-align:start;direction:ltr}}@media(max-width: 910px){.navbar{height:60px}.navbar ul{padding-right:20px}.navbar ul li{padding:0px 10px}.skills .skill{flex-direction:column;align-items:center}}@media(max-width: 596px){.navbar{height:90px}.navbar ul{padding:0}.navbar ul li{padding:0px 5px}#headline{padding:0px 10px}.hide-sm{display:none !important}.navbar{justify-content:center}.circle{width:300px;height:300px}.circle .image-self{width:300px;height:300px}.circle .circle-sm{width:50px;height:50px}.circle .circle-sm i{font-size:1.5rem;left:20%}.circle .circle-2 i,.circle .circle-3 i{left:30%}.circle .circle-2{right:-15px}.circle .circle-3{right:120px;bottom:-30px}.circle .circle-1{left:-15px}.hero{padding-top:120px}.hero .headline svg{top:-70%;left:20%;transform:scale(10%)}.about .header-text{word-spacing:normal}.about .img-container-about{top:60px}.about .about-text{margin-top:100px}.about .img-container-about{top:150px}.about .img-container-about img{width:300px}.project-showcase{padding:40px}.skills .stack-container{grid-template-columns:repeat(auto-fit, minmax(50px, 1fr))}.skills .stack-container img{height:50px}.footer .name{padding:0;line-height:20px}.footer .name h1{font-size:.95rem}.footer .name h2{font-size:.8rem}.footer .contact-links h2{font-size:.8rem}.footer .links i{font-size:.9rem}}