body{
	font-family: 'Cairo', sans-serif;
	background: linear-gradient(to bottom, #b5179e, #7209b7);
}

.grid{
	display: grid;
	grid: repeat(4, auto) / repeat(8, 10%);
	grid-gap: 10px;
	justify-content: center;
}

.grid__cell{
	aspect-ratio: 1/1;
	border: 2px solid white;
}

.character{
	position: relative;
	width: 50%;
}

.cursor-pointer{
	cursor: pointer;
}

.character:after{
	content: '';
	padding-bottom: 100%;
	display: inline-block;
}

.character__content{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: blue;
}

.btn{
	color: white;
	border: 5px solid white;
	border-radius: 25px;
	padding: 10px 20px;
	box-shadow: 0 2px 2px 2px #00000088;
}

.btn:hover{
	color: white;
	box-shadow: 0 1px 1px 1px #00000088;
}

.btn:focus{
	box-shadow: 0 1px 1px 1px #00000088;
}

.btn-play-random, .btn-yellow{
	background: #fb8500;
}

.btn-play-random:hover, .btn-yellow:hover{
	background: #E07800;
}

.btn-create-room, .btn-red{
	background: #e63946;
}

.btn-create-room:hover, .btn-red:hover{
	background: #DA1B2B;
}

.btn-join-room, .btn-blue{
	background: #00b4d8;
}

.btn-join-room:hover, .btn-blue:hover{
	background: #0099B8;
}

.btn-grey{
	background: #6d6875;
}

.btn-grey:hover{
	background: #5B5661;
}

input{
	padding: 10px;
	border-radius: 10px;
	border: none;
	outline: none;
}

.page{
	position: absolute;
	left: 0px;
	top: 0;
	width: 100%;
	height: 100vh;
	opacity: 0;
	transform: scale(0);
	/*transition: opacity 1s, transform 1s;*/
	
}

.page.active{
	opacity: 1;
	transform: scale(1);
	transition: opacity 1s, transform 1s;
}

.tltip{
	position: relative;
}

.tltip__text{
	background: #00000088;
	border-radius: 10px;
	color: white;
	font-size: 16px;
	position: absolute;
	left: 0;
	top: 0;
	padding: 4px 8px;
	opacity: 0;
}


.tltip__text.visible{
	opacity: 1;
	transition: opacity 1s, visibility 1s;
}