:root {
	--default-spacing: 8px;
	--shadow-color: rgba(0, 0, 0, 0.2);
	--document-padding-width: 0 5vw;
	--document-padding-height: 5vh 0;
	--big-text: 1.8rem;
	--blue-background-color: #0791B1;
}

#content {
	display: flex;
	flex-direction: column;
	gap: 8vh;
	width: 100vw;
	/* position:absolute and specifying the overflow-x: hidden on #content is needed
	because mobile browser ignore the overflow property on body and html elements */
	overflow-x: hidden;
	position: absolute;
}

.aboutMeContainer {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: var(--default-spacing);
	padding: var(--document-padding-width);
}

.aboutMeTitle {
	text-align: center;
}

.backgroundColor {
	position: absolute;
	z-index: -1;
	background: var(--blue-background-color);
	width: 200vw;
	height: 60vh;
	transform: translate(-40vh, -45vw) rotate(-5deg);
}

.workContainer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--default-spacing);
}

.projectInfoContainer {
	display: grid;
	grid-template-rows: 1.5rem 4rem;
	grid-template-columns: 1fr 64px;
	gap: var(--default-spacing);
	padding: var(--default-spacing);
}

.projectAbout {
	grid-column-start: 1;
	grid-column-end: 3;
}

.projectContainer {
	box-shadow: 0 0.5rem 0.5rem var(--shadow-color);
	width: 320px;
	height: 450px;
	display: grid;
	grid-template-rows: 240px 1fr;
	gap: var(--default-spacing);
}

.projectLinks {
	display: flex;
}

.projectName {
	font-size: 1.1rem;
	font-weight: 600;
}

.aboutMePhoto,
.contactMePhoto {
	object-fit: cover;
}

.aboutMePhoto {
	width: 90vw;
	height: 600px;
	z-index: 0;
}

.aboutMeName {
	font-size: min(4rem, 10vw);
	font-weight: 500;
	color: white;
	text-shadow: rgba(0, 0, 0, 0.8) 3px 3px 6px;
	z-index: 1;
	padding: var(--document-padding-width);
	position: absolute;
	top: calc(450px + 5vh);
}

header {
	padding: var(--document-padding-height);
	min-height: 600px;
}

.projectContainer:nth-of-type(odd)>.projectScreenshot {
	background: hotpink;
}

.projectContainer:nth-of-type(even)>.projectScreenshot {
	background: aquamarine;
}

.workTitle {
	text-align: center;
	font-size: var(--big-text);
}

.workContainer {
	display: grid;
	grid-template-rows: 2rem 1fr;
	padding: var(--document-padding-width);
}

.projectsContainer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 8vh 0;
}

.projectContainer:nth-child(3n) {
	border-right: 100vw;
}

.contactMeContainer {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: var(--default-spacing);
	background: var(--blue-background-color);
	color: #FFF;
}

.contactMeText {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: var(--default-spacing);
	padding: var(--document-padding-width);
}

.contactMeSocialsContainer {
	display: flex;
	gap: var(--default-spacing);
}

.contactMeSocialsContainer>img {
	width: 32px;
	height: auto;
}

.contactMePhoto {
	width: 100vw;
}

@media (min-width: 800px) {
	.aboutMePhoto {
		float: left;
		width: 40vmin;
		height: 40vmin;
		margin: var(--default-spacing);
	}

	.aboutMeName {
		position: absolute;
		top: 8.5vmin;
		left: 38vmin;
		font-size: 2.5rem;
	}

	.aboutMeContainer {
		display: block;
	}

	.aboutMeTextContainer {
		box-shadow: 0 0 0.5rem var(--shadow-color);
		width: 80vw;
		margin-top: 10vmin;
		margin-left: 10vmin;
		text-wrap: wrap;
		padding: 2vmin;
		background: #FFF;
	}

	.aboutMeSpacer {
		height: 1px;
		/* Needs any height value to make the aboutMeTextContainer move slightly downwards */
	}

	header {
		padding: 5vh 0 0 0;
		min-height: 0;
	}

	.contactMeContainer {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 5vh 5vw;
	}

	.contactMePhoto {
		width: 45vw;
		height: 500px;
	}

	.contactMeText {
		padding: 0;
		align-items: flex-start;
		height: 450px;
	}
}

@media (min-width: 1600px) {
	.aboutMePhoto {
		width: 20rem;
		height: 20rem;
	}

	.aboutMeName {
		top: 18rem;
		left: 16px;
		font-size: 2rem;
	}

	.backgroundColor {
		height: 120vh;
	}
}

.contactMeSocialsContainer>img:hover,
.projectLinks>img:hover {
	cursor: pointer;
}