:root {
	--projects-item-width: 80vw;
	--projects-item-min-height: 360px;
	--projects-item-min-height-2: 270px;
	--projects-video-container-width: 640px;
	--projects-video-container-width-2: 480px;
	--projects-video-container-ratio: 56.25%;

	--projects-info-width: 42%;
	--projects-info-width-2: 90%;

	--projects-move-to-top-button-size: 100px;
	--projects-move-to-top-button-position: 15px;
	--projects-move-to-top-button-position-2: 10px;
	--projects-move-to-top-button-position-3: 5px;

	--projects-move-to-top-button-tooltip-size: 120px;
	--projects-move-to-top-button-tooltip-bottom: 90%;
	--projects-move-to-top-button-tooltip-left: 50%;
}

.projects-page {
	background-image: linear-gradient(45deg, var(--dark-purple), var(--light-blue));
	background-size: cover;
	/* https://stackoverflow.com/a/19758117 */
	min-height: 100%;
	min-width: 100%;
}

.projects-header {
	animation: var(--transition-duration-2) ease-out 0.1s 1 fadeIn;
	animation-fill-mode: both;
	
	/* height: 15vh; */
	background-image: linear-gradient(45deg, var(--light-blue), var(--text-color));

	padding: var(--padding);

	display: flex;
	align-items: center;
	flex-direction: column;
	color: var(--dark-purple);

	z-index: 1;
	position: relative;
}

.home-page-buttons {
	margin: 0px;
}

.home-page-button {
	background-color: var(--dark-purple);
	color: var(--text-color);
	padding: var(--padding);
}

.projects-content {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: var(--margin);

	padding: var(--padding) 0px;
}

/* https://css-tricks.com/different-approaches-for-creating-a-staggered-animation/ */
.projects-item {
	animation: var(--transition-duration-2) ease-out calc(0.2s + (0.15s * var(--animation-order))) 1 fadeIn;
	animation-fill-mode: both;

	display: flex;
	gap: var(--margin-text);
	padding: var(--padding);
	background-image: linear-gradient(45deg, var(--light-blue), var(--text-color));
	border-radius: var(--border-radius);
	width: var(--projects-item-width);
	min-height: var(--projects-item-min-height);
	justify-content: center;
}

.projects-video {
	width: 100%;
	height: 100%;
	border: 0;
}

.projects-video-container {
	width: var(--projects-video-container-width);
	min-width: var(--projects-video-container-width);
	min-height: auto;
	border: 0;
	/* padding-top: 56.25%; */
}

.divider {
	border: 2px solid var(--dark-purple);
	border-radius: var(--border-radius);
	margin: 0;
}

.projects-info {
	display: flex;
	flex-direction: column;
	gap: var(--margin);
	width: var(--projects-info-width);
}

h1 {
	color: var(--dark-purple);
}

.text-bold {
	font-weight: bold;
	color: var(--dark-purple);
	font-size: var(--font-size-3);
}

.game-link {
	font-weight: bold;
	color: var(--dark-purple);
	font-size: var(--font-size-3);
	transition: color var(--transition-duration);
}

.game-link:hover {
	color: var(--light-blue);
}

.text-normal {
	color: var(--dark-purple);
	font-size: var(--font-size-4);
}

.material-icons.social-media {
	color: var(--icon-color-dark);
	font-size: var(--font-size-1);
}

.social-media-icon {
	color: var(--icon-color-dark);
	fill: var(--icon-color-dark);
	height: var(--social-media-icon-size);
	width: var(--social-media-icon-size);
	object-fit: cover;
	object-position: 0;
}

.language-selector-container {
	align-self: auto;
}

#language-selector {
	background-color: var(--dark-purple);
	
}

.language-selector-container:hover #language-selector {
	background-color: var(--light-blue);
}

.language-dropdown-button:hover {
	background-color: var(--light-blue);
}

#projects-move-to-top-button {
	width: var(--projects-move-to-top-button-size);
	height: var(--projects-move-to-top-button-size);
	border-radius: var(--border-radius);
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--dark-purple);
	opacity: 50%;
	transition: opacity var(--transition-duration);
	visibility: hidden;
}

#projects-move-to-top-button:hover {
	opacity: 100%;
}

/* https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/cubic-bezier#bouncing_effect */
/* https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event */
#projects-move-to-top-button.popInAnimation {
	animation: popIn var(--transition-duration) cubic-bezier(0.3, 0.8, 0.3, 2) 0s 1 normal;
}

#projects-move-to-top-button.popOutAnimation {
	animation: popIn var(--transition-duration) cubic-bezier(0.3, 0.8, 0.3, 2) 0s 1 reverse;
}

/* https://www.w3schools.com/css/css_tooltip.asp */
.projects-move-to-top-tooltip {
	visibility: hidden;
	width: var(--projects-move-to-top-button-tooltip-size);
	background-color: var(--dark-purple);
	color: var(--text-color);
	text-align: center;
	font-size: var(--font-size-2);
	padding: var(--padding) 0;
	border-radius: var(--border-radius);
	
	position: absolute;
	z-index: 1;
	bottom: var(--projects-move-to-top-button-tooltip-bottom);
	left: var(--projects-move-to-top-button-tooltip-left);
	margin-left: calc(var(--projects-move-to-top-button-tooltip-size)/-2);

	opacity: 0;
	transition: opacity var(--transition-duration-2), bottom var(--transition-duration-2);
}

#projects-move-to-top-button:hover .projects-move-to-top-tooltip {
	visibility: visible;
	opacity: 1;
	bottom: 105%;
}

/* https://stackoverflow.com/a/12638711 */
@keyframes popIn {
  0% {
	transform: scale(0);
  }
  100% {
	transform: scale(1);
  }
}

@media only screen and (max-width: 500px) {
	.home-page-buttons-row {
		flex-direction: column;
		gap: var(--margin);
		width: 100%;
	}
	
	.home-page-buttons {
		width: 100%;
		gap: var(--margin);
		margin: var(--margin);
	}

	.home-page-button {
		margin: 0px;
		text-align: center;
	}

	.language-selector-container {
		width: 100%;
		text-align: center;
	}

	html {
		font-size: var(--font-size-5);
	}

	h1 {
		font-size: var(--font-size-2);
	}
	
	.projects-item {
		flex-direction: column;
		width: 100%;
		min-height: var(--projects-item-min-height-2);
		height: auto;
		border-radius: 0px;
		align-items: center;
		box-sizing: border-box;
		padding: var(--padding) 0;
	}

	.projects-video {
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
	}

	.projects-video-container {
		width: 100%;
		height: 100%;
		min-width: auto;
		min-height: auto;
		padding-top: var(--projects-video-container-ratio);
		position: relative;
	}

	.divider {
		width: var(--projects-info-width-2);
	}

	.projects-info {
		width: var(--projects-info-width-2);
		text-align: center;
	}

	#projects-move-to-top-button {
		transform: scale(0.5);
		bottom: var(--projects-move-to-top-button-position-3);
		right: var(--projects-move-to-top-button-position-3);
	}
}

@media only screen and (min-width: 500px) {
	.projects-item {
		flex-direction: column;
		width: 100%;
		min-height: var(--projects-item-min-height-2);
		height: auto;
		border-radius: 0px;
		align-items: center;
		box-sizing: border-box;
	}

	/* .projects-video {
		width: 480px;
		min-width: 480px;
		min-height: 270px;
	} */

	.projects-video-container {
		width: var(--projects-video-container-width-2);
		min-width: var(--projects-video-container-width-2);
		min-height: var(--projects-item-min-height-2);
	}

	.divider {
		width: var(--projects-info-width-2);
	}

	.projects-info {
		width: var(--projects-info-width-2);
		text-align: center;
	}

	#projects-move-to-top-button {
		transform: scale(0.5);
		bottom: var(--projects-move-to-top-button-position-3);
		right: var(--projects-move-to-top-button-position-3);
	}
}

@media only screen and (min-width: 900px) {
	.projects-item {
		flex-direction: row;
		width: 100%;
		/* 60px is from padding */
		min-height: calc(var(--projects-item-min-height-2) + var(--padding));
		border-radius: 0px;
		align-items: normal;
		box-sizing: border-box;
	}

	/* .projects-video {
		width: 480px;
		min-width: 480px;
		min-height: auto;
	} */

	.projects-video-container {
		width: var(--projects-video-container-width-2);
		min-width: var(--projects-video-container-width-2);
		min-height: auto;
	}

	.divider {
		width: auto;
	}

	.projects-info {
		width: var(--projects-info-width);
		text-align: left;
	}

	#projects-move-to-top-button {
		transform: scale(0.75);
		bottom: var(--projects-move-to-top-button-position-2);
		right: var(--projects-move-to-top-button-position-2);
	}
}

@media only screen and (min-width: 1200px) {
	.projects-item {
		flex-direction: row;
		width: var(--projects-item-width);
		min-height: var(--projects-item-min-height);
		border-radius: var(--border-radius);
		align-items: normal;
		box-sizing: content-box;
	}

	/* .projects-video {
		width: 640px;
		min-width: 640px;
		min-height: auto;
	} */

	.projects-video-container {
		width: var(--projects-video-container-width);
		min-width: var(--projects-video-container-width);
		min-height: auto;
	}

	.divider {
		width: auto;
	}

	.projects-info {
		width: var(--projects-info-width);
		text-align: left;
	}

	#projects-move-to-top-button {
		transform: scale(1);
		bottom: var(--projects-move-to-top-button-position);
		right: var(--projects-move-to-top-button-position);
	}
}