@import url('variables.css');
@import url('fonts.css');

* {
	box-sizing: border-box;
}

html {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

body {
	font-family: CaslonAntique;
	font-size: 18pt;
	color: var(--grey-900);
	background-color: var(--grey-300);
	margin: 1rem;
}

h1, h2 {
	text-align: center;
	padding: 0;
	margin: 0;
}

h1 {
	font-family: Blackmoor;
	font-size: clamp(4rem, 20vw, 10rem);
	margin-bottom: 2rem;
	font-weight: normal;
	color: var(--grey-950);
	text-shadow: var(--text-shadow-1);
}
h2 {
	font-size: clamp(2rem, 8vw, 3rem);
	font-style: italic;
	text-shadow: var(--text-shadow);
	letter-spacing: 0.1rem;
}

strong {
	font-variant: small-caps;
}

main {
	max-width: 60rem;
	margin: 0 auto;
}

@keyframes glow {
	0% {
		text-shadow: var(--text-shadow-frame-2);
	}
	50% {
		text-shadow: var(--text-shadow-frame-4);
	}
	100% {
		text-shadow: var(--text-shadow-frame-2);
	}
}