body {
	background-color: #232323; 
	margin: 0; 
	font-family: "Montserrat", "Avenir"; 
}

.square {
	width: 30%; 
	background: purple; 
	padding-bottom: 30%; 
	float: left; 
	margin: 1.66%; 
	border-radius: 50%; 
	transition: background 0.6s; 
	--webkit-transition: background 0.6s;
	--moz-transition: background 0.6s; 
}

.square:hover {
	--webkit-transform: scale(1.1);
	--moz-transform: scale(1.1);
	--o-transform: scale(1.1);
	--ms-transform: scale(1.1);
	transform: scale(1.1); 
	cursor: pointer; 
}

#container {
	margin: 20px auto; 
	max-width: 600px; 
}

h1 {
	text-align: center; 
	color: white; 
	line-height: 1.1; 
	background: steelBlue; 
	margin: 0;
	font-weight: normal; 
	text-transform: uppercase; 
	padding: 20px 0; 
}

#colorDisplay {
	font-size: 200%; 
}

#message {
	display: inline-block; 
	width: 20%;
}

#stripe {
	background: white; 
	height: 30px; 
	text-align: center; 
	color: black; 
}

.selected {
	color: white; 
	background: steelblue; 
}

button {
	border: none; 
	background: none; 
	text-transform: uppercase; 
	height: 100%; 
	font-weight: 700;
	color: steelBlue; 
	letter-spacing: 1px; 
	font-size: inherit; 
	transition: all 0.3s;
	--webkit-transition: all 0.3s;
	--moz-transition: all 0.3s; 
	outline: none; 
}

button:hover {
	color: white; 
	background: steelblue; 
}

/*@keyframes scroller {
	0% {
		margin-left: 600px;
	}
	100% {
		margin-left: 300px; 
	}
}

#container {
	animation: scroller 2s linear infinite; 
}*/