@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes fadeInWithDelay {
	0% { opacity: 0; }
	20% { opacity: 0; }
	100% { opacity: 1; }
}

body {
	background-color: black;
	color: red;
	font-family: 'Cinzel', serif;	
}

.clickable:hover {
	filter: invert(1);
}
.selected {
	display: visible;
}
.not-selected {
	display: none;
}
.fade-in {
	animation: 3s fadeIn;
}

#header a {
	color: red;
}
#resetText {
  opacity: 0;
  transition: opacity 1s ease-in-out 0.5s;
}
#resetButton:hover > * {
  opacity: 1;
}
#nav, #footer {
	background-color: darkred;
}
#content {
	background-color: black;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}
#footer img {
	filter: invert(1);
}

#player-select {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#characters {
	color: darkgray;
	background-color: #284e50;
	display: grid;
	place-items: center;
	margin: 0 10%;
}
.character {
	padding: 1em;
	width: min-content;
}
#player-select h2 {
	margin-top: 0.5em;
}
#stats-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 1em;
}
#start-button {
    animation: 3s fadeInWithDelay;
    font-family: 'Cinzel', serif;
    font-size: 1.5em;
    width: fit-content;
    align-self: center;
    padding: 1em;
    background-color: goldenrod;
	border: none;
}

#info {
	display: flex;
	justify-content: center;
}
#info table, #flavortext {
	font-family: 'Texturina', serif;
	font-size: 1.25em;
}
th {
	text-align: right;
}
td {
	text-align: left;
	padding: 0 0.5em;
}
#info img {
	object-fit: contain;
}
#stats {
	font-size: 1.5em;
	display: grid;
	align-items: center;
	justify-content: stretch;
}
.stat-interface {
	background-color: gray;
	color: black;
}
.ticket-mask {
	margin: 0.5em;
	--mask: radial-gradient(1em at 1em 1em,#0000 98%,#000) -1em -1em;
	-webkit-mask: var(--mask);
	mask: var(--mask);
}
ol {
	list-style: none;
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 0 0.5em 0.5em 0.5em;
}
li {
	padding: 0.5em 0.25em;
}
.button, .current, .original {
	position: relative;
	top: 0;
	z-index: 2;
}
.diamond::before {
	content: '';
	position: absolute;
	left: 0;
	top: -0.35em;
	z-index: -1;
	width: 0;
	height: 0;
	border: 0.5em solid transparent;
	border-bottom: 1em solid red;
}
.diamond::after {
	content: '';
	position: absolute;
	left: 0;
	z-index: -1;
	width: 0;
	height: 0;
	border: 0.5em solid transparent;
	border-top: 1em solid red;
}
.button {
	font-weight: bold;
}
.button::before {
	border-bottom-color: darkred;
}
.button::after {
	border-top-color: darkred;
}
.current::before {
	border-bottom-color: seagreen;
}
.current::after {
	border-top-color: seagreen;
}
.original::before {
	border-bottom-color: dimgray;
}
.original::after {
	border-top-color: dimgray;
}
#flavortext {
	text-align: left;
	margin: 2.5% 10%;
}