:root {
	--clr-red-xlight: hsl(6, 56%, 95%);
	--clr-red-light: #ae3d31;
	--clr-red: #94352c;
	--clr-red-dark: #481d17;
	--clr-cyan: #41a8b9;
	--clr-grey: #828282;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: Bahnschrift, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
		'Helvetica Neue', sans-serif;
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

input[type='radio'] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

a,
button,
input + label {
	padding: 0.5rem;
	padding-inline: 1rem;
	background: none;
	border: none;
	color: var(--clr-red);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

input:checked + label {
	background-color: var(--clr-red);
	color: white;
}

a[disabled],
button[disabled],
input[disabled] + label {
	color: var(--clr-grey);
	cursor: unset;
}

input[type='checkbox'] {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

@media (hover: hover) {
	a:not([disabled]):hover,
	button:not([disabled]):hover {
		background-color: var(--clr-red);
		color: white;
	}

	input + label:hover {
		outline: 1px solid var(--clr-red);
		outline-offset: -1px;
	}
}