:root {
	--color-black: #000022;
	--color-black-light1: #00003D;
	--color-black-light2: #000052;
	--color-white-light: hsl(45, 100%, 91%);
	--color-white: #FFFFFF;
	--color-grey: #9595B1;
}

@media (prefers-color-scheme: dark){
	:root {
		--color-black: #FFFFFF;
		--color-black-light1: #FCF9ED;
		--color-black-light2: #F9F3DC;
		--color-white-light: #131316;
		--color-white: #05050F;
		--color-grey: #9595B1;
	}
}

body {
	min-height: 100vh;
	background-color: var(--color-white-light);
	color: var(--color-black);
}

.card {
	background-color: var(--color-white);
	border-radius: 4px;

	padding: 2rem;
	border: 1px solid var(--color-grey);
}

button, .button{
	border-color: var(--color-grey);
	color: var(--color-black);
}

button:hover, .button:hover {
	border-color: var(--color-grey);
	color: var(--color-grey);
}


.small{
	font-size: .8em;
}

.colorblind a{
	color: var(--color-grey);
}

.colorblind a:hover{
	color: var(--color-black-light2);
}

.display-center{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

ul.no-buttons li{
	list-style-type: none;
	padding: 0;
	margin: 0;
}