:root{--primary-color:rgb(0, 255, 140);--secondary-color:rgb(0, 136, 121);--background-color:rgb(32, 36, 45);--shadow-color:rgba(0, 0, 0, 0.5);--text-color:white;--text-shadow-color:rgba(255, 255, 255, 0.1)}*{box-sizing:border-box;padding:0;margin:0;color:#fff}strong{color:var(--primary-color)}h1{font-size:clamp(2.25rem, 5vw, 3.2rem);font-weight:700}h2{font-size:clamp(1.5rem, 4.5vw, 3.9rem);font-weight:700}h3{font-size:clamp(1.2rem, 4vw, 2.5rem);font-weight:700}h4{font-size:clamp(0.875rem, 3.5vw, 2.25rem);font-weight:700}h5{font-size:clamp(0.75rem, 3vw, 2rem);font-weight:700}h6{font-size:clamp(0.625rem, 2.5vw, 1.75rem);font-weight:700}p{font-size:clamp(0.9rem, 1.9vw, 2rem);line-height:1.7;letter-spacing:1.25px;font-weight:400}a{text-decoration:none}a.active{color:var(--primary-color);text-decoration:none}a:hover{color:var(--primary-color)}body{background:var(--background-color);background:linear-gradient(180deg,var(--background-color) 30%,rgb(13 153 92 / .1) 100%),radial-gradient(circle,rgb(0 255 140) 0%,rgb(0 136 121) 48%,rgb(24 30 54) 87%),radial-gradient(circle,rgb(0 255 140) 0%,rgb(0 136 121) 48%,rgb(24 30 54) 87%),radial-gradient(circle,rgb(0 255 140) 0%,rgb(0 136 121) 48%,rgb(24 30 54) 87%);background-repeat:no-repeat;background-position:center center,bottom -30vh right -30vw,bottom -30vh left -30vw,bottom -30vh center;backdrop-filter:blur(110px);height:100%;min-height:100dvh;backdrop-filter:blur(110px);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;min-width:360px}body:not(:has(#homeR:checked)) section[data-page="home"]:not(:has(:focus-within)),body:has(#homeR:checked) main:has(section:not([data-page="home"]):focus-within) section[data-page="home"]{opacity:0;transform:translate(-300%,0) skewY(30deg);transition:all 0.63s ease}body:not(:has(#aboutR:checked)) section[data-page="about"]:not(:has(:focus-within)),body:has(#aboutR:checked) main:has(section:not([data-page="about"]):focus-within) section[data-page="about"]{opacity:0;transform:translate(300%,0) skewY(30deg);transition:all 0.63s ease}body:not(:has(#serviceR:checked)) section[data-page="service"]:not(:has(:focus-within)),body:has(#serviceR:checked) main:has(section:not([data-page="service"]):focus-within) section[data-page="service"]{opacity:0;transform:translate(0,300%) skewY(30deg);transition:all 0.63s ease}body:not(:has(#contactR:checked)) section[data-page="contact"]:not(:has(:focus-within)),body:has(#contactR:checked) main:has(section:not([data-page="contact"]):focus-within) section[data-page="contact"]{opacity:0;transform:translate(0,calc(-300% - 6rem)) skewY(30deg);transition:all 0.63s ease}body:has(.radioNav input:focus-visible) main nav{outline:solid 2px var(--primary-color);outline-offset:.72rem}.radioNav{position:absolute;opacity:0;top:-100%;left:-100%}main{display:grid;grid-template-rows:6rem 1fr;grid-template-columns:1fr;row-gap:2rem;justify-content:center;padding:1rem;align-items:center;max-height:94dvh;min-height:85vh;max-width:min(90svw, 1800px);min-width:360px;width:100%;margin-top:1rem;border-radius:40px;background-color:var(--background-color);box-shadow:0 -30px 110px 23px var(--shadow-color),inset 0 0 7px 0 var(--text-shadow-color);overflow:clip;position:relative}main nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;width:100%;max-width:80%;margin:auto}main nav label{width:2.5rem;max-height:100%;cursor:pointer}main nav label svg{width:fit-content;max-height:min(90%, 5rem);cursor:pointer}main nav svg path{fill:var(--primary-color)}body:not(:has(#homeR:checked)) main nav label[for="homeR"] svg path{fill:#fff}body:has(#aboutR:checked) main nav ul li label[for="aboutR"]{color:var(--primary-color)}body:has(#serviceR:checked) main nav ul li label[for="serviceR"]{color:var(--primary-color)}body:has(#contactR:checked) main nav ul li label[for="contactR"]{color:var(--primary-color)}main nav ul{display:flex;flex-wrap:nowrap;width:fit-content;justify-content:right;gap:1rem;align-items:center;list-style:none}main nav ul li label:hover,main nav ul li label:focus-visible{text-decoration:underline;text-decoration-color:var(--primary-color);text-underline-offset:.3rem}main section{display:grid;margin:auto;position:absolute;top:6rem;left:0;right:0;bottom:0;width:100%;height:calc(100% - 6rem);overflow-x:hidden;overflow-y:auto}main section[data-page="home"]:focus-within,main:has(:not(section:not([data-page]):focus-within)) section[data-page="home"],main section[data-page="about"]:focus-within,main:has(:not(section:not([data-page]):focus-within)) section[data-page="about"],main section[data-page="service"]:focus-within,main:has(:not(section:not([data-page]):focus-within)) section[data-page="service"],main section[data-page="contact"]:focus-within,main:has(:not(section:not([data-page]):focus-within)) section[data-page="contact"]{opacity:1;transform:translate(0,0) skewY(0deg);transition:all 0.63s ease}main section article{padding-bottom:3rem}main section[data-page="home"]{display:grid;width:100%;max-width:90%;grid-template-columns:1fr 1fr;grid-template-rows:1fr;justify-content:center;align-items:center;gap:2.2rem;margin-block:0}main section[data-page="home"] article{display:flex;flex-direction:column;justify-content:center;align-items:start;max-width:min(100%,500px);margin:auto}main section[data-page="home"] article span{font-size:clamp(0.9rem, 1.9vw, 2.25rem);font-weight:700;line-height:1.7;letter-spacing:1.35px}main section[data-page="home"] article p{max-width:70ch;margin-top:3vw}main section[data-page="home"] img{border-radius:50%;aspect-ratio:1/1;width:min(85%, 500px);object-fit:cover;object-position:46% 50%;margin:auto;background-color:var(--primary-color);box-shadow:0 10px 33px -10px var(--primary-color)}main section[data-page="home"] button{display:flex;justify-content:center;align-items:center;margin-top:2.7rem;border:none;border-radius:10px;width:100%;max-width:min(100%, 380px);justify-self:start;background-color:var(--primary-color);color:var(--background-color);font-size:clamp(0.75rem, 2vw, 1.5rem);font-weight:700;transition:all 0.3s ease;color:var(--background-color);transition:all 0.3s ease}main section[data-page="home"] button label{color:var(--background-color);width:100%;padding:.5rem 1rem;cursor:pointer}main section[data-page="home"] button label:hover{color:#fff}main section[data-page="home"] button:hover,main section[data-page="home"] button:focus-visible{background-color:var(--secondary-color);color:#fff;cursor:pointer;box-shadow:inset 0 0 7px 0 white,0 0 7px 0 var(--shadow-color);transform:translate(1px,-2px);transition:all 0.3s ease}main section[data-page="about"]{display:grid;width:100%;max-width:90%;grid-template-columns:1fr;grid-template-rows:1fr;justify-content:center;align-items:center;gap:2.2rem}main section[data-page="about"] article{display:grid;height:100%;max-height:100%;grid-template-columns:1fr;grid-template-rows:50% auto;justify-content:center;align-items:center}main section[data-page="about"] article h2 span{color:var(--primary-color);cursor:pointer}main section[data-page="about"] article p img{aspect-ratio:1/1;height:12rem;max-height:100%;object-fit:cover}main section[data-page="about"] article p:first-of-type{height:100%;opacity:1;transition:all 0.3s ease;grid-row:2/3;grid-column:1/2;overflow:hidden;display:flex;justify-content:center}main section[data-page="about"] article p,main section[data-page="about"] article:has(h2 span:hover) p:first-of-type,main section[data-page="about"] article:has(h2 span:focus-visible) p:first-of-type{height:0;opacity:0;transition:all 0.3s ease;grid-row:2/3;grid-column:1/2}main section[data-page="about"] article p:first-of-type{height:100%;opacity:1;transition:all 0.3s ease}main section[data-page="about"] article:has(h2 span.passionate_span:hover) .about__passionate,main section[data-page="about"] article:has(h2 span.passionate_span:focus-visible) .about__passionate{height:100%;opacity:1;transition:all 0.3s ease}main section[data-page="about"] article:has(h2 span.engineer_span:hover) .about__engineer,main section[data-page="about"] article:has(h2 span.engineer_span:focus-visible) .about__engineer{height:100%;opacity:1;transition:all 0.3s ease}main section[data-page="about"] article:has(h2 span.love_span:hover) .about__love,main section[data-page="about"] article:has(h2 span.love_span:focus-visible) .about__love{height:100%;opacity:1;transition:all 0.3s ease}main section[data-page="about"] article:has(h2 span.tech_span:hover) .about__tech,main section[data-page="about"] article:has(h2 span.tech_span:focus-visible) .about__tech{height:100%;opacity:1;transition:all 0.3s ease}main section[data-page="service"]{display:grid;width:100%;max-width:90%;grid-template-columns:1fr;grid-template-rows:1fr;justify-content:center;align-items:center;gap:2.2rem}main section[data-page="service"] article{display:flex;flex-direction:column;justify-content:center;align-items:start;margin:auto;row-gap:2.2rem;width:100%;overflow-x:hidden}main section[data-page="service"] article ul{list-style:none;display:grid;width:100%}main section[data-page="service"] article>ul{column-gap:3.4rem;row-gap:3.7rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}main section[data-page="service"] article ul li{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}main section[data-page="service"] article ul li img{max-width:4rem;aspect-ratio:1/1;object-fit:contain}main section[data-page="service"] article hr{width:100%;border-bottom:1px solid var(--primary-color)}main section[data-page="service"] article h3{width:100%;justify-self:center;text-align:center}@keyframes infiniteLoop{100%{transform:translateX(calc(-180px * 28))}}main section[data-page="service"] article .slider{position:relative;max-width:100%;grid-auto-flow:column}main section[data-page="service"] article .slider::before,main section[data-page="service"] article .slider::after{content:" ";position:absolute;z-index:9;width:180px;height:100%}main section[data-page="service"] article .slider::before{top:0;left:0;background:linear-gradient(to right,rgb(32 36 45) 0%,#fff0 100%)}main section[data-page="service"] article .slider::after{top:0;right:0;background:linear-gradient(to left,rgb(32 36 45) 0%,#fff0 100%)}main section[data-page="service"] article .slider ul{grid-auto-flow:column}main section[data-page="service"] article .slider ul li{width:180px;animation:infiniteLoop 120s linear infinite}main section[data-page="contact"]{display:grid;width:100%;max-width:90%;grid-template-columns:1fr 1fr;grid-template-rows:1fr;justify-content:center;align-items:center;gap:2.2rem}main section[data-page="contact"] article{display:flex;flex-direction:column;justify-content:center;align-items:start;max-width:min(100%,500px);margin:auto}main section[data-page="contact"] article span:first-of-type{max-width:70ch;margin-top:3vw;font-size:clamp(0.75rem, 1.5vw, 1.9rem);line-height:1.25;letter-spacing:1.5px}main section[data-page="contact"] article span:not(:first-of-type){font-size:clamp(0.9rem, 1.9vw, 2.25rem);font-weight:700;line-height:1.7;letter-spacing:1.35px}main section[data-page="contact"] article span strong{color:var(--primary-color)}main section[data-page="contact"] article h2{font-size:clamp(1.5rem, 4.5vw, 3.9rem);font-weight:700;margin-top:3vw;color:var(--primary-color);display:grid;column-gap:1rem;grid-template-columns:auto 1fr;align-items:center}main section[data-page="contact"] article h2 img{height:100%;max-height:5rem;aspect-ratio:1/1;object-fit:contain;transform:rotateZ(90deg)}main section[data-page="contact"] nav{display:flex;justify-content:center;align-items:center;width:100%;height:100%}main section[data-page="contact"] nav ul{display:flex;flex-wrap:wrap;column-gap:3.4rem;row-gap:3.7rem;list-style:none}main section[data-page="contact"] nav ul li:nth-of-type(1){grid-column:1/3;grid-row:1/2}main section[data-page="contact"] nav ul li:nth-of-type(2){grid-column:1/5;grid-row:2/3;justify-self:center}main section[data-page="contact"] nav ul li:nth-of-type(3){grid-column:3/5;grid-row:3/4}main section[data-page="contact"] nav ul li a{display:flex;align-items:center;gap:1rem;white-space:nowrap;word-break:break-word}main section[data-page="contact"] nav ul li a span{margin:0}main section[data-page="contact"] nav ul li img{max-width:clamp(2rem, 4vw, 5rem);aspect-ratio:1/1;object-fit:contain}footer{display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;gap:1rem;padding-block:1rem;;width:100%}footer p{display:flex;align-items:center;gap:.5rem;font-size:clamp(0.55rem, 1.4vw, 0.95rem)}footer ul{display:flex;gap:1rem;list-style:none}footer ul li a{color:var(--background-color)}footer ul li a:hover{color:#fff}footer img{max-height:2rem;aspect-ratio:1}@media (max-width:720px){main section[data-page]{}main section[data-page="home"]{grid-template-columns:1fr;gap:1rem}main section[data-page="home"] img{grid-row:1/2;max-width:12rem}main section[data-page="home"] article button{align-self:center}main section[data-page]{overflow-y:auto}main section[data-page="service"] article ul{row-gap:1.7rem}main section[data-page="service"] article ul li{flex-direction:row}main section[data-page="contact"]{grid-template-columns:1fr;grid-template-rows:auto auto}main section[data-page="contact"] nav ul{display:flex;flex-wrap:wrap;display:flex;row-gap:1rem}}main section[data-page="impressum"],main section[data-page="datenschutz"]{display:grid;width:100%;max-width:90%;grid-template-columns:1fr;grid-template-rows:1fr;justify-content:center;align-items:center;gap:2.2rem;padding-block:3rem;overflow-y:auto;top:0;height:100%}main section[data-page="impressum"] article,main section[data-page="datenschutz"] article{display:flex;flex-direction:column;justify-content:center;align-items:start;margin:auto}main section[data-page="impressum"] article h1,main section[data-page="datenschutz"] article h1{color:var(--primary-color);font-size:clamp(2.25rem, 5vw, 3.2rem);font-weight:700}main section[data-page="impressum"] article h2,main section[data-page="datenschutz"] article h2{font-size:clamp(1.5rem, 4.5vw, 2.4rem);font-weight:700;padding-block:2.1rem;color:var(--primary-color)}main section[data-page="datenschutz"] article h3{font-size:clamp(1rem, 4vw, 1.5rem);font-weight:700;padding-block:1.7rem;color:var(--primary-color)}main section[data-page="impressum"] article ul,main section[data-page="datenschutz"] article ul{padding-left:3rem}main section[data-page="impressum"] article ul li,main section[data-page="datenschutz"] article ul li{font-size:clamp(0.75rem, 2vw, 1.5rem);font-weight:400}