* {
	font-family: Atkinson;
}

body {
	background-color: #202020;
	padding: 0;
	margin: 0;
	padding-right: 100px;
	position: relative;
	overflow: hidden;
	font-family: Atkinson;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Create two unequal columns that floats next to each other */
.column {
	float: left;
	height: 100vh;
}

.row {
	width: 100vw;
}

/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
}

#main {
	width: calc(100% - 550px);
	background-color: black;
}

#sidebar {
	width: 550px;
	box-sizing: border-box;
	padding: 20px 15px;
	background-color: hsl(200, 40%, 20%);
	color: white;
	border-left: 10px ridge #ffffff0a;
	position: absolute;
	right: 0px;
	overflow-y: scroll;
}

button {
	border: none;
}

.polyimg {
	width: 100%;
	height: 100%;
	margin: auto;
	display: block;
	object-fit: contain;
	filter: drop-shadow(0px 0px 10px #000000);
	z-index: 5;
}

.polylabel {
	position: absolute;
	box-sizing: border-box;
	font-weight: bold;
	-webkit-text-stroke: 4px black;
	paint-order: stroke fill;
	bottom: 15px;
	left: 50%;
	width: 100%;
	padding: 10px;
	transform: translateX(-50%);
}

#polyhedralist {
	display: grid;
	grid-auto-rows: auto;
	grid-template-columns: repeat(auto-fit, minmax(150px, auto));
	justify-content: space-between;
	row-gap: 6px;
}

.polyhedrabutton {
	width: 166px;
	height: 166px;
	word-break: break-word;
	hyphens: auto;
	color: white;
	background-color: #0008;
	border-radius: 6px;
	font-size: 16px;
	padding: 10px;
	position: relative;
	text-align: center;
}

.polyhedrabutton.selected {
	background-color: rgba(43, 181, 199, 0.623);
	box-shadow: 0px 0px 10px #6ee8e2;
}

.optionsbutton {
	font-size: 16px;
	padding: 4px 7px;
	margin-bottom: 7px;
	border-radius: 5px;
}

h1 {
	font-size: 18pt;
}

h2 {
	font-size: 14pt;
	font-weight: normal;
	margin-bottom: 10px;
}

canvas {
	background-color: #fff;
	display: block;
	margin: 0;
}

select {
	font-size: 12pt;
	border: none;
	padding: 4px 8px;
	border-radius: 4px
}

.squarebutton {
	position: absolute;
	top: 20px;
	width: 50px;
	height: 50px;
	border: none;
	outline: none;
	border-radius: 6px;
	transition-duration: 60ms;
	background-color: #6ee8e2;
}

.squarebutton img {
	position: absolute;
	height: 20px;
	top: 50%;
	left: 55%;
	transform: translate(-50%, -50%);
}

.navbutton {
	border: none;
	padding: 8px 12px;
	font-size: 12pt;
	border-radius: 4px;
	background-color: #ffffffcc;
}

.navbutton.active {
	border-bottom: 6px solid #2ecec6;
	background-color: white;
}

button:active {
	transform: translateY(4px);
	transition-duration: 60ms;
}

#clickType {
	background-color: #f000;
	position: absolute;
	top: 20px;
	left: 20px;
	width: 50px;
	height: 50px;
}

#clickType:hover {
	height: 400px;
}

#clickType0 {
	background-color: #2fa3d4;
	background-image: url('sprites/add.png');
}

#clickType1 {
	background-color: #f25f5c;
	background-image: url('sprites/remove.png');
}

#clickType2 {
	background-color: #6ee8e2;
	background-image: url('sprites/move.png');
}

#clickType3 {
	background-color: #ffe066;
	background-image: url('sprites/center.png');
}

#clickType4 {
	background-color: #f9844a;
	background-image: url('sprites/rotate.png');
}

#clickType0,
#clickType1,
#clickType2,
#clickType3,
#clickType4 {
	top: 0px;
	transition-duration: 150ms;
}

#clickType:hover #clickType1 {
	top: 60px;
}

#clickType:hover #clickType2 {
	top: 120px;
}

#clickType:hover #clickType3 {
	top: 180px;
}

#clickType:hover #clickType4 {
	top: 240px;
}

#resetViewButton {
	left: 80px;
	background-image: url('sprites/view.png');
}

#sidebarToggle {
	margin-left: -30px;
	width: 30px;
	border-radius: 6px 0px 0px 6px;
}

@font-face {
	font-family: Atkinson;
	src: url(AtkinsonHyperlegible-Regular.ttf);
}