body {
	background-color: #000020;
	font-family: Arial, sans-serif;
	font-size: 1.2vw;
	text-align: center;
}

p {
	white-space: pre-line;
}

h1 {
	color: darkGrey;
}

.sides {
	display: flex;
	justify-items: right;
	width: 99vw;
}

.left {
	flex: 1;
	justify-items: center;
}

.progress, .moves, .distribs {
	display: flex;
	align-items: center;
	width: 35vw;
	height: 5vh;
	color: papayaWhip;
	margin: 0.5vh;
}

.progress p, .moves button, .distribs p {
	flex: 1;
}

button {
	font-size: 1.5vw;
	background-color: lightSlateGrey;
	border-color: lightGrey;
	height: 5vh;
	cursor: pointer;
	margin: 0.6vw;
}

canvas {
	width: 35vw;
	height: 30vw;
	cursor: pointer;
}

.right {
	flex: 1;
	justify-items: center;
}

.top-right {
	display: flex;
	width: 35vw;
	height: 5vh;
	justify-content: space-between;
	color: white;
}

textarea {
	background-color: black;
	color: white;
	border-radius: 10px;
	width: 35vw;
	height: 35vh;
	resize: none;
	padding: 5px;
	margin: 0.5vw;
	font-size: 1.2vw;
	scrollbar-color: lightGrey transparent;
}

.options1, .options2 {
	display: flex;
}

.sidebar {
	flex: 0 0 18vw;
	background-color: navy;
	border-radius: 1vw;
	justify-items: center;
	height: 80vh;
}

.recommendations {
	display: flex;
	flex-direction: column;
	width: 17vw;
	height: 78vh;
	margin-top: 1vh;
	overflow: auto;
	scrollbar-color: mediumBlue royalBlue;
	scrollbar-width: thin;
}

.recommendations p {
	text-align: left;
	margin: 0.2vh;
	padding: 0.8vh;
	line-break: anywhere;
	color: papayaWhip;
	background-color: #2020c0;
	border-radius: 0.3vw;
	border: 3px solid transparent;
	cursor: pointer;
}

.recommendations p:hover {
	border-color: royalBlue;
}