*, *::before, *::after {box-sizing: border-box;}
* { margin: 0; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
body{font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;}

:root{
	--pSize: 64px
}

 .player {
 	position: absolute;
 	width: var(--pSize);
 	height: var(--pSize);
 	background-color: blue;
 	border-radius: 50%;
	transition: all 300ms;
	display: flex;
	align-items: center;
	justify-content:center;
	color: white;
 }
.add-player{
	position: absolute;
	top: 0;
	left: 0;
	padding: 2rem;
}
canvas {
	position: absolute;
	top: 0;
	left: 0;
}