style.css

:root {
	--accent: #40c98d;
	--background: #27394a;
	--white: #FFFFFF;
	--black: #000000;
	--fontSize: 14px;
}

body
{
	font-family: sans-serif;
	color: var(--accent);
	background-color: var(--background);
	padding: 3rem;
}

textarea,
input:not([type=radio]):not([type=checkbox]) {
	padding: 1rem 2rem;
	min-width: 20vh;
}

select  {
	padding: .5rem 1rem;
	min-width: 15vh;
}

p {
	white-space: pre-line;
}

a:visited {
	color: var(--white);
}

.white {
	color: var(--white);
}

.capitalize {
	text-transform: capitalize;
}

.button {
	background: var(--accent);
	padding: 1rem 2rem;
	border: none;
	font-size: var(--fontSize);
	text-decoration: none;
}

.block {
	display: block;
}

.margin-left-15 {
	margin-left: 15px;
}

.announcement,
.footer {
	left: 0;
	background: var(--black);
    width: 100%;
    margin: 0;
    padding: 1rem 0.5rem;
    text-align: center;
}

.cards {
	display: grid;
    gap: 10em;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto;
    text-align: center;
}

.card {
	background: var(--white);
    padding: 5rem;
	border-radius: 25px;
}

.yes,
.no {
	position: relative;
}

.yes span,
.no span {
	position: relative;
	display: none;
}

.yes:before {
	content: '\f00c';
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	font-family: 'FontAwesome'
}

.no:before {
	content: '\f00d';
    color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'FontAwesome';
}

.table-columns {
	padding: 1rem;
	font-size: 20px;
	font-weight: bold;
	background-color: var(--black);
	cursor: pointer
}

.table-columns.active {
	background-color: var(--accent);
    color: var(--white);
}

.game-data {
	padding: 15px 10px;
    vertical-align: middle;
    background-color: rgba(0,0,0,.5);
}

.arrow {
	position: relative;
	padding-right: 2rem;
	padding-left: 1rem;
}

.arrow.asc:after {
	content: '\f077';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'FontAwesome';
	font-size: 12px;
}

.arrow.desc:after {
	content: '\f078';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'FontAwesome';
	font-size: 12px;
}