.header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;

	width: 100%;
	height: var(--header-height);
	flex-shrink: 0;

	background-color: var(--dark-title);
}

.main-title {
	color: var(--light-main);
	font-size: 3rem;
	margin-left: 35px;
}

.header-icon {
	position: relative;
	display: flex;
	justify-content: center;

	transition: .1s;

	height: 40%;
	margin: 0 30px;
}

.header-icon > img {
	height: 100%;
}

.header-icon:hover {
	transform: translateY(-30%);
}

.header-icon > span {
	position: absolute;
	bottom: 0;

	display: flex;
	align-items: end;
	height: 1.3em;

	white-space: nowrap;
	
	color: var(--dark-main);
	font-size: 1.5rem;
	opacity: 0;
	transition: .1s;
}

.header-icon:hover > span {
	opacity: 1;
	transform: translateY(100%);
}