/* light mode + shared elements */

/* desktop scroll arrow */
.arrow-icon {
	background-color: black;
	border-radius: 50%;
}

.arrow-icon-icon {
	position: relative;
	left: 2px;
	top: 0.5px;
	fill: #f2f1f6;
}

.arrow-icon:hover {
	opacity: 0.8;
}

/* dark mode */
@media (prefers-color-scheme: dark) {
	/* desktop scroll arrow */
	.arrow-icon {
		background-color: white;
	}

	.arrow-icon-icon {
		fill: black;
	}
}

/* desktop width */
@media (min-width: 481px) {
	/* profile picture and name */
	.pfp {
		width: calc(100dvh - 424.5px);
		height: calc(100dvh - 424.5px);
	}

	/* fullscreen container */
	.fullscreen-container {
		height: calc(100dvh - 238px);
		min-height: 408px;
		position: relative;
	}

	.fullscreen-content {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	/* desktop scroll arrow */
	.arrow-container {
		display: flex;
		height: 30px;
		width: 100%;
		margin-top: -18px;
	}

	.arrow-container-footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: auto auto 1rem auto;
	}

	.arrow-icon {
		width: 28px;
		height: 28px;
		cursor: pointer;
	}

	.arrow-icon-icon {
		content: url(/images/svgs/arrow-up-light.svg);
		height: 24px;
		width: 24px;
	}

	.bounce {
		-webkit-animation: bounce 2s;
		animation: bounce 2s;
		-webkit-animation-delay: 1s;
		animation-delay: 1s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
	}

	@-webkit-keyframes bounce {
		0%,
		25%,
		50%,
		75%,
		100% {
			-webkit-transform: translateY(0);
			transform: translateY(0);
		}

		40% {
			-webkit-transform: translateY(-5px);
			transform: translateY(-5px);
		}

		60% {
			-webkit-transform: translateY(-5px);
			transform: translateY(-5px);
		}
	}

	@keyframes bounce {
		0%,
		25%,
		50%,
		75%,
		100% {
			-webkit-transform: translateY(0);
			transform: translateY(0);
		}

		40% {
			-webkit-transform: translateY(-5px);
			transform: translateY(-5px);
		}

		60% {
			-webkit-transform: translateY(-5px);
			transform: translateY(-5px);
		}
	}

	/* dark mode */
	@media (prefers-color-scheme: dark) {
		.arrow-icon-icon {
			content: url(/images/svgs/arrow-up.svg);
		}
	}
}

/* hide arrow on small screens */
@media (max-height: 770px) and (min-width: 481px) {
	/* profile picture and name */
	.pfp {
		width: calc(100vh - 412.5px);
		height: calc(100vh - 412.5px);
	}

	/* fullscreen container */
	.fullscreen-container {
		height: calc(100vh - 226.7px);
		min-height: 408px;
		position: relative;
	}

	/* desktop scroll arrow */
	.arrow-container {
		width: 100%;
		height: 0px;
		margin-top: 0px;
		display: none;
	}

	.arrow-icon {
		width: 0px;
		height: 0px;
		cursor: default;
	}
}

/* tablets */
@media (max-width: 768px) and (min-width: 481px) {
	/* profile picture and name */
	.pfp {
		width: calc(100dvh - 400px);
		height: calc(100dvh - 400px);
	}

	/* fullscreen container */
	.fullscreen-container {
		height: calc(100dvh - 238px);
		min-height: 408px;
		position: relative;
		transition: height 2147483647s;
	}
}

/* hide arrow on mobile */
@media (max-width: 480px) {
	/* profile picture and name */
	.pfp {
		width: calc(100dvh - 400px);
		height: calc(100dvh - 400px);
	}

	/* fullscreen container */
	.fullscreen-container {
		height: calc(100dvh - 226.7px);
		min-height: 408px;
		position: relative;
		transition: height 2147483647s;
	}

	.fullscreen-content {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	/* desktop scroll arrow */
	.arrow-container {
		height: 0px;
		margin-top: 0px;
		display: none;
	}

	.arrow-icon {
		width: 0px;
		height: 0px;
	}
}