#message[hidden]
{
    display: none;
}

#message,
#areatext,
#start,
#restart,
#whos,
#optionslist
{
    text-align: center;
    display: block;
    margin: auto;
	margin-top: 10px;
}
#gamearea
{
    position: relative;
    border-collapse: collapse;
    margin: auto;
    margin-top: 100px;
}

#gamearea:not([move])::before
{
    padding-top: 40%;
    box-sizing: border-box;
    font-size: 20px;
    color: white;
    text-align: center;
    content: "Koniec gry";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

th
{
    border: 1px solid black;
    font-size: 30px;
    width: 80px;
    height: 80px;
	background-color: white;
}

th:not([place]):hover
{
    background-color: #3AD162;
    cursor: pointer;
	transition: height 0.7s;
	
}

th[place]:hover
{
    background-color: #D13A3A;
    cursor: not-allowed;
}

#gamearea[move=x] th:not([place]):hover::before,
th[place=x]::before
{
    content: "X";
}

#gamearea[move=O] th:not([place]):hover::before,
th[place=O]::before
{
    content: "O";
}



body {
	background-color: #ECECEC;
}

#start,
#restart {
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	background-color:#f9f9f9;
	border-radius:6px;
	border:1px solid #dcdcdc;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
#start:hover,
#restart:hover {
	background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
	background-color:#e9e9e9;
}
#start:active,
#restart:active {
	position:relative;
	top:1px;
}