.panel-online
{
	text-align: center;
	padding: 1em;
}

.panel-online h1
{
	text-transform: uppercase;
	font-weight: 800;
	font-size: 2em;
}

.panel h3
{
	font-size: .9em;
	color: #bbb;
}

.panel-online .decription-text
{
	margin: 1em 0;
	padding: 0 20%;
}

.panel-online .small-text
{
	font-size: .8em;
	color: #999;
	margin-bottom: 1em;
}

.big-button
{
	padding: .5em;
	color: #fff;
	text-shadow: none;
	border-radius: .5em;
	font-size: 1.5em;
	text-transform: uppercase;
	font-weight: bold;
	display: inline-block;
	width: 80%;
}

.button-play
{
	background-color: #6b6a;
}

.button-play:hover
{
	background-color: #6d6;
}

.button-join
{
	background-color: #66ba;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.button-join:hover
{
	background-color: #66d;
}

.panel-peculiarities
{
	margin-top: 1em;
	padding: 1em;
	text-align: center;
}

.panel-peculiarities-container
{
	width: 100%;
	display: flex;
	margin-top: 1em;
}

.panel-peculiarity
{
	padding: .5em;
	position: relative;
	background-color: #0004;
	height: 60vh;
	width: 100%;
	background-size: cover;
	background-position: center;
}

.panel-peculiarity h2
{
	font-size: 1.5em;
}

.panel-peculiarity p
{
	color: #fffd;
	font-size: .9em;
	position: absolute;
	bottom: 1em;
	right: 1em;
	left: 1em;
}

.panel-peculiarity:not(:last-child)
{
	margin-right: 1em;
}

.panel-buttons
{
	display: flex;
	flex-direction: row;
	margin: 2em 0;
	justify-content: center;
}

.panel-button
{
	width: 20%;
}