/* BLINKING color */
:root {
	--blinking-color: white;
}

body {
	overflow-x: hidden;
}

#hero {
	height: calc(var(--vh, 1vh) * 93);
	border-bottom: 1px solid var(--primary-color);
}

#logo {
	position: absolute;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	top: 0;
	width: 100%;
	height: 100vh;
	font-size: 2rem;
	color: white;
	text-align: center;
}

h1 {
	display: inline-block;
	margin-top: 0;
	/* width: 100%; */
}

h1 #typed-text {
	color: white !important;
}

.blinking {
	color: white;
}

#logo img {
	position: static;
	display: block;
	width: 15%;
	height: 35%;
	object-fit: contain;
	/* image shadow */
	filter: drop-shadow(0px 0px 20px black);
	image-rendering: crisp-edges;
}

#scroll-arrow {
	opacity: 0;
	transform: rotateZ(90deg);
	font-size: 6rem;
	color: white;
	cursor: pointer;
	transition: opacity 0.5s;
	animation: bob-arrow 3s infinite alternate ease-in-out;
}

.show-arrow {
	pointer-events: all;
	opacity: 1 !important;
}

@keyframes bob-arrow {
	0% {
		transform: translateY(0) rotateZ(90deg);
	}

	100% {
		transform: translateY(10px) rotateZ(90deg);
	}
}

canvas {
	outline: none;
	display: block;
}


#intro-paragraph img {
	float: left;
	width: 13.5vw;
	margin-right: 1rem;
	margin-bottom: 1rem;
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: pixelated;
	image-rendering: optimize-contrast;
	-ms-interpolation-mode: nearest-neighbor;
	filter: var(--logo-filter);
}

#intro-paragraph img:last-of-type {
	display: none;
}

#centered-figure {
	text-align: center;
}

figure {
	display: inline-block;
	margin: 0;
	border: 1px solid var(--primary-color);
	width: max-content;
	max-width: calc(100% - 20px);
}

figure img {
	padding: 10px;
	max-width: 100%;
}

figcaption {
	border-top: 1px solid var(--primary-color);
	padding: 10px;
}

@media (max-width: 700px) {
	#logo {
		font-size: 1.5rem;
	}

	#intro-paragraph img {
		display: none;
		width: 20vw !important;
	}
}

@media (max-width: 575px) {
	/* image bigger */
	#logo img {
		width: 30%;
		height: 50%;
	}
}

@media (max-width: 530px) {
	#logo {
		font-size: 1rem;
	}
}

@media (orientation: portrait) and (pointer:none), (pointer:coarse) {
	#hero {
		height: calc(var(--vh, 1vh) * 93) !important;
	}

	#title {
		font-size: 6rem !important;
	}

	#scroll-arrow {
		font-size: 14rem;
	}

	figcaption {
		font-size: 2.44506rem !important;
	}

	#intro-paragraph img:first-of-type {
		display: none;	
	}

	#intro-paragraph img:last-of-type {
		display: inline !important;
		width: 14.6rem;
		margin-right: 2rem !important;
	}
}

/* smaller than previous */
@media (orientation: portrait) {
	#hero {
		height: calc(var(--vh, 1vh) * 96 - 1px);
	}

	/* image bigger */
	#logo img {
		width: 40%;
		height: 40%;
	}

	canvas {
		pointer-events: none;
	}
}