/* html { box-sizing: border-box; }
*, ::before, ::after { box-sizing: inherit; } */
html,
body {
	height: 100%;
}

body {
	font-family: 'Open Sans', sans-serif;
	background-color: rgb(162, 11, 162);
	display: flex;
	justify-content: center;
	text-align: center;
	margin: auto;
	width: 100%;
	flex-direction: column;
}

h1 {
	text-align: center;
	margin-top: 5rem;
	font-weight: 600;
}

.playerboard {
	display: flex;
	justify-content: center;
	text-align: center;
	width: 50%;
	height: 100%;
}

#playerboardP1 {
	border-radius: 20px 0px 0px 20px;
	background-color: white;
}

#playerboardP2 {
	background-color: rgb(203, 194, 194);
	border-radius: 0px 20px 20px 0px;
}

.playericon {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	color: black;
	font-size: 30px;
	width: 100%;
}

.playerBoards {
	display: flex;
	flex-direction: row;
	flex-grow: 10;
}

#scoreP1,
#scoreP0 {
	margin-top: 50px;
	font-size: 50px;
}

#body2 {
	display: flex;
	justify-content: start;
	flex-direction: column;
	text-align: center;
	color: black;
	width: 100%;
	height: 100%;
}

#totalP1,
#totalP0 {
	width: 100px;
	height: 70px;
	background-color: rgb(175, 112, 123);
	border-radius: 20px;
	display: flex;
	justify-content: center;
	text-align: center;
	font-size: 40px;
	border: 1px solid black;
}

#topMenu {
	position: sticky;
	background-color: rgb(100, 100, 126);
	color: rgb(0, 0, 0);
	height: 50px;
	width: 100%;
	padding-top: 10px;
	font-size: 25px;
	font-weight: 1000;
	z-index: 1;
}

#buttons {
	display: flex;
	position: absolute;
	flex-direction: column;
	bottom: 10px;
	width: 100%;
	z-index: 0;
}

.button {
	cursor: pointer;
	position: relative;
	font-size: 30px;
	background-color: rgb(102, 102, 102);
	border-radius: 10px;
	border: solid rgb(73, 70, 70) 2px;
	margin-top: 20px;

	width: 180px;
	left: calc(50% - 90px);
	font-size: 20px;
}

.button:hover {
	background-color: rgb(182, 170, 170);
	border: none;
}

#kostka {
	font-size: 30px;
}

#pointsTxtP1,
#pointsTxtP0 {
	position: relative;
	top: 70px;
	font-size: 15px;
}

#new {
	position: absolute;
	border-radius: 20px;
	height: 80px;
	top: 40%;
	z-index: 1;
	font-size: 50px;
	background-color: rgb(125, 125, 125);
	border-radius: 30px;
	border: solid black 5px;
	left: calc(50% - 145px);
}

#new:hover {
	background-color: rgb(73, 72, 72);
	color: rgb(48, 43, 43);
	border: none;
}

#pravidla {
	position: absolute;
	font-size: 30px;
	width: 100%;
	height: 80%;
	top: 60%;
	border: solid black 5px;
	background-color: rgb(27, 31, 71);
	padding: 10px;
}

#winner {
	position: absolute;
	font-size: 40px;
	top: 10%;
	width: 100%;
	font-weight: 700;
	background-color: rgb(80, 82, 70);
}

.player-name {
	position: relative;
	top: 5%;
}