@import"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap";*{--bg: #2c3033;--bg-dark: #13181D;--primary: #FD1C1C;--primary-dark: #EB0A0A;--secondary: #3DC5FF;--fg-font: #ffffff;--nav-height: 60px}html{scroll-behavior:smooth}body{background-color:var(--bg);color:var(--fg-font);margin:0;padding:0;font-family:Open Sans,sans-serif}a{text-decoration:none}navigation{display:grid;position:sticky;top:0;z-index:99;height:var(--nav-height);padding:0 25px;background-color:var(--bg-dark);grid-template-columns:42px 1fr;grid-template-rows:var(--nav-height);grid-gap:25px;align-items:center}navigation .logo{display:block;position:relative;width:42px;height:42px}navigation .logo span{display:block;background-color:var(--secondary);transition:background-color .4s linear;width:12px;height:12px;border-radius:6px}navigation .logo span.left{height:42px;position:absolute;left:0;top:0}navigation .logo span.bottom{width:42px;position:absolute;left:0;top:30px}navigation .logo span.circ{position:absolute;left:30px;top:0}navigation .logo:hover span,navigation .logo:focus span{background-color:var(--primary)}navigation nav{text-align:right;height:100%}navigation nav a.nav-item{color:var(--fg-font);display:inline-block;height:calc(var(--nav-height) - 2px);line-height:calc(var(--nav-height) - 2px);text-decoration:none;text-align:center;font-size:1.25rem;padding:0 15px;border-bottom:2px solid transparent}navigation nav a.nav-item.active,navigation nav a.nav-item:hover,navigation nav a.nav-item:focus{color:var(--primary);border-bottom:2px solid var(--primary)}navigation nav a.nav-item.active{font-weight:600}.upper{text-transform:uppercase}.align-left{text-align:left}.align-right{text-align:right}span.hl{color:var(--primary)}section{position:relative;height:100%;min-height:max(calc(100vh - var(--nav-height)), 699px);padding-top:var(--nav-height);padding-bottom:var(--nav-height);margin-top:calc(-1 * var(--nav-height))}section h1.heading{font-size:2rem;font-weight:400}section h1.heading span.hl{color:var(--primary);font-weight:600}section h2.heading{font-size:1.875rem;font-weight:300;opacity:.8}section h2.heading span.hl{color:var(--primary);font-weight:600}section h3.heading{font-size:1.375rem;font-weight:400}section.hero::before{content:"";display:block;position:absolute;width:100%;height:100%;z-index:-1;background:linear-gradient(to right, #00000080, #00000080, #000000f3),url(/assets/header-bg.jpg);background-size:cover;background-position:center;filter:blur(7px);transform:scale(1.03)}section.hero{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3, minmax(233px, 1fr));grid-template-areas:". profile" "headline profile" "hero-bottom hero-bottom";overflow:hidden;padding-top:0}section.hero .headline{grid-area:headline;align-self:center;display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:". wrap ."}section.hero .headline .wrap{grid-area:wrap;display:inline-block}section.hero .headline .wrap p.copy{font-size:1.375rem}section.hero .profile{grid-area:profile;align-self:end;width:50%;max-width:256px;margin:0 auto 20px auto;border-radius:50px}section.hero .hero-bottom{grid-area:hero-bottom;align-self:end;text-align:center}section.hero .hero-bottom .button{text-transform:uppercase;font-size:1.375rem;text-decoration:none;color:var(--fg-font);color:var(--primary);font-weight:600;border:2px solid var(--primary);display:inline-block;width:25%;min-width:256px;height:50px;line-height:50px;border-radius:12px;transition:background-color .2s 0s,color .2s 0s,border-radius .2s 0s}section.hero .hero-bottom .button:hover,section.hero .hero-bottom .button:focus{background:var(--primary-dark);color:var(--fg-font);border-radius:18px}section.hero .hero-bottom .social a{text-decoration:none;color:var(--fg-font);font-size:50px;margin:40px 50px 20px 50px}section.hero .hero-bottom .social a:hover,section.hero .hero-bottom .social a:focus{color:var(--secondary)}section.about::before{content:"";display:block;margin-top:calc(-1 * var(--nav-height));width:100%;height:100%;position:absolute;background-image:url(/assets/logo-bg-pattern-hl.svg);background-attachment:fixed;background-size:40%;opacity:.15;z-index:-2}section.about .container{width:calc(100% - 2 * var(--nav-height));margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:15px}section.about .container .skill-group p a img{margin:10px;padding:15px;background-color:#efefef;border-radius:20px}section.about .container .skill-group p a:hover img{transform:scale(1.05)}section.contact::before{content:"";display:block;margin-top:calc(-1 * var(--nav-height));width:100%;height:100%;position:absolute;background-image:url(/assets/logo-bg-pattern-light-hl.svg);background-attachment:fixed;background-size:40%;opacity:.1;z-index:-2}section.contact a{color:var(--secondary);text-decoration:none}section.contact a:hover,section.contact a:focus{color:var(--primary)}section.contact form.container{width:90%;max-width:650px;margin:0 auto;display:block;grid-template-columns:1fr}section.contact form.container .form-group{width:100%}section.contact form.container *{box-sizing:border-box}section.contact form.container .button{text-transform:uppercase;font-size:1.375rem;text-decoration:none;color:var(--fg-font);color:var(--primary);font-weight:600;background:transparent;outline:none;border:2px solid var(--primary);display:inline-block;width:25%;min-width:256px;height:50px;line-height:50px;border-radius:12px;transition:background-color .2s 0s,color .2s 0s,border-radius .2s 0s;margin-left:25}section.contact form.container .button:hover,section.contact form.container .button:focus{background:var(--primary-dark);color:var(--fg-font);border-radius:18px}section.imprint{margin-top:50px;height:50%;min-height:max(calc(50vh - var(--nav-height)), 355px)}section.imprint p{width:60%;max-width:600px;margin:0 auto}section.imprint a{text-decoration:none;color:var(--secondary)}section.imprint a:hover,section.imprint a:focus,section.imprint a:active{color:var(--primary)}footer{padding:50px}footer a{text-decoration:none;color:var(--secondary)}footer a:hover,footer a:focus,footer a:active{color:var(--primary)}@media(max-width: 900px){html{font-size:.875rem}}@media(max-width: 800px){section.hero{grid-template-columns:1fr auto 1fr;grid-template-rows:repeat(3, minmax(233px, 1fr));grid-template-areas:". headline ." ". profile ." ". hero-bottom ."}section.hero .hero-bottom{align-self:start}section.about .container{grid-template-columns:1fr 1fr}}@media(max-width: 600px){section.about .container{grid-template-columns:1fr}}/*# sourceMappingURL=index.min.css.map */