@font-face {
	font-family: 'Dokdo';
	src: url('./font/Dokdo-Regular.ttf') format('truetype');
	font-style: normal;
}

@font-face {
	font-family: 'PatrickHand';
	src: url('./font/PatrickHand-Regular.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
}

.page {
	padding-top: 3rem;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
}

body {
	background-color: #02031E;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* overflow: hidden; */
}

* {
	font-family: 'PatrickHand', Arial, Helvetica, sans-serif;
	font-size: 1.1rem;
	animation-duration: 0.5s;
	transition-duration: 0.5s;
}

h1,
h2,
h3,
h4,
h5,
a {
	font-family: 'Dokdo', Arial, Helvetica, sans-serif;
}

nav {
	position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
	width: 100%;
	height: 3rem;

	div.bg {
		z-index: 95;
		width: 100%;
		position: absolute;
		overflow: hidden;
		height: 100%;

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background: rgba(246, 109, 129, 0.25);
		}

		img {
			width: 100%;
			position: absolute;
			bottom: 0;
		}
	}

	div.links {
		position: relative;
		z-index: 100;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;

		a {
			font-size: 1.5rem;
			width: 100%;
			height: 100%;
			display: grid;
			place-content: center;
			color: #02031E;
			text-decoration: none;

			&:hover {
				background: rgba(194, 96, 111, 0.118);
			}

			&.active {
				color: rgb(239, 56, 83);
			}
		}
	}
}

#crease {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;

	#title {
		width: 75vw;
		max-width: 450px;
		margin-top: calc(5vh + 1vw);
		z-index: -7;
	}

	#release {
		display: flex;
		flex-direction: row;
		align-items: center;
		max-height: 95%;
		margin-top: 1rem;
		gap: 0.5rem;

		img[alt="steam"] {
			height: 2rem;
		}

		span {
			color: rgb(239, 56, 83);
			font-family: 'Dokdo', Arial, Helvetica, sans-serif;
			font-size: 1.2rem;
		}
	}

	&>div {
		max-width: 75%;
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-grow: 1;
	}

	div#tagline {
		color: rgb(246, 109, 130);
		text-align: center;
		font-family: 'Dokdo', Arial, Helvetica, sans-serif;
		font-size: 2.5rem;
	}

	div#release,
	div#about-game {
		background:
			linear-gradient(rgba(239, 190, 198, 0.435), rgba(238, 218, 221, 0.331)),
			url("img/paper1.jpg") center/cover no-repeat;

		padding: 0.5rem 1rem;
	}

	#demo {
		position: relative;
		width: 100%;
		max-width: 650px;
		aspect-ratio: 16/9;
		overflow: hidden;
		border: 4px dashed rgb(246, 109, 130);
		margin: 1rem;

		iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}

	div.game-info {
		padding-bottom: 3rem;
		gap: 0.5rem;
		min-height: 0;

		#about-game {
			transform: rotate(1deg);
			flex-grow: 1;
			min-height: 0;
			overflow: scroll;
		}
	}

	div#release {
		transform: rotate(-2deg);
	}

	img.curtain {
		position: absolute;
		width: 20%;
		min-width: 150px;
		top: 0;
		z-index: -10;

		&.left {
			left: 0;
		}

		&.right {
			right: 0;
		}
	}

	.star {
		position: absolute;
		height: clamp(200px, 35vw, 400px);
		top: 0;
		z-index: -5;

		transform-origin: top center;
		animation: starWiggle linear infinite;
		animation-duration: 7s;

		&.a {
			animation-delay: 0s;
			left: 5vw;
			translate: 0 -5%;
		}

		&.b {
			animation-delay: -4s;
			left: 15vw;
			translate: 0 -35%;
		}

		&.c {
			animation-delay: -8s;
			right: 20vw;
			translate: 0 -55%;
		}

		&.d {
			animation-delay: -6s;
			right: 15vw;
		}

		&.e {
			animation-delay: -2s;
			right: 5vw;
			translate: 0 -15%;
		}
	}
}

@keyframes starWiggle {
	0% {
		transform: rotate(0);
	}

	5% {
		transform: rotate(-5deg);
	}

	10% {
		transform: rotate(5deg);
	}

	15% {
		transform: rotate(-3deg);
	}

	20%,
	100% {
		transform: rotate(0deg);
	}
}

#pitch {
	background-color: #90a1e6;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 0;
	justify-content: center;

	h2 {
		font-size: 3.5rem;
		text-align: center;
		text-decoration: dashed underline #0d549a;
		text-decoration-thickness: 4px;
		z-index: 10;
	}

	div.pitch {
		margin-left: auto;
		margin-right: auto;
		position: relative;
		width: 90%;
		max-width: 850px;
		z-index: 10;
	}

	.pitch-link {
		background:
			linear-gradient(rgba(230, 150, 162, 0.355), rgba(255, 182, 193, 0.25)),
			url("img/paper1.jpg") center/cover no-repeat;

		margin-top: 1rem;
		width: fit-content;
		padding: 0.5rem 1rem;
		transform: rotate(-2deg);
		box-shadow: 10px 10px 5px #02031e49;
		z-index: 10;

		a {
			font-size: 2rem;

			&:visited {
				color: #0d549a;
			}
		}

		&:hover {
			transform: translateY(-5px) scale(1.2);
			filter: brightness(1.1);
			box-shadow: 15px 25px 5px #02031e30;
		}
	}

	.decor {
		position: absolute;

		&.waves {
			bottom: 0;
			min-height: 5rem;
		}

		&.cloud {
			animation: cloudMove linear infinite;

			&.a {
				top: 7vh;
				animation-duration: 35s;
			}

			&.b {
				top: 30vh;
				transform: translateY(-50%);
				animation-duration: 60s;
			}

			&.c {
				top: 60vh;
				animation-duration: 50s;
			}
		}
	}
}

@keyframes cloudMove {
	from {
		transform: translatex(-100vw);
	}

	to {
		transform: translatex(100vw);
	}
}

#pre-pro {
	background:
		url("img/DarkSkyBackground.png") center/cover no-repeat;

	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 1.5rem;

	h2 {
		z-index: 10;
		color: whitesmoke;
		text-align: center;
		font-size: 2rem;
	}

	.content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		width: 95%;
		flex-grow: 1;
		overflow: scroll;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: fit-content;
			margin-bottom: 1rem;

			img,
			video {
				width: clamp(300px, 25vw, 450px);
				height: auto;
			}

			p.desc {
				color: whitesmoke;
			}
		}

		h2 {
			width: 100%;
		}
	}

	div:has(.star.a) {
		position: absolute;
		top: 11rem;
		left: -11.1rem;

		.a {
			transform: translate(1rem, 0rem);
		}

		.b {
			transform: translate(-6.5rem, -2rem);
		}

		.c {
			transform: translate(-3rem, 3rem);
		}
	}

	.star {
		position: absolute;
		width: 22rem;
		min-width: 250px;
		rotate: -30deg;
	}

	.d {
		bottom: 0;
		right: -1rem;
	}

	.e {
		bottom: -3rem;
		right: 1rem;
	}
}

#contact {
	/* background-color: #fe942d; */
	background:
		linear-gradient(rgba(230, 150, 162, 0.355), rgba(255, 182, 193, 0.25)),
		url("img/paper2.png") center/cover no-repeat;
	display: flex;
	flex-direction: column;
	align-items: center;

	padding-top: 15rem;
	padding-bottom: 7rem;
	justify-content: space-between;


	* {
		color: #02031E;
		font-size: larger;
	}

	h2 {
		font-size: 3rem;
		text-decoration: dashed underline #0d549a;
		text-decoration-thickness: 4px;
	}

	a {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1rem;
	}

	div.links {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		margin-top: -5rem;

		a {
			background:
				linear-gradient(rgba(230, 150, 162, 0.355), rgba(255, 182, 193, 0.25)),
				url("img/paper1.jpg") center/cover no-repeat;

			padding: 1rem;
			box-shadow: 10px 10px 5px #02031e49;

			&:nth-child(1) {
				transform: translate(-15px, -5px) rotate(-5deg);
			}

			&:nth-child(2) {
				transform: translateX(20px) rotate(3deg);
			}

			&:hover {
				transform: translateY(-5px) scale(1.2);
				filter: brightness(1.1);
				box-shadow: 15px 25px 5px #02031e30;
			}
		}

		.logo {
			height: 3rem;
		}
	}

	#copyright {
		color: #0d549a;
	}
}