@import "./reset.css";
@import "./base.css";
@import "./style.css";
@import "./btn.css";

h1 {
	font-family: "Zodiak";
	font-size: 5.625rem;
	text-align: center;
}

h2 {
	font-family: "Zodiak";
	font-size: 4.1875rem;
}

h3 {
	font-family: "Zodiak";
	font-size: 3.1875rem;
}

h4 {
	font-family: "Zodiak";
	font-size: 2.375rem;
}

h5 {
	font-family: "Zodiak";
	font-size: 1.75rem;
}

h6 {
	font-family: "Zodiak";
	font-size: 1.3125rem;
}

p {
	font-family: "Satoshi";
	font-weight: 700;
	font-size: 1rem;
	text-align: center;
}

a {
	font-family: "Satoshi";
	font-weight: 500;
	font-size: 1rem;
}

small {
	font-family: "Satoshi";
	font-weight: 500;
	font-size: 0.75rem;
}

html {
	background-color: var(--neutral);
	color: var(--neutral-content);
	font-size: 17px;
}

body {
	background-color: var(--neutral-content);
	color: var(--neutral);
	height: calc(100dvh - 2rem);
	padding: 1rem;
}

section {
	height: calc(100dvh - 2rem);
	border-radius: 1rem;
	padding: 1rem;
	background-color: var(--neutral);
	color: var(--neutral-content);

	display: flex;
	flex-direction: column;
}

/* make the size of font responsive */
@media (max-width: 768px) {
	h1 {
		font-size: 3.75rem;
	}

	h2 {
		font-size: 2.8125rem;
	}

	h3 {
		font-size: 2.125rem;
	}

	h4 {
		font-size: 1.5625rem;
	}

	h5 {
		font-size: 1.125rem;
	}

	h6 {
		font-size: 0.9375rem;
	}

	p {
		font-size: 0.875rem;
	}

	a {
		font-size: 0.875rem;
	}

	small {
		font-size: 0.625rem;
	}
}