:root {
	--text-color: #0044ff;
	--bg-color: rgb(243, 244, 255);
	--hover-color: #111111;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

body {
	background-color: var(--bg-color);
	background-image: url("./src/background.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16rem auto;
}

summary {
	list-style: none;
	cursor: pointer;
}

summary::-webkit-details-marker {
	display: none;
}

details summary {
	line-height: 1.2;
}

details p {
	margin-top: 0.5rem;
	margin-bottom: 0;
	cursor: pointer;
}

.title-section {
	font-family: "p22-operina-pro", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: var(--text-color);
}

.title-left,
.title-right {
	position: fixed;
}

.title-left span,
.title-right span {
	position: relative;
	font-size: 20rem;
}

.title-left {
	top: -3rem;
	left: 4.5rem;
}

.title-1 {
	top: -10rem;
	left: 0rem;
	font-feature-settings: "salt" 2;
}

.title-2 {
	top: -8.5rem;
	left: 0rem;
	font-feature-settings: "salt" 2;
}

.title-3 {
	top: -6rem;
	left: 0rem;
	font-feature-settings: "salt" 6;
}

.title-4 {
	top: -10.5rem;
	left: -5.5rem;
	font-feature-settings: "salt" 1;
}

.title-5 {
	top: -9.5rem;
	left: -5.2rem;
	font-feature-settings: "salt" 2;
}

.title-6 {
	top: -8rem;
	left: -5.3rem;
	font-feature-settings: "salt" 2;
}

.title-7 {
	top: -10rem;
	left: -5.1rem;
	font-feature-settings: "salt" 5;
}

.title-right {
	right: -3rem;
	bottom: -23rem;
}

.title-8 {
	top: -10rem;
	left: -4rem;
	font-feature-settings: "salt" 4;
}

.title-9 {
	top: -12rem;
	left: -4.6rem;
	font-feature-settings: "salt" 3;
}

.title-10 {
	top: -12rem;
	left: -4.6rem;
	font-feature-settings: "salt" 3;
}

.title-11 {
	top: -12rem;
	left: -4.6rem;
	font-feature-settings: "salt" 3;
}

.nav {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 70rem;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	gap: 3rem;
	transform: translate(-50%, -50%) rotate(-45deg);
	color: var(--text-color);
	font-family: "agahnsangsoo2012", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 2rem;
	text-decoration: none;
}

.nav details:hover {
	color: var(--hover-color);
	cursor: pointer;
}

.nav-text {
	width: 30rem;
	line-height: 1.4;
	word-break: keep-all;
	overflow-wrap: break-word;
}

@media (max-width: 767px) {
	.title-left,
	.title-right {
		position: relative;
	}

	.title-left {
		top: -2.5rem;
		left: 2.5rem;
		width: auto;
	}

	.title-right {
		right: -16rem;
		bottom: -6.5rem;
	}

	.title-left span,
	.title-right span {
		font-size: 12rem;
	}

	.title-1 {
		top: -6rem;
		left: 0.2rem;
	}

	.title-2 {
		top: -5.1rem;
		left: 0.1rem;
	}

	.title-3 {
		top: -3.6rem;
	}

	.title-4 {
		top: -6.3rem;
		left: -3.2rem;
	}

	.title-5 {
		top: -5.7rem;
		left: -3.1rem;
	}

	.title-6 {
		top: -4.8rem;
		left: -3.2rem;
	}

	.title-7 {
		top: -6rem;
		left: -3.1rem;
	}

	.title-8 {
		top: -6rem;
		left: -2.4rem;
	}

	.title-9,
	.title-10,
	.title-11 {
		top: -7.2rem;
		left: -2.76rem;
	}

	.nav {
		width: 42rem;
		gap: 1.5rem;
		font-size: 1.7rem;
		transform: translate(-50%, -50%) rotate(-60deg) scale(1);
	}

	.nav details:hover {
		color: var(--text-color);
	}

	.nav details:active {
		color: var(--hover-color);
	}

	.nav-text {
		width: 28rem;
	}
}