:root {
	--vocab-background: white;
	--font-color: black;

	--star-border: blue;
	--star-background: rgb(62, 35, 216);

	--term-type1: #052d55;
	--term-type2: #2e0b5a;
	--term-type3: #1a857c;
}

/* @media (prefers-color-scheme: dark) {
	:root {
		--vocab-background: rgb(31, 31, 31);
		--font-color: white;

		--star-border: blue;
		--star-background: rgb(129, 76, 216);

		--term-type1: #3a81c4;
		--term-type2: #a940cc;
		--term-type3: #21b3a6c0;
	}
} */

body {
	margin: 0;
	font-size: 1.125rem;
	font-family: 'Questrial', sans-serif;
	line-height: 1.6;

	display: flow-root;

	background-color: #1f0a71;
	background-image:
		radial-gradient(ellipse at 15% 20%, #9cabf750 0%, transparent 70%),
		radial-gradient(circle at 45% 10%, #120fbb60 0%, transparent 50%),
		radial-gradient(circle at 75% 100%, #441ace5b 0%, transparent 25%),
		radial-gradient(circle at 100% 0%, #a621d39c 0%, transparent 61%),
		radial-gradient(ellipse at 110% 55%, #ff33d37c 0%, transparent 61%),
		radial-gradient(ellipse at 65% 100%, #481bceab 0%, transparent 40%),
		radial-gradient(circle at 25% 95%, #440a5f 0%, transparent 75%),
		linear-gradient(135deg, #c023ce59 0%, transparent 100%);
	background-size: 100vw 100vh;
	background-repeat: no-repeat;
}

h1 {
	margin: 0;
	text-transform: uppercase;
}

a {
	color: unset;
	text-decoration: none;
}

.frostButton {
	color: white;
	border: 0;
	background-color: rgba(255, 255, 255, .1);
	box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}

.starButton {
	display: block;
	background-color: transparent;
	border: 2px solid var(--star-border);
	border-radius: 100%;
	padding: 0.5rem;
}

.starButton[data-stared] {
	background-color: var(--star-background);
}

@keyframes rotateSpinner {
	from {
		/* background-color: red; */
		transform: rotate(0deg);
	}

	to {
		/* background-color: yellow; */
		transform: rotate(360deg);
	}
}

.spinner {
	width: 2rem;
	height: 2rem;
	background-color: transparent;
	border: .1rem solid aquamarine;
	border-top-left-radius: 0;
	border-top-right-radius: 1rem;
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 0;

	margin: 1rem;

	animation-name: rotateSpinner;
	animation-duration: 2s;
	/* animation-direction: alternate-reverse; */
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}