@charset 'UTF-8';

:root {
	--body: #1a2b63;
	--background: #cde6ff;
}

body {
	margin: 0;
	padding: 0;
	word-wrap: break-word;
	word-break: keep-all;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard Variable', 'Helvetica Neue', Roboto, Helvetica, 'Noboto Neue', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
	font-size: normal;
	line-height: 1.5;
	color: var(--body);
	background-color: var(--background);
}

/* custom */

body {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
}

@font-face {
	font-family: 'Pretendard GOV Variable Subset';
	font-weight: 45 920;
	font-style: normal;
	font-display: block;
	src: url('../asset/PretendardGOVVariable.subset.woff2') format('woff2-variations');
}

#pretendard > .variable {
	font-family: 'Pretendard GOV Variable Subset';
	will-change: scroll-position;
	font-size: 10vw;
}

#pretendard > .variable > div > span {
	animation: variable-loop 4s infinite both;
	animation-delay: var(--delay);
	text-align: center;

	--delay: calc((var(--variable-index) + 1) * 0.15s);
}

@keyframes variable-loop {
	0% {
		font-weight: 45;
	}

	50% {
		font-weight: 930;
	}

	100% {
		font-weight: 45;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--body: #cde6ff;
		--background: #1a2b63;
	}
}