/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*                General Style                 */
/*~ ------------------------------------------ ~*/

/*  Aplicable for all   */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Evita scrollbars */
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
}
/**/

/* CLASSES */
.hide { display: none; }
.makeme-row { flex-direction: row; }
/**/
/*  -----------------   */

/* PONG */
#game {
	display: flex;
	flex-direction: row;

	align-items: center;
	justify-content: center;

	gap: 22rem;

	background-color: black;

	height: 100%;
	width: 100%;
}


/* Sliders ===> */
.gmSlider {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;

	touch-action: none;
	background: rgba(255, 243, 194, 0.35);
	border-radius: 20px;
	position: absolute;
	z-index: 20;

	width: 150px;
	height: 35px;
}

/* Track */
.gmSlider::-webkit-slider-runnable-track {
	height: 35px;
	border-radius: 22px;
}
.gmSlider::-moz-range-track {
	height: 35px;
	border-radius: 22px;
}

/* Thumb */
.gmSlider::-webkit-slider-thumb {
    appearance: none;
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.35);
    border-radius: 50%;
    border: 3px solid #aaa;
}
.gmSlider::-moz-range-thumb {
    appearance: none;
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.35);
    border-radius: 50%;
    border: 3px solid #aaa;
}

/*  -----   */
#sliderL {
	left: -35px;
	top: 50%;
	transform-origin: center;
	transform: translateY(-50%) rotate(90deg) scale(1.7);
}
#sliderR{
	right: -35px;
	top: 50%;
	transform-origin: center;
	transform: translateY(-50%) rotate(90deg) scale(1.7);
}
/***/

canvas
{
	background-color: black;
	display: block;
	box-shadow: 0 0 20px lightgray;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/