header {
	padding: var(--layout-spacing) 0 var(--layout-spacing) 0;
	background: linear-gradient(to right, var(--color-background) 50%, transparent 50%), url("../images/assets/background.png");
	background-repeat: repeat;
	background-attachment: fixed;
	position: relative;
	animation: fadeIn 0.5s;
}

header .content-box {
	min-height: calc(100vh - 2 * var(--layout-spacing));
	display: flex;
	align-items: center;
}

header .grid-box {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--layout-spacing);
	align-items: center;
}

header .description h1 {
	padding: 0 0 calc(var(--layout-spacing) / 4) 0;
	font-size: var(--fontsize-base);
}

header .description h2 {
	text-transform: none;
	font-weight: 700;
	background: -webkit-linear-gradient(var(--color-accent), var(--color-accent-dark));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

header .description .logos {
	margin-top: var(--layout-spacing);
	padding-top: calc(var(--layout-spacing) / 2);
	border-top: 1px solid var(--color-border);
}

header .description .logos ul {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(var(--layout-spacing) / 4);
	align-items: start;
}

header .description .logos ul li {
	display: inline-block;
}

header .description .logos ul li img {
	height: var(--fontsize-small);
	animation: fadeIn 1s;
}

header .profile img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow: 5px 10px 15px var(--color-shadow);
	animation: fadeIn 0.75s;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: scale(1.1);
	}
	to {
		opacity: 1;
		transform: scale(1.0);
	}
}

@media screen and (max-width: 975px) {
	header {
		padding: calc(2 * var(--layout-spacing)) 0 calc(1.5 * var(--layout-spacing)) 0;
		background: var(--color-background);
	}

	header .content-box {
		min-height: 0;
	}

	header .grid-box {
		grid-template-columns: 1fr;
	}
}