:root {
	--gray-color: rgb(230, 230, 230);
	--basic-gray: rgb(135, 135, 135);
	--thrill-6-bg-color: rgba(221, 108, 108, 0.75);
	--thrill-6-border-color: rgba(221, 108, 108, 0.85);
	--thrill-5-bg-color: rgba(224, 159, 89, 0.75);
	--thrill-5-border-color: rgba(224, 159, 89, 0.85);
	--thrill-4-bg-color: rgba(224, 222, 89, 0.75);
	--thrill-4-border-color: rgba(224, 222, 89, 0.85);
	--thrill-3-bg-color: rgba(150, 224, 89, 0.75);
	--thrill-3-border-color: rgba(150, 224, 89, 0.85);
	--thrill-2-bg-color: rgba(89, 192, 224, 0.75);
	--thrill-2-border-color: rgba(89, 192, 224, 0.85);
	--thrill-1-bg-color: rgba(89, 112, 224, 0.75);
	--thrill-1-border-color: rgba(89, 112, 224, 0.85);
	--thrill-0-bg-color: rgba(132, 89, 224, 0.75);
	--thrill-0-border-color: rgba(132, 89, 224, 0.85);
	--thrill-sub-bg-color: rgba(183, 183, 183, 0.75);
	--thrill-sub-border-color: rgba(183, 183, 183, 0.85);
}

body { 
	font-family: monospace;
}

header {
	position: relative;
	display: block;
	padding:  20px;
	font-size: 1.75rem;
	font-weight: 400;
	text-align: center;
}

#games {
	display: flex;
    align-content: space-between;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.game {
	position: relative;
	padding:  10px;
	border: 1px solid var(--gray-color);
	border-radius: 5px;
	display: flex;
    flex-wrap: nowrap;
    align-content: space-between;
    flex-direction: row;
    align-items: flex-start;
    max-width: 300px;
}

.title {
	font-size: 1.2rem;
	font-weight: 500;
}

.game_metadata {
	display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.thrill_container {
	display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap:  10px;
    padding: 10px;
}

.thrill_title {
	display: flex;
    flex-direction: row;
    font-size: 0.75rem;
    font-weight: 300;
    font-family: monospace;
}

.thrill_index {
	display: flex;
    flex-direction: row;
    font-size: 1.5rem;
    font-weight: 500;
    font-family: monospace;
}

.thrill-6 {
	background-color: var(--thrill-6-bg-color);
	border: 2px solid var(--thrill-6-border-color);
}

.thrill-5 {
	background-color: var(--thrill-5-bg-color);
	border: 2px solid var(--thrill-5-border-color);
}

.thrill-4 {
	background-color: var(--thrill-4-bg-color);
	border: 2px solid var(--thrill-4-border-color);
}

.thrill-3 {
	background-color: var(--thrill-3-bg-color);
	border: 2px solid var(--thrill-3-border-color);
}

.thrill-2 {
	background-color: var(--thrill-2-bg-color);
	border: 2px solid var(--thrill-2-border-color);
}

.thrill-1 {
	background-color: var(--thrill-1-bg-color);
	border: 2px solid var(--thrill-1-border-color);
}

.thrill-0 {
	background-color: var(--thrill-0-bg-color);
	border: 2px solid var(--thrill-0-border-color);
}

.thrill-sub {
	background-color: var(--thrill-sub-bg-color);
	border: 2px solid var(--thrill-sub-border-color);
}

.game_status {
	position:  absolute;
	bottom: 0;
	left: 0;
	padding: 3px;
	border-radius: 0 5px 0 0;
}