html
{
	--red: #c01c28;
	--black: #241f31;
	--white: #f6f5f4;
	--gray: #c0bfbc;

	--red-win-bg: rgba(165,29,45, 0.20);
	--dark-red: #a51d2d;
	--dark-gray: #9a9996;
	--darker-red: #5C000B;
}

button:hover
{
	cursor: pointer;
}

body
{
	margin: 0;
	padding: 0 0 2rem 0;
	border: 0;
	background-color: var(--black);
	color: var(--white);
	font-family: 'Tilt Warp', cursive;

	animation: background-color 300ms ease-out;
}

.bigTitleContainer
{
	background-color: var(--red);
	height: 10rem;
	margin: 0 0.5rem 1.5rem 0.5rem;
	border-radius: 0 0 1rem 1rem;
}

.bigTitleText
{
	font-family: 'Tilt Warp', cursive;
	font-size: 3.5rem;
	line-height: 10rem;
	text-align: center;
	color: var(--white);
}

.redTitleText
{
	font-family: 'Tilt Warp', cursive;
	font-size: 1.5rem;
	color: var(--white);
	text-align: center;

	background-color: var(--red);
	border-radius: 1rem;
	padding: 0.4rem;
	width: 40ch;
	max-width: 90vw;
	margin: 0 auto;
}

section
{
	padding: 0.5rem;
}

.loadingCard
{
	height: 5rem;
	animation: speen 1.5s linear infinite;
}

@keyframes speen
{
	0%
	{
		transform: rotateZ(0deg);
	}

	100%
	{
		transform: rotateZ(360deg);
	}
}

.menuContent
{
	text-align: center;
}

.menuContent p
{
	font-family: 'Tilt Warp', cursive;
	font-size: 1rem;
	color: var(--white);
}

.menuContent input
{
	text-align: center;
	font-size: 1rem;
	padding: 0.3rem;
	border-radius: 0.4rem;
	border: 0.2rem solid var(--red);
	background-color: var(--black);
	color: var(--white);
	font-family: 'Tilt Warp', cursive;
}

.menuContent input:hover,
.menuContent input:focus
{
	background-color: var(--red);
	outline: none;
}

button
{
	font-size: 1rem;
	font-family: 'Tilt Warp', cursive;
	color: white;
	background-color: var(--red);
	padding: 0.4rem;
	margin: 0.5rem;
	border: 0.2rem solid var(--red);
	border-radius: 0.4rem;
}

button:hover,
button:focus
{
	border-color: var(--white);
	cursor: pointer;
}

button:disabled
{
	background-color: var(--gray);
	border-color: var(--dark-gray);
	cursor: not-allowed;
}

.playersList
{
	padding: 0.5rem;
	width: 45ch;
	margin: 0 auto;
}

.playerInTheList
{
	background-color: var(--red);
	font-family: 'Tilt Warp', cursive;
	padding: 0.4rem;
	border-radius: 0.4rem;
	margin: 0.4rem 0;
}

.btnFloatRight
{
	float: right;
	font-family: 'Tilt Warp', cursive;
	font-size: 0.8rem;
	border: 0;
	margin: 0;
	padding: 0;
	background-color: transparent;
	color: var(--white);
}

.btnFloatRight:hover
{
	background-color: var(--black);
	color: var(--red);
	border-radius: 0.4rem;
	cursor: pointer;
}

.leftAlign
{
	text-align: left;
}

.centerAlign
{
	text-align: center;
}

.remPadding
{
	padding: 1rem;
}