:root {
	--Colors-Brand-1: rgb(0, 51, 102);
	--Colors-Brand-2: rgb(0, 33, 71);
	--Colors-Brand-3: rgb(192, 192, 192);
	--Colors-Brand-4: rgb(211, 211, 211);

	--FontFamily-1: "Zalando Sans SemiExpanded", sans-serif;

	
	--Focus-Outline: 3px solid color-mix(in srgb, var(--Colors-Brand-1) 50%, transparent 50%);
	
	--Transition: all 0.3s, outline 0s;
	
	--Header-MaxWidth: auto;

	--Content-MaxWidth: 848px;
	--Content-PaddingBlock: 96px;
	--Content-PaddingInline: 24px;

	--Footer-MaxWidth: 1200px;
}


* {
	box-sizing:                    border-box;
}

body {
	display:                       flex;
	flex-direction:                column;
	font-family:                   var(--FontFamily-1);
	/* font-family:                   'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
	margin:                        0;
	min-height:                    100vh;
	padding:                       0;
	width:                         100%;
}

a {
	color:                         #000;
	display:                       inline-block;
	text-decoration:               none;
	transition:                    var(--Transition);
}

a:focus {
	/* outline:                       3px solid color-mix(in srgb, var(--Colors-Brand-1)); */
}

ul {
	display:                       flex;
	gap:                           6px;
	list-style-type:               none;
	margin:                        0;
	padding:                       0;
}


/* Form */
form {
	align-items:                   flex-start;
	display:                       flex;
	flex-direction:                column;
	gap:                           12px;
	max-width:                     500px;
}

.FormHeader {
	margin-bottom:                 48px;
}

.FormHeader h2 {
	font-size:                     20px;
	font-weight:                   600;
	line-height:                   1;
	margin:                        0 0 6px;
}

.FormHeader p {
	color:                         #000;
	font-size:                     16px;
	font-weight:                   500;
	margin:                        0;
	opacity:                       0.9;
}

form label {
	display:                       flex;
	flex-direction:                column;
	gap:                           6px;
	width:                         100%;
}

form label:not(:first-child) {
	margin-top:                    12px;
}

form label span {
	display:                       block;
	font-size:                     16px;
	font-weight:                   600;
	line-height:                   1;
}

form :is(input, textarea) {
	background-color:              rgba(0, 0, 0, 0.025);
	border:                        1px solid rgba(0, 0, 0, 0.05);
	border-radius:                 5px;
	color:                         rgba(0, 0, 0, 0.8);
	font-size:                     16px;
	padding:                       8px 10px;
	transition:                    var(--Transition);
	width:                         100%;
}

form :is(input, textarea):hover {
	background-color:              rgba(0, 0, 0, 0.035);
}

form :is(input, textarea):focus {
	outline:                       var(--Focus-Outline);
}

form hr {
	border:                        none;
	background-color:              #DDD;
	height:                        1px;
	margin:                        48px 0 12px;
	width:                         100%;
}


/* Button */
.Button {
	--BackgroundColor: #FFF;
	--BorderColor: #EEE;
	--Color: #000;
	--Hover-BackgroundColor: #EEE;
	--Hover-BorderColor: #EEE;
	--Hover-Color: var(--Color);
	
	background-color:              var(--BackgroundColor);
	color:                         var(--Color);
	cursor:                        pointer;
	border:                        1px solid var(--BorderColor);
	border-radius:                 10px;
	font-family:                   inherit;
	font-weight:                   500;
	font-size:                     16px;
	padding:                       8px 12px;
	transition:                    var(--Transition);
}

.Button:hover {
	background-color:              var(--Hover-BackgroundColor);
	border-color:                  var(--Hover-BorderColor);
	color:                         var(--Hover-Color);
}

.Button:focus {
	outline:                       var(--Focus-Outline);
}

.Button.Primary {
	--BackgroundColor: var(--Colors-Brand-1);
	--BorderColor: var(--Colors-Brand-2);
	--Color: #FFF;
	--Hover-BackgroundColor: var(--Colors-Brand-2);
	--Hover-BorderColor: var(--Colors-Brand-2);
}

.Button.Transparent {
	--BackgroundColor: transparent;
	--BorderColor: transparent;
	--Color: #000;
	--Hover-BackgroundColor: transparent;
	--Hover-BorderColor: #EEE;
}

.Button.Dark {
	--BackgroundColor: #000;
	--BorderColor: #000;
	--Color: #FFF;
	--Hover-BackgroundColor: #FFF;
	--Hover-BorderColor: #FFF;
	--Hover-Color: #000;
}


/* Header */
header {
	--Header-FontSize: 18px;
	--Header-Height: 100px;

	backdrop-filter:               blur(10px);
	/* box-shadow:                    0 0 10px rgba(0, 0, 0, 0.25); */
	height:                        var(--Header-Height);
	left:                          0;
	position:                      fixed;
	top:                           0;
	width:                         100%;
	z-index:                       10;
}

.LightMode header {
	background-color:              rgba(255, 255, 255, 0.2);
	border-bottom:                 1px solid rgba(255, 255, 255, 0.2);
}

header a:focus {
	outline:                       var(--Focus-Outline);
}

.HeaderInner {
	align-items:                   center;
	display:                       flex;
	flex-direction:                row;
	height:                        100%;
	justify-content:               space-between;
	margin:                        0 auto;
	max-width:                     var(--Header-MaxWidth);
	padding:                       12px 48px;
	width:                         100%;
}

.HeaderNavCentered :is(.HeaderLogo, .HeaderRight) {
	flex:                          0 1 250px;
}

.HeaderLogo {
	border-radius:                 5px;
	height:                        100%;
}

.HeaderLogo img {
	height:                        100%;
	object-fit:                    contain;
	width:                         100%;
}

header nav ul {
	flex-direction:                row;
	gap:                           12px;
}

header nav a {
	border-radius:                 10px;
	font-size:                     var(--Header-FontSize);
	font-weight:                   600;
	padding:                       8px 12px;
}

header nav a:hover {
	/* background-color:              #EEE; */
	text-decoration:               underline;
}

/* Header Floating */
header.Floating {
	--Header-FontSize: 14px;
	--Header-Height: 60px;
	
	background-color:              rgba(255, 255, 255, 0.6);
	border-radius:                 20px;
	box-shadow:                    2px 8px 10px rgba(0, 0, 0, 0.2);
	top:                           24px;
	width:                         auto;
	left:                          50%;
	transform:                     translateX(-50%);
}

header.Floating .HeaderInner {
	gap:                           48px;
}


/* Main Content */
main {
	display:                       flex;
	flex-direction:                column;
	flex-grow:                     1;
}

.MainInner {
	flex-grow:                     1;
	height:                        100%;
	/* margin:                        0 auto; */
	/* max-width:                     var(--Content-MaxWidth); */
	/* padding:                       var(--Content-PaddingBlock) var(--Content-PaddingInline); */
	width:                         100%;
}


/* Footer */
footer {
	background:                    #000;
	color:                         #FFF;
	display:                       flex;
	flex-direction:                column;
	gap:                           12px;
}

footer a:focus {
	outline:                       var(--Focus-Outline);
}

.FooterInner {
	display:                       flex;
	flex-direction:                column;
	gap:                           24px;
	margin:                        0 auto;
	max-width:                     var(--Footer-MaxWidth);
	padding:                       48px 48px 86px;
	width:                         100%;
}

.FooterContent {
	display:                       flex;
	flex-direction:                row;
	gap:                           24px;
}

.FooterLogo {
	border:                        1px dashed #FFF;
	border-radius:                 5px;
	width:                         200px;
}

footer nav ul {
	flex-direction:                column;
}

footer nav a {
	color:                         #FFF;
}




/* Pages */
/********************************************************************
 *                                                                  *
 *                          HOME PAGE                               *
 *                                                                  *
 ********************************************************************/
.Home {
	--Content-MaxWidth: 1248px;
	--Content-PaddingBlock: 0;
}

.Home section {
	width:                         100%;
}

.Home section:not(:last-child) {
	border-bottom:                 1px dashed #EEE;
}

/* Hero */
.Hero {
	--Hero-MaxWidth: 600px;
	
	align-items:                   flex-start;
	background:                    #eeeeee79;
	display:                       flex;
	flex-direction:                column;
	justify-content:               flex-end;
	min-height:                    100vh;
	padding:                       148px 48px 48px;
}

.Hero::after {
	background-image:              linear-gradient(to bottom, transparent 0%, black 90%);
	content:                       "";
	height:                        100%;
	position:                      absolute;
	width:                         100%;
	z-index:                       1;
}

.HeroBackgroundImage {
	height:                        100%;
	left:                          0;
	object-fit:                    cover;
	position:                      absolute;
	top:                           0;
	width:                         100%;
	z-index:                       0;
}

.Hero h1 {
	font-size:                     42px;
	font-weight:                   700;
	letter-spacing:                1px;
	margin:                        0 0 12px;
	max-width:                     var(--Hero-MaxWidth);
	padding:                       0;
	z-index:                       1;
}

.Hero h2 {
	font-size:                     18px;
	font-weight:                   500;
	margin:                        0;
	max-width:                     var(--Hero-MaxWidth);
	padding:                       0;
	z-index:                       1;
}

.HeroButtons {
	margin-top:                    12px;
	z-index:                       1;
}

/* Image - Content */
:is(.ImageLeft, .ImageRight) {
	align-items:                   center;
	display:                       flex;
	flex-direction:                row;
	justify-content:               space-between;
	padding:                       120px var(--Content-PaddingInline);
}

:is(.ImageLeft, .ImageRight) img {
	aspect-ratio:                  20 / 12;
	background-color:              #eeeeee35;
	border:                        1px solid #EEE;
	border-radius:                 10px;
	display:                       block;
	flex:                          0 0 48%;
	object-fit:                    cover;
}

.ImageContent {
	align-items:                   flex-start;
	display:                       flex;
	flex:                          0 0 48%;
	flex-direction:                column;
}

.ImageContentLabel {
	border:                        1px solid #DDD;
	/* background:                    #EEE; */
	border-radius:                 15px;
	color:                         #323232;
	display:                       inline-block;
	font-size:                     14px;
	margin-bottom:                 6px;
	padding:                       4px 8px;
}

.ImageContentTitle {
	font-size:                     28px;
	font-weight:                   600;
	margin-bottom:                 6px;
}

.ImageContentDescription {
	margin-bottom:                 12px;
}

.ImageContentButtons {
	justify-content:               flex-start;
	display:                       flex;
	flex-direction:                row;
	gap:                           12px;
}

/* Image Content - Right */
.ImageRight {
	flex-direction:                row-reverse;
}


/* About */
.About {
	align-items:                   center;
	display:                       flex;
	flex-direction:                column;
	justify-content:               center;
	padding:                       120px var(--Content-PaddingInline);
}

.About h2 {
	display:                       inline-block;
	font-size:                     32px;
	line-height:                   1;
	margin:                        0 auto 24px;
}

.About p {
	display:                       inline-block;
	font-size:                     22px;
	line-height:                   1;
	margin:                        0 auto 48px;
}


/* Feature Checklist */
.FeatureChecklist {
	padding:                       120px var(--Content-PaddingInline);
}

.FeatureChecklist ul {
	display:                       flex;
	flex-direction:                row;
	flex-wrap:                     wrap;
	gap:                           0;
}

.FeatureChecklist li {
	list-style-image:              url("images/check.svg");
	flex-basis:                    50%;
	/* width:                         50%; */
}

.FeatureChecklist li::marker {
	font-size:                     50px;
}