body{
	margin: 0;
	padding: 0;
}
.content{
    width:100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
	background-color: #684d32;
}
.header,.footer{
    border: 1px solid black;
    display: flex;
    min-height: fit-content;
    word-wrap:break-word;
	background-color: white;
}
.name{
    text-align: center;
    min-height: max-content;
    font-size: 40px;
    padding: 2%;
	background-color: white;
}

.player{
    display: flex;
    gap: 10px;    
    flex-direction: column;
	background-color: white;
}
.player--item{
    border: 2px solid black;
    height: max-content;
    grid-template-columns: 3fr 1fr 1fr;
	background-color: white;
}
.top,.singles,.score--indicator,.score--locked,.bottom,.combinations,.totals,.all--totals{
    display: grid;
}


.singles,.top--item{
    grid-template-rows: repeat(9,1fr);
}
.bottom--item{
    grid-template-rows: repeat(8,1fr);
} 

.totals--item{
    grid-template-rows: repeat(1,1fr);
}  
.singles,.combinations,.all--totals{
    
    padding-left: 5px;
    font-size: medium;
    font-weight:bold;
    border-right: 1px solid black;
}
.score--indicator{
    background-color: #7cf9d6;
}

.scoreLocked{
    text-align: center;
    background-color: beige;
	line-height: 25px;
}
.temp--score{
	width: 100%;
	height: 28px;
    	margin: auto;
    	text-align: center;
	color: black;
	background-color: #7cf9d6;
	border: 0px;
	font-weight: bold;
	font-size: 15px;
    border-bottom: 1px solid black;
}

.locked--score{
    border-bottom: 1px solid black;
}

.temp--score:hover{
    background-color: #6feeb7;
}
.score--indicator,.scoreLocked{
    font-weight: bold;
    font-size: 17px;
}
.main{
    display:  flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-basis: 10px;  
    justify-content: center;
    border-top: 30px solid #684d32;
	border-bottom: 30px solid #684d32;
}

.main--item{
    min-width: 30vw;
    border:  0px;
		background-color: #684d32;
}
.table{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /*justify-content: center;*/
    align-items: center;
    min-width: 30vw;
    background: #006400;
    margin: 10px;
    border: 10px solid #684d32;
	padding-top: 80px;
}
.dice{
    width: 10vw;
    height:  10vw;
    max-height: 85px;
    max-width: 85px;
    border: 2px solid black;
    background-color: antiquewhite;
    border-radius: 15%;
}
.header--item{
    min-width:10%;
    margin: auto;
}
.header--text{
    text-align: center;
}
.names{
    min-width: 30%;
}
.rollButton{
    background-color: #7cf9d6;
    font-size: large;
    font-weight:bold;
}
.rollButton:hover{
    background-color: #6feeb7;
}
.rollButton:active{
    background-color:#7fccb6 ;
    
}

.main p{
	padding: 1px;
	margin: 1px;
}