:root {
	--color-accent-blue: #007AFF;
	--color-accent-red: #DB1111;
	--color-accent-green: #3A9D3E;
	--color-accent-yellow: #FFD30A;
	--color-accent-orange: #FF9F21;
	--color-accent-purple: #B90BFF;
	--color-accent-cyan: #13FFD6;
	--color-accent-indigo: #FFD30A;

	--color-background-primary: #0a0a0a;
	--color-background-secondary: #1f1f1f;

	--color-text-primary: #f5f5f7;
	--color-text-secondary: #86868b;
	--color-text-disabled: #52535A;

	/* contents font sizes */
	--text-title: 36px;
	--text-subtitle: 30px;
	--text-header: 24px;
	--text-subheader: 20px;
	--text-body: 17px;
	--text-caption: 15px;

	/* ui font sizes */
	--text-ui: 20px;
}

* {
	box-sizing: border-box;
}

html {
	width: 100%;
	background-color: var(--color-background-primary);
}

body {
	max-width: 720px;
	width: 100%;
	height: 100%;
	font-family: 'Pretendard';
	color: var(--color-text-primary);
	display: flex;
	flex-direction: column;
	padding: 16px;
	margin: 0 auto;
}

p {
	font-size: var(--text-body);
	font-weight: 400;
	color: var(--color-text-primary);
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
	text-transform: none;
	display: block;
	text-decoration: none;
	color: inherit;
}

img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	margin: 0 auto;
	border-radius: 64px;
}