header {
	display: flex;
	position: sticky;
    width: 100%;
    padding: var(--small-spacing) var(--small-spacing);
	font-size: var(--bigger-font);
	justify-content: space-around;
	background-image: linear-gradient(to top, var(--accent-lighter), var(--accent-lighter-10));
} #logo {
	background: var(--logo) no-repeat;
	content: "";
	inset: 0;
	width: 19rem;
	height: 7vh;
	background-size: contain;
} header aside {
	font-size: var(--small-font);
	align-self: center;
} header nav {
	align-self: center;
} header nav ul li {
	float: left;
	list-style: none;
	padding: 0 var(--small-spacing) 0 var(--small-spacing);
	border-left: var(--item-size-xs) solid var(--secondary);
} header nav ul li:first-child {
	border-left: none;
} header nav ul li a {
	text-decoration: none;
	cursor: pointer;
	background: none;
}
#banner {
	position: relative;
	height: calc(var(--big-guy-height));
}
#banner::before {
	position: absolute;
    content: "";
    inset: 0;
    background: var(--background);
	background-position: 100% 17.5%;
	background-size: cover;
} #banner-text {
	position: absolute;
	height: fit-content;
	right: 0;
	color: var(--accent-static);
	background-color: var(--half-trans);
	padding: var(--medium-spacing);
	margin-right: var(--spacing);
	text-shadow: var(--item-size-xs) var(--item-size-xs) var(--item-size-s) var(--threefour-trans);
	backdrop-filter: blur(var(--item-size-s));
	font-size: var(--small-font);
	bottom: 0;
}
#content {
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: center;
}
#content p {
	margin: var(--spacing);
	text-align: center;
	font-size: var(--medium-font);
} section {
	margin-bottom: var(--spacing);
} section:nth-child(even) {
	background-color: var(--accent);
	color: var(--secondary-text-color);
} .section-multi {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--spacing);
} .section-multi-section {
	padding: var(--spacing);
	border-right: var(--item-size-xs) solid var(--secondary);
} .section-multi-section:last-child {
	border-right: none;
} .section-headline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--small-spacing);
} .bigsection {
	font-size: var(--bigger-font) !important;
} .icon {
	float: left;
	background-image: var(--icons);
	width: 48px;
	height: 48px;
	background-repeat: no-repeat;
	transform: scale(0.75);
} .icon.migration {
	background-position: -336px 0;
} .icon.integration {
	background-position: -384px 0;
} .icon.development {
	background-position: -240px 0;
} .icon.strategy {
	background-position: -432px 0;
}
#contact {
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	align-self: center;
    justify-content: center;
	min-height: 40vh;
	overflow: hidden;
}
.hidden {
    display: none !important;
}
.contact-container {
    width: 100%;
    max-width: fit-content;
}
.contact-container h2 {
    margin: var(--spacing);
    color: var(--color);
    text-align: center;
} .contact-container aside {
	text-align: center;
	margin-bottom: var(--spacing);
}
#formFields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
} form input, form textarea {
    padding: var(--spacing) var(--spacing);
    margin: var(--small-spacing);
    font-size: inherit;
    background-color: var(--accent-lighter-10);
    border: var(--item-size-xs) solid var(--accent);
    border-radius: var(--small-spacing);
    font-weight: var(--weight);
    font-family: inherit;
    resize: vertical;
    min-height: var(--biggest-font);
} form textarea {
    min-height: var(--double-font);
	grid-column: 1 / 3;
} #formnote {
	grid-column: 1 / 3;
} form input:active, form input:focus, form textarea:active, form textarea:focus {
    background-color: var(--accent-lighter);
    outline: none;
} form button {
    background: var(--secondary);
    color: var(--primary);
    border: none;
    margin-top: var(--spacing);
    padding: var(--medium-spacing) var(--spacing);
    font-size: inherit;
    border-radius: 6px;
    cursor: pointer;
    width: var(--item-size-medium-x);
    justify-self: center;
	grid-column: 1 / 3;
} form button:hover {
    background: var(--secondary-accent);
    color: var(--accent);
}
#formMessage {
    margin-top: var(--spacing);
    text-align: center;
    font-weight: bold;
    font-size: var(--bigger-font);
} #contact #formnote {
    margin-top: var(--small-spacing);
    font-size: var(--small-font);
    font-style: italic;
    text-align: center;
}
.loader {
    width: var(--item-size-medium-s);
    height: var(--item-size-medium-s);
    border: var(--item-size) solid var(--accent);
    border-top-color: var(--secondary);
    border-radius: 50%;
    margin: var(--spacing) auto;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.hidden {
    display: none !important;
}
.extra {
    margin-top: 2rem;
    text-align: center;
    font-size: 1.2em;
} .extra a:hover {
	opacity: var(--strong-opacity);
}
footer {
	display: flex;
	justify-content: center;
	gap: var(--spacing);
	font-size: var(--medium-font);
	min-height: 5vh;
	background-color: var(--accent);
	color: var(--secondary-text-color);
	align-items: center;
} footer #footerimg {
	background: var(--text) no-repeat;
    content: "";
    inset: 0;
	width: 9rem;
	height: var(--spacing);
	background-size: contain;
}

@media (max-width: 768px) {
	#logo {
		margin-bottom: var(--spacing);
	}
	#banner {
		height: calc(var(--big-guy-height) / 1.35);
	}
	.contact-container {
		max-width: 20rem !important;
	} #formFields {
		display: flex;
		flex-direction: column;
	}
}
@media screen and (orientation: portrait) and (min-width: 900px) and (min-height: 1400px) {
	#logo {
		height: 4.5vh;
	}
	#banner {
		height: calc(var(--big-guy-height) / 1.75);
	}
	#contact {
		min-height: unset;
	}
}
@media only screen and (orientation: portrait) and (min-height: 600px), only screen and (min-aspect-ratio: 9 / 10) and (max-aspect-ratio: 10 / 9) {
	nav {
		margin-top: var(--spacing);
	}
	#banner {
		height: calc(var(--big-guy-height) / 1.75);
	}
	#contact {
		min-height: unset;
	}
}
@media (max-width: 768px), screen and (orientation: portrait) and (min-width: 900px) and (min-height: 1400px), only screen and (orientation: portrait) and (min-height: 600px), only screen and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 10/9) {
	:root {
		--logo: url(../img/logo_text_extra.svg);
	}
	header {
		flex-direction: column;
	} header aside {
		display: none;
	} #logo {
		display: flex;
		margin: 0 auto;
	} header nav ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#banner {
		height: calc(var(--big-guy-height) / 1.35);
	} #banner::before {
		background-position: 300% 15%;
	}
	form button {
		align-self: center;
	}
	.section-multi {
		flex-direction: column;
		align-items: unset;
	} .section-multi-section {
		border-right: none;
		border-bottom: var(--item-size-xs) solid var(--secondary);
	}
}
@media (max-width: 768px) and (prefers-color-scheme: dark), screen and (orientation: portrait) and (min-width: 900px) and (min-height: 1400px) and (prefers-color-scheme: dark), only screen and (orientation: portrait) and (min-height: 600px) and (prefers-color-scheme: dark), only screen and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 10/9) and (prefers-color-scheme: dark) {
	:root {
		--logo: url(../img/logo_text_extra_dark.svg);
	}
}