body,
html {
	margin: 0;
	padding: 0;
	max-width: 100vw;
	overflow-x: clip;
}

:root {
	--light-text-color: #fff;
	--accent-text-color: #da22ff;
	--accent-color-one: #9733ee;
	--accent-color-two: #da22ff;
}

* {
	font-family: 'Open Sans';
}

header {
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	position: fixed;
	width: 100vw;
	top: 0px;
	backdrop-filter: blur(10px);
	z-index: 999;
	background: var(--accent-color-two); /* fallback for old browsers */
	background: -webkit-linear-gradient(
		to right,
		var(--accent-color-one),
		var(--accent-color-two)
	); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(
		to right,
		var(--accent-color-one),
		var(--accent-color-two)
	); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

header a {
	text-decoration: none;
	color: #fff;
	font-weight: bolder;
}

#hero {
	margin-top: 100px;
	background: var(--accent-color-two); /* fallback for old browsers */
	background: -webkit-linear-gradient(
		to right,
		var(--accent-color-one),
		var(--accent-color-two)
	); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(
		to right,
		var(--accent-color-one),
		var(--accent-color-two)
	); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	padding: 20px;
}

#pfp {
	height: calc(100vh - 100px);
	height: calc(100svh - 100px);
	opacity: 0;
	content: '';
	display: block;
	position: absolute;
	top: 100px;
	left: 0px;
	background-image: url('../img/fbpb.png');
	background-size: contain;
	background-repeat: no-repeat;
	aspect-ratio: 1/2;
	filter: drop-shadow(0px 0px 10px #333) saturate(0);
}

#upperhero,
#lowerhero {
	z-index: 2;
}

#heroText {
	display: flex;
	height: 100vh;
	max-height: calc(100vh - 140px);
	max-height: calc(100svh - 140px);
	max-width: 100vw;
	flex-direction: column;
	color: var(--light-text-color);
	gap: 10px;
	justify-content: space-between;
}

#hero h1,
#hero h2 {
	margin: 0;
	text-transform: uppercase;
	font-weight: bolder;
	font-size: 4em;
}

#introduction {
	margin-top: 20vh;
	font-family: 'Inconsolata';
	color: var(--light-text-color);
	display: block;
}

#hero h2 {
	font-weight: bolder;
	text-align: right;
}

#lowerhero {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#downarrow svg {
	fill: var(--light-text-color);
	height: 6em;
	width: 6em;
}

#downarrow {
	flex-grow: 1;
	display: flex;
	justify-content: center;
}

#downarrow {
	opacity: 0;
}

a.underline {
	display: block;
	width: fit-content;
	padding: 0px 5px;
	position: relative;
	cursor: pointer;
}
a.underline::after {
	position: absolute;
	content: '';
	height: 2px;
	background: var(--light-text-color);
	width: 0%;
	display: block;
	left: 0px;
	transition: width 0.3s;
}

a.underline:hover::after {
	width: 100%;
}

.section {
	display: flex;
	flex-direction: row;
	min-height: calc(100vh - 120px);
}

.lefthalf {
	width: fit-content;
	padding: 20px;
	max-width: 50vw;
	min-width: 30vw;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}

h2.colored {
	background: var(--accent-color-two); /* fallback for old browsers */
	background: -webkit-linear-gradient(
		to right,
		var(--accent-color-one),
		var(--accent-color-two)
	); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(
		to right,
		var(--accent-color-one),
		var(--accent-color-two)
	); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 4em;
	font-weight: bolder;
}
.lefthalf h2 {
	position: sticky;
	top: 120px;
	background: var(--accent-color-two); /* fallback for old browsers */
	background: -webkit-linear-gradient(
		to right,
		var(--accent-color-one),
		var(--accent-color-two)
	); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(
		to right,
		var(--accent-color-one),
		var(--accent-color-two)
	); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 4em;
	font-weight: bolder;
}

.coloredheading {
	background: var(--accent-color-two); /* fallback for old browsers */
	background: -webkit-linear-gradient(
		to right,
		var(--accent-color-one),
		var(--accent-color-two)
	); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(
		to right,
		var(--accent-color-one),
		var(--accent-color-two)
	); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.righthalf {
	flex-grow: 1;
	justify-content: center;
	padding: 20px 0px;
}

#skills,
.tilecontainer {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: center;
}

.skill {
	display: flex;
	background: #eee;
	border-radius: 0.3em;
	width: fit-content;
	height: fit-content;
	flex-direction: column;
	min-width: 200px;
	padding: 20px;
	align-items: center;
	justify-content: center;
}

.skill:hover img {
	filter: saturate(1);
}

.skill img {
	width: 100px;
	height: 100px;
	transition: all 0.5s;
	filter: saturate(0);
}

.skill h3 {
	background: var(--accent-color-two); /* fallback for old browsers */
	background: -webkit-linear-gradient(
		to right,
		var(--accent-color-one),
		var(--accent-color-two)
	); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(
		to right,
		var(--accent-color-one),
		var(--accent-color-two)
	); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.reversesection {
	flex-flow: row-reverse;
}

.reversesection .lefthalf {
	justify-content: flex-start;
}

.col {
	flex-direction: column;
}

.project {
	background: #333;
	max-width: 60vw;
	width: 100vw;
	text-align: center;
	padding: 20px 10px;
	font-size: 2em;
	border-radius: 0.3em;
	position: relative;
	aspect-ratio: 2 / 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background-position: center;
	background-size: 100%;
	transition: background-size 0.5s, scale 0.4s;
	background-repeat: no-repeat;
}

.hmstritem {
	background-image: url('../img/hmstrpreview.png');
}
.hmstrappitem {
	background-image: url('../img/hmstrapp.png');
}

.mountainitem {
	background-image: url('../img/mountaincandles.png');
}
.tingitem {
	background-image: url('../img/ting.png');
}

.project::after {
	content: '';
	display: block;
	background: var(--accent-color-two); /* fallback for old browsers */
	background: -webkit-linear-gradient(
		to right,
		var(--accent-color-one),
		var(--accent-color-two)
	); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(
		to right,
		var(--accent-color-one),
		var(--accent-color-two)
	); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	height: 100%;
	width: 100%;
	position: absolute;
	transition: all 1s;
	opacity: 0.5;
}

.project:hover {
	background-size: 110%;
	scale: 1.02 !important;
}

.project:hover::after {
	opacity: 0.2;
}

.project .loop-container .item {
	background-color: transparent;
	transition: background-color 0.3s;
}

.loop-container {
	z-index: 2;
}

a {
	text-decoration: none;
}
.project:hover .loop-container .item {
	background-color: black;
	transition: background-color 0.3s;
}

.project h3 {
	color: #fff;
}
#section3 {
	background: var(--accent-color-two); /* fallback for old browsers */
	background: -webkit-linear-gradient(
		to right,
		var(--accent-color-one),
		var(--accent-color-two)
	); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(
		to right,
		var(--accent-color-one),
		var(--accent-color-two)
	); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#section3 .lefthalf h2 {
	-webkit-text-fill-color: #fff;
	-webkit-background-clip: initial;
	background: transparent;
}

#contact {
	display: flex;
}

#contact ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 25px;
}

#contact li a {
	display: flex;
	align-items: center;
	gap: 20px;
	justify-content: flex-start;
}

#contact li svg {
	height: 3rem;
	width: 3rem;
	fill: white;
}

#contact li span {
	font-size: 3rem;
	line-height: 3rem;
	color: white;
}

#contact a {
	text-decoration: none;
}

#contact h3 {
	color: white;
	font-size: 4em;
	text-transform: uppercase;
	font-weight: lighter;
}

#lebenslauf {
	padding: 20px;
	max-width: 800px;
	margin: 0 auto;
}

tr td:first-child {
	font-weight: bold;
	vertical-align: top;
	font-size: 2em;
	background: var(--accent-color-two); /* fallback for old browsers */
	background: -webkit-linear-gradient(
		to right,
		var(--accent-color-one),
		var(--accent-color-two)
	); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(
		to right,
		var(--accent-color-one),
		var(--accent-color-two)
	); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

tr td:last-child {
	color: #333;
	font-size: 1.3rem;
}

tr td {
	padding: 20px;
}

#lebenslauf {
	max-width: 100vw;
	padding: 0;
}

#lebenslauf table {
	max-width: 840px;
}

.lefthalf {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.lefthalf h2 span {
	background: none;
	-webkit-background-clip: unset;
	-webkit-text-fill-color: #777;
	font-size: 0.35em;
	display: block;
	font-weight: lighter;
}
#section4 span {
	padding: 20px;
	max-width: 800px;
	text-align: justify;
	hyphens: auto;
	font-size: 1.3rem;
	line-height: 2.2rem;
}

#section3 .lefthalf {
	display: flex;
	flex-direction: column;
	height: 100%;
	align-items: center;
}

#section3 h2 {
	position: relative;
	top: 0px;
}

#section3 #qr {
	width: 300px;
	max-width: 50vw;
	z-index: 99;
}

#section3 {
	position: relative;
}

#section3 .lefthalf {
	padding-bottom: 0px;
	justify-content: space-between;
	min-height: calc(100vh - 120px);
}

#profile {
	margin-left: -20px;
	filter: saturate(0);
	position: relative;
	bottom: 0px;
	width: 50vw;
	align-self: flex-start;
	max-width: 400px;
}
#contact ul li a {
	position: relative;
	width: fit-content;
}

#contact ul li a::after {
	content: '';
	background: white;
	height: 110%;
	width: 0%;
	position: absolute;
	bottom: -5%;
	display: block;
	transition: width 0.3s;
	right: -5%;
}

#contact ul li a:hover::after {
	width: 110%;
}
#contact ul li a span,
#contact ul li a svg {
	transition: color 0.3s, fill 0.3s;
	z-index: 9;
}

#contact ul li a:hover span {
	color: #333;
}
#contact ul li a:hover svg {
	fill: #333;
}

@media only screen and (max-width: 1514px) {
	.skill {
		min-width: 150px;
	}
}

@media only screen and (max-width: 1228px) {
	.skill {
		min-width: 250px;
	}
}
@media only screen and (max-width: 1142px) {
	.skill {
		min-width: 200px;
	}
}
@media only screen and (max-width: 1000px) {
	#section3 .righthalf,
	#section3 .lefthalf {
		width: 100vw;
		min-width: 100vw;
		max-width: 100vw;
	}
	#section3 .lefthalf {
		height: fit-content;
		width: 100vw;
		justify-content: space-between;
		flex-basis: 100%;
		padding: 0;
	}
	#section3.reversesection .lefthalf {
		justify-content: center;
	}

	#section3 .righthalf {
		flex-basis: 100%;
	}

	#section3.section {
		flex-wrap: wrap;
		min-height: unset;
		flex-flow: column-reverse;
	}
}
@media only screen and (max-width: 880px) {
	.righthalf,
	.lefthalf {
		width: 100vw;
		min-width: 100vw;
		max-width: 100vw;
	}
	.lefthalf {
		height: fit-content;
		width: 100vw;
		justify-content: center;
		flex-basis: 100%;
		padding: 0;
	}

	.lefthalf h2 {
		padding: 0px 20px;
	}
	.reversesection .lefthalf {
		justify-content: center;
	}

	.righthalf {
		flex-basis: 100%;
	}

	.section {
		flex-wrap: wrap;
		min-height: unset;
	}

	.project {
		width: 100%;
		max-width: 90vw;
	}
	#contact h3 {
		text-align: center;
	}
	#contact ul li span {
		font-size: 1.5em;
	}

	#contact ul {
		padding-left: 10px;
	}

	tr {
		display: flex;
		flex-direction: column;
	}
}

@media only screen and (max-width: 700px) {
	#hero h1,
	#hero h2 {
		font-size: 30px;
	}
}

@media only screen and (max-width: 500px) {
	.skill {
		max-width: 40vw;
		min-width: 100px;
	}
}