html {
	margin: 0vw;
}

body {
	width: 100%;
	margin: 0 auto;
	padding: 0vw;
	font-family: 'Inter', Helvetica, sans-serif;
	background-color: #222222;
	color: #f2f2f2;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.pageContent {
	height: 100dvh;
	overflow: hidden;
}

.hamburger {
	width: 14vw;
	height: 14vw;
	position: absolute;
	z-index: 3;
	top: 3vw;
	right: 3vw;
	box-sizing: border-box;
	border: 0.4vw solid #a6a6a6;
	border-radius: 50vw;
	text-decoration: none;
	background-color: transparent;
	align-content: center;
}
.hamburger:hover {
	border-color: white;
}
.hamburger:hover > .hamburger-icon {
	transition: transform 0.2s ease;
	transform: scale(1.3);
}

.hamburger-icon {
	width: 60%;
	height: 60%;
	display: block;
	margin: 0 auto;
}

.contentDisplay {
	width: 75%;
	height: 100dvh;
	position: absolute;
	align-content: center;
	text-align: center;
	right: 0vw;
	background-color: #222222;
}

.arrow-container {
	width: 100%;
	height: 100dvh;
	position: absolute;
	align-content: center;
}

.arrow {
	width: 3vw;
    height: 3vw;
    position: absolute;
    color: white;
    box-sizing: border-box;
    border: 0.1vw solid #999999;
    border-radius: 15%;
    transition: transform 0.2s ease;
    font-family: monospace;
    font-size: 3vw;
    line-height: 2.5vw;
    z-index: 1;
	cursor: pointer;
	user-select: none;
}

.arrow:hover {
	border-color: white;
	transform: scale(1.3);
}

#arrowLeft {left: 2vw;}
#arrowRight {right: 2vw;}

.contentHeader {
	margin-top: 0vw;
	margin-bottom: 0vw;
}

#pageContainer {
	height: 100dvh;
	display: flex;
	align-items: center;
	vertical-align: top;
}

.page {
	animation: fadeIn 0.5s ease;
}

.pageInfo {
	margin-top: 2vw;
}
.page-title {
	font-size: 3.125vw;
	margin: 0vw;
	margin-top: 0vw;
	margin-bottom: 1.5vw
}

.page-description, #pageProfession {
	font-size: 1.5vw;
	font-weight: normal;
	color: #a6a6a6;
	margin: 1vw;
}

.page-paragraph {
	width: 70%;
	font-size: 1vw;
	margin: 0 auto;
	text-align: center;
}

.img-display {
	width: 60%;
	margin: 0 auto;
	font-size: 0vw;
	text-align: center;
	overflow-y: auto;
}

.img-display::-webkit-scrollbar {
	background: transparent;
	width: 0.4vw;
}
.img-display::-webkit-scrollbar-thumb {
	background: #a6a6a6;
	border-radius: 50vw;
}
.img-display::-webkit-scrollbar-track {
	background: #444444;
	border-radius: 50vw;
	margin-top: 0vw;
	margin-bottom: 1vw;
}

.img-home-wrapper {
	display: inline-block;
	width: 32%;
	margin: 0.25%;
	vertical-align: top;
}

.img-home {
	width: 100%;
	cursor: pointer;
}
.img-home:hover {
	filter: drop-shadow(0 0 0.1vw white) drop-shadow(0 0 0px white);
}

.img-home-wrapper-wide {
	width: 45%;
}

/* Landscape Orientation */
@media screen and (orientation: landscape) {
	.hamburger {display: none;}
	#page-1-description {display: none;}
}

/* Potrait Orientation */
@media screen and (orientation: portrait) {
	.contentDisplay {
		width: 100%;
	}
	.arrow-container {
		align-content: flex-end;
		height: 20dvh;
		bottom: 0vw;
	}
	.arrow {
		width: 12vw;
		height: 12vw;
		font-size: 12vw;
		line-height: 10vw;
		bottom: 12vw;
	}

	#arrowLeft {left: 12vw;}
	#arrowRight {right: 12vw;}

	.page-title {
		font-size: 10vw;
		margin: 1vw auto;
	}
	.page-description {
		font-size: 6vw;
		margin: 1vw;
	}
	.page-paragraph {
		font-size: 3vw;
		margin: 1vw auto;
	}
	.img-display {
		width: 95%;
	}
}

.pageActive {display: flex;   position: fixed;   flex-direction: column;   height: 100dvh;   justify-content: center;   z-index: 0;}
.pageInactive {display: none;}

@keyframes fadeIn {
	from {opacity: 0;}
	to {opacity: 1;}
}