html,
body {
    font-family: 'Raleway', serif;
    color: #fff;
    text-align: center;
    background-color: #2b3361;
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    font-family: 'Raleway', serif;
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}


* {
	margin: 0;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

canvas {
	/*background-color: rgb(255,240,255);*/
	border: 1px solid #000000;

}

button {
	border-radius: 28px;
	color: white;
	background-color: rgb(55,65,64);

}

select {
	margin-top: 10px;
	margin-bottom: 10px;
}

input {
	margin-top: 10px;
	margin-bottom: 10px;
}


.centerCanvas {
	width: 850px;
	margin: 20px auto;
}

.canvas {
	width: 650px;
	float: left;
}

.layers {
	position: absolute;
}

.canvasBackgroundColor {
	width: 650px;
	height: 520px;
	background-color: rgb(255,240,255);
	position: absolute;
}

.aside {
	height: 520px;
	width: 180px;
	background-color: rgb(42,44,43);
	float: left;
}

.strokeToolbar {
	margin: 14px 14px;
}

.controlStroke {
	width: 25px;
	height: 25px;
	text-align: center;
	background-color: rgb(220,53,34);
	display: inline-block;
	margin: 0 2px;
	font-size: 110%;

}



.clearCanvas {
	margin-bottom: 10px;
}

#strokeVal {
	margin: 0 10px;
}

#colors {
    margin-top: 20px;
}

.swatch {
	width: 30px;
	height: 30px;
	border-radius: 15px;
	box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5), 0px 2px 2px rgba(0,0,0,0.5);
	display: inline-block;
	margin-left: 6px;
	background-color: cyan;

}

.swatch.active {
	border: 2px solid white;
	box-shadow: inset 0px 1px 2px rgba(0,0,0, 0.5);
}

#circleRadius {
  display: none;
}

.rectangleInput {
  display: none;
}

#squareLength {
  display: none;
}