:root{--accent-0:#09191c;--accent-1:#102c32;--accent-2:#163740;--accent-3:#235867;--accent-4:#2f798e;--accent-5:#3a9ab6;--white:#fff}@font-face{font-family:Bebas Neue;src:local("Bebas Neue"),url(/fonts/BebasNeue-Regular.ttf) format("truetype");font-style:normal;font-weight:400;font-display:swap}html{overflow-x:hidden}body,html{padding:0;margin:0}body{position:relative;font-family:Bebas Neue,sans-serif;overflow:hidden}main{background-color:rgba(35,88,103,.5);display:flex;justify-content:center;align-items:center;flex-direction:column}.headline-1,h1{font-size:7rem;font-weight:700;line-height:7rem;margin:0;text-align:center}@media only screen and (min-width:800px){.headline-1,h1{font-size:11rem;line-height:10rem}}.headline-2,h2{font-size:4.5rem;font-weight:700;line-height:3.8rem;margin:0;text-align:center}@media only screen and (min-width:800px){.headline-2,h2{font-size:6rem;line-height:6rem}}.headline-3,h3{font-size:2rem;font-weight:700;line-height:2rem;margin:0;text-align:center}*{box-sizing:border-box}main{position:relative}.container{width:85%;min-height:110vh;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#fff;text-transform:uppercase}#self-portrait{position:fixed;inset:0;z-index:5;opacity:0;-o-object-fit:cover;object-fit:cover;width:100%;height:100vh}.code-box{display:flex;align-items:center;min-height:66px;height:100px;margin:20px 0;padding:10px;font-family:Courier;color:var(--accent-5);background-color:var(--accent-1);border-radius:5px;box-sizing:border-box;word-break:break-word;text-transform:none;min-width:100%;font-size:40px}@media only screen and (min-width:800px){.code-box{min-width:40%;font-size:70px}}.code-box__caret{display:inline-block;height:80%;width:5px;background-color:var(--white);margin-left:8px;-webkit-animation:blink .5s 0s infinite alternate;animation:blink .5s 0s infinite alternate}.skills{width:100%;margin-top:10vh}@media only screen and (min-width:800px){.skills{width:70%}}.skills__legend{display:flex;justify-content:space-between;width:100%}.skills__legend-step{margin-bottom:30px;position:relative;white-space:nowrap}.skills__legend-step-marker{position:absolute;content:"";display:block;width:2px;background:linear-gradient(180deg,#fff,#fff 76%,hsla(0,0%,100%,0))}.skills__legend-step:first-child .skills__legendStepMarker{transform:translateX(-2px)}.skills__legend-step>span{font-size:1rem;position:absolute;bottom:0;transform:translateX(-50%)}@media only screen and (min-width:800px){.skills__legend-step>span{font-size:1.5rem}}.skills__bar{position:relative;display:flex;justify-content:center;align-items:center;grid-gap:10px;gap:10px;padding:10px;margin-bottom:15px;background-color:var(--accent-2);transition:transform .2s ease-in-out}.skills__bar-percentage{position:absolute;top:0;left:0;height:100%;width:0;background-color:var(--accent-5)}.skills__bar>span{font-size:35px;height:40px;z-index:50;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.project-link{display:block;margin:20px 0;text-decoration:underline;color:#fff}#contact-links-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-top:40px}#contact-links-container>*{min-width:50px;max-width:200px}#contact-links-container>:not(:last-child){margin-right:50px}#contact-links-container #github{width:100%;height:100%}#contact-links-container #github path{transition:fill .1s}#contact-links-container #github:hover path{fill:#6e5494}#contact-links-container #xing{width:100%;height:100%}#contact-links-container #xing path{transition:fill .1s}#contact-links-container #xing:hover path{fill:#cfdc00}#contact-links-container #linkedin{width:100%;height:100%}#contact-links-container #linkedin path{transition:fill .1s}#contact-links-container #linkedin:hover path{fill:#0077b7}.contact-link{width:20%}#touch-container{display:flex}#touch-container #touch-l{transform:translateX(12px)}#touch-container #touch-r{transform:translateX(100vw)}.hidden-icon{position:absolute;bottom:-30px;left:10%}.hidden-icon>a{display:block;transition:transform .2s}.hidden-icon>a:hover{transform:translateY(-40px)}.hidden-icon>a:hover #spotify{-webkit-animation:none;animation:none}.hidden-icon>a:hover #spotify path{fill:#1ed760}.hidden-icon #spotify{width:3rem;height:3rem;-webkit-animation:wiggle 2s ease-in-out 0s infinite;animation:wiggle 2s ease-in-out 0s infinite}.hidden-icon #spotify path{transition:fill .1s}.hidden-icon #spotify-hover{position:absolute;bottom:0;width:100px;height:100px}.hidden-icon #spotify-hover:hover+a{transform:translateY(-40px)}.hidden-icon #spotify-hover:hover+a #spotify{-webkit-animation:none;animation:none}.arrow.down{opacity:0;display:inline-block;margin-top:55px;transform:rotate(45deg);-webkit-transform:rotate(45deg);border:solid #fff;border-width:0 8px 8px 0;padding:10px;-webkit-animation:blink 1s ease 0s infinite alternate;animation:blink 1s ease 0s infinite alternate;-webkit-animation-delay:.2s;animation-delay:.2s}#imprint-container{display:flex;flex-direction:column;justify-content:center}#imprint-container.visible{height:100vh}#imprint-container.visible #imprint-trigger{position:relative}#imprint-trigger{position:absolute;left:50%;transform:translateX(-50%);bottom:0;padding:10px 10px 0;cursor:pointer;transition:font-size .2s}.imprint{display:none}.imprint.visible{display:block}@-webkit-keyframes blink{0%{opacity:0}to{opacity:1}}@keyframes blink{0%{opacity:0}to{opacity:1}}@-webkit-keyframes upAndDown{0%{transform:translateY(0)}30%{transform:translateY(-40px)}60%{transform:translateY(0)}}@keyframes upAndDown{0%{transform:translateY(0)}30%{transform:translateY(-40px)}60%{transform:translateY(0)}}@-webkit-keyframes wiggle{0%{transform:rotate(0deg)}3%{transform:rotate(-15deg)}9%{transform:rotate(15deg)}15%{transform:rotate(-15deg)}21%{transform:rotate(15deg)}24%{transform:rotate(0deg)}}@keyframes wiggle{0%{transform:rotate(0deg)}3%{transform:rotate(-15deg)}9%{transform:rotate(15deg)}15%{transform:rotate(-15deg)}21%{transform:rotate(15deg)}24%{transform:rotate(0deg)}}