@import url('https://fonts.googleapis.com/css2?family=Joan&display=swap');
body {
    padding: 0;
    margin: 0;
    background-color: whitesmoke;
}
#text-wrapper{
	margin:1vw;
}
#game-name{
	letter-spacing:0.1em;
	text-align:center;
	font-size:32px;
	font-weight:600;
}
#description p{
	margin:5px;
	font-family: 'Joan', serif;
}
#sections{
	display:flex;
	justify-content:space-around;
}
#description{
	padding:1vw;
	font-size:1em;
	background-color:white;
	border-radius:5px;
	width:45vw;
	letter-spacing: 0.1em;

}
#description p{
	padding:0.5em;
}
#left{
	display:flex;
	justify-content:center;
}
#left img{
	width:40vw;
	max-width:350px;
	max-height:350px;
}
#game-name{
	padding:1em;
}
#game-status{
	text-align:center;
	font-size:1.5em;
}
#game-ui{
	display:flex;
	justify-content:center;
}
#body{
	background-color:rgb(220,220,220);
	width:80vw;
	padding:50px 0px;
	border-radius:4px;
}
.button {
	height : 14vw;
	width : 14vw;
	max-height:100px;
	max-width:100px;
	padding: 0;
	margin: 1px;
	border-radius:20%;
	font-weight:600;
	border:1px saddlebrown solid;
}
.div {
    padding: 0;
    margin: 0;
    border: 0;
    display: flex;
}

.m{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#playerTurn {
  text-align: center;
  margin-top: 10px;
    margin-bottom: 20px;
    font-size: 1.5rem;
}
#undo {
    height : 50px;
    width : 50px;
    padding: 0;
    margin: 10px; 
}
#upper {
    margin-top: 10px;
    /* margin-left:490px;
    margin-right: 600px; */
    /* display: flex;
    justify-content: space-around; */
}
@media only screen and (max-width: 600px) {
	#description{
		margin: 5px;
		padding: 1vw;
		font-size: 1em;
		background-color: white;
		border-radius: 5px;
		width: 90vw;
	}
	#sections{
		display: grid;
		justify-content: center;
		flex-direction: column;
	}
}