.header {
	width: 25%;
	height: auto;
	position: absolute;
	text-align: center;
	background-color: #444444;
	animation: pullRight 1s ease;
	z-index: 2;
	left: 0vw;
	background: linear-gradient(to bottom, var(--color-start), var(--color-end));
	transition: --color-start 10s, --color-end 10s;
}
.header:hover {
	--color-end: #111111;
}
@property --color-start {
	syntax: '<color>';
	initial-value: #444444;
	inherits: false;
}
@property --color-end {
	syntax: '<color>';
	initial-value: #333333;
	inherits: false;
}

.headerContent {
	width: 80%;
	height: 100dvh;
	margin: 0 auto;
	position: relative;
	font-size: 0vw;
}

.headerContent * {
	font-size: 1vw;
}

.header-img {
	width: 65%;
    margin: 4vw 0vw 0vw 0vw;
    border: solid 0.25vw white;
    border-radius: 100%;
    /* box-shadow: 0.5vw 0.5vw 1vw 0vw #cccccc; */
}

#headerName {
	font-size: 2.5vw;
	margin: 2vw 0vw 0.75vw 0vw;
	text-shadow: 0.1vw 0.1vw black;
}

#headerProfession {
	font-size: 1.25vw;
	font-weight: normal;
	color: #a6a6a6;
	margin: 0.75vw 0vw 0.5vw 0vw;
	text-shadow: 0.1vw 0.1vw black;
}

.headerSocialMediaContainer {
	width: 100%;
	height: 1.5vw;
	margin: 2vw 0vw 2vw 0vw;
	text-align: center;
}

.headerSocialMediaWrapper {
	width: 1.5vw;
	height: 100%;
	display: inline-block;
	margin: 0vw 0.5vw 0vw 0.5vw;
}

.headerSocialMediaImg {
	max-width: 100%;
	max-height: 100%;
	display: block;
	margin: 0 auto;
}

.copyright {
	width: 100%;
    font-size: 0.75vw;
    position: absolute;
    display: inline-block;
    bottom: 2.5%;
    left: 0vw;
    color: #a6a6a6;
}

@media screen and (orientation: landscape) {
	.header {
		left: 0vw;
		right: unset;
	}
}

@media screen and (orientation: portrait) {
	.header {
		display: none;
		width: 100%;
		height: 100%;
		right: 0vw;
		left: unset;
	}
	#headerName {
		font-size: 12vw;
		text-shadow: 0.6vw 0.6vw black;
	}
	#headerProfession {
		font-size: 5.5vw;
		text-shadow: 0.4vw 0.4vw black;
	}
	.copyright {
		font-size: 3vw;
	}
}

@keyframes pullRight {
	0% {right: 100vw}
	100% {right: 0vw}
}