/* 1. Use a more-intuitive box-sizing model. */
*, *::before, *::after {
	box-sizing: border-box;
}

/* 2. Remove default margin */
* {
	margin: 0;
}

/* Typographic tweaks!
3. Add accessible line-height
4. Improve text rendering */
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

/* 6. Remove built-in form typography styles */
input, button, textarea, select {
	font: inherit;
}

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

/* 8. Create a root stacking context */
	#root, #__next {
	isolation: isolate;
}

@font-face {
  font-family: "old-english";
  src: url("/old-english-five.regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
	color: whitesmoke;
	background-color: #141014;
}
* {
	font-family: 'old-english', 'courier';
}

h1 {
	color: whitesmoke;
	font-family: 'old-english', 'courier';
	text-align: center;
}

body > div {
	margin: 10%;
}

.chain {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin-top: 1em;
}

.term {
	font-size: 1.4em;
	color: whitesmoke;
}

.rel {
	font-size: 0.9em;
	color: #a89cc8;
	font-style: italic;
}

.burst {
	animation: burst 0.4s cubic-bezier(0.17, 0.67, 0.3, 1.6) both;
}

@keyframes burst {
	0% {
		opacity: 0;
		transform: scale(0.2);
		filter: blur(4px);
	}
	60% {
		transform: scale(1.15);
	}
	100% {
		opacity: 1;
		transform: scale(1);
		filter: blur(0);
	}
}

.score-wrap {
	margin-top: 1.2em;
	font-size: 2em;
	text-align: center;
}

.score-num {
	color: #e8c468;
	font-size: 1.4em;
}