/*
This stylesheet defines styles for the "draw" page.
*/
* {
	box-sizing: revert;
}

body {
	background-image: linear-gradient(#555, #aac);
	background-color: #777;
	margin: 0;
}

.warning#mobile {
	display: none;
}

div.main {
	height: 100vh;

}

div.canvas-flex {
	display: flex;
	justify-content: center;
	align-items: center;

	height: 100%;
}

div.toolbox-flex {
	display: flex;
	justify-content: start;
	align-items: center;
	flex-direction: column;

	padding: 1em;
	height: 40em;
	width: 5em;
}

div.width-flex {
	padding: 1em;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
}

.width-selector {
	background-color: black;
	border: 2pt solid white;
	border-radius: 1em;
	margin: 5px;
	width: 85%;
}

.width-selector#five {
	height: 5px;
}

.width-selector#ten {
	height: 10px;
}

.width-selector#fifteen {
	height: 15px;
}

.width-selector#twenty {
	height: 20px;
}

.menu-flex {
	padding: 1em;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
}

.menu-item {
	font-family: "Source Sans Pro", Verdana, Geneva, Tahoma, sans-serif;
	font-weight: bold;
	font-size: 1.5em;
	color: white;

	background-image: linear-gradient(to bottom right, #0f0, #0af, #70f);
	border-radius: 1em;
	border: 0;

	user-select: none;
	margin: 0.25em;
	width: 100%;
}

.menu-item:hover {
	filter: invert(25%);
}

.menu-item:active {
	filter: invert(100%);
}

.save-button {
	width: 100%;
}

.menu-item#save {
	margin-left: 0;
}

canvas {
	background-color: white;

	border: 0.25em solid black;
	border-radius: 1em;

	cursor: crosshair;

	height: 40em;
	width: 60em;

}

@media screen and (max-width: 1200px) {
	html {
		font-size: 0.75rem;
	}
}

#flair-text {
	text-align: center;
}

p.copyright-text,
a.copyright-link {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	text-align: center;
	user-select: none;
	font-weight: bold;
	font-size: 1em;
	color: #000;
}