:root {
    --main-background-color: #3E3E3E; /*Darker*/
    --main-foreground-color: #4C4C4C; /*Lighter*/
	--main-border-color: #BFBFBF;
	--soft-green: #86DA88;
	--soft-red: #DA8686;
}

html, body {
	margin: 0 0 0 0;
	width: 100%;
	height: 100%;
}

html, body, div, button, input, a {
	color: white;
	font-weight: bold;
    font-family: sans-serif;

	box-sizing: border-box;
}

span {
	white-space: nowrap;
}

a {
	text-decoration: none;
}

.background {
	border-radius: 15px;
	padding: 10px;
	background-color: var(--main-foreground-color);
}

.foreground {
	border-radius: 10px;
	padding: 10px;
	background-color: var(--main-background-color);
}

.fill {
	width: 100%;
	height: 100%;
}

.grid-row {
	width: 100%;
	display: grid;
	grid-auto-flow: column;

	column-gap: 10px;
}

.grid-column {
	height: 100%;
	display: grid;
	grid-auto-flow: row;

	row-gap: 10px;
}

.text-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#overlay-container {
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	position: relative;
	display: grid;

	display: flex;
    flex-direction: column;
}

#overlay {
	position: absolute;
	visibility: hidden;
	background-color: rgba(62,62,62,0.95);
	z-index: 10;

	padding: 20px;

	top: 0px;
	left: 0px;
}

/*Scrollbar*/
/* width */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}