*{
    box-sizing: border-box;
}

body {
	background-color: rgb(165, 165, 165);
}

#container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 10vh 0;
	/* box-shadow: 0px 0px 10px 3px black; */
}

#board{
	max-width: 380px;
	width: 100%;
	height: 380px;
	display: flex;
	flex-wrap: wrap;
	/* border: 1px solid white; */
}

.cell {
    width: 10%;
    height: 10%;
    border: 1px solid white;
	cursor: pointer;
}

#toolBar {
	width: 380px;
	border-radius: 10px 10px 0 0;
}

#bottomToolBar {
	width: 380px;
	border-radius: 0 0 10px 10px;
	direction: rtl;
}

.dropdown-item {
	cursor: pointer;
}

#modal {
	height: 380px;
	position: absolute;
}

@media screen and (max-width:380px){
	#toolBar{
		width: 100%;
	}
	#bottomToolBar{
		width: 100%;
	}
	#boars{
		width: 100%;
	}
}