@font-face {
	font-family: Squid;
	src: url(../fonts/Squid.ttf);
}
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;700&display=swap');

#story-modal {
	z-index: 100;
}

#whitepaper-modal {
	z-index: 100;
}

.modal-backdrop {
	height: 100%;
	width: 100%;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
}

.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	font-family: 'Outfit', sans-serif;
}

.row h1,
h2 {
	font-family: Squid;
	color: white !important;
}

.modal {
	height: auto;
	padding: 15px;
	min-height: 500px;
	height: 80%;
	width: 80%;
	min-width: 350px;
	background-color: rgb(40, 40, 40);
	color: white;
	border-radius: 10px;
	overflow-y: scroll;
}

.modal-close {
	height: 30px;
	width: 30px;
	cursor: pointer;
	font-size: 30px;
	/* color: hsl(230deg, 88%, 59%); */
	color: var(--primary-color);
}

ul > li {
	font-family: 'Outfit', sans-serif;
	padding: 5px;
	color: white;
}

.styled-table {
	border-collapse: collapse;
	margin: 10px 0;
	font-size: 0.9em;
	font-family: sans-serif;
	min-width: 300px;
	font-family: 'Outfit', sans-serif;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

.styled-table thead tr {
	background-color: var(--primary-color);
	color: #ffffff;
	text-align: left;
}

.styled-table th,
.styled-table td {
	padding: 12px 15px;
	color: white;
}

.styled-table tbody tr {
	border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
	background-color: #363636;
}

.styled-table tbody tr:last-of-type {
	border-bottom: 2px solid var(--primary-color);
}

.styled-table tbody tr.active-row {
	font-weight: bold;
	color: var(--primary-color);
}

.divider {
	border: 3px solid hsl(345deg 100% 47%);
	border-top: 0px;
	width: 80%;
	margin-top: 5px;
}

.whitelist-message {
	background-color: rgba(255, 255, 255, 0.7);
	border: 5px white solid;
	padding: 10px;
	border-radius: 20px;
}