header .site-title {
  font-family: Varela Round, Arial, Helvetica, sans-serif;

  padding: 30px;
  text-align: center;
  background: #272822;
  color: #a1efe4;
  font-size: 45px;
}

header .site-title .site-subtitle {
  color: #e6db74;
  font-size: 16px;
}

body {
	padding: 0;
	margin: 0; 
  background-color: #3e3d32;
  font-family: Consolas,monaco,monospace; 
}

canvas {
	background: #eee;
	display: block;
	margin: 16px auto;
  margin-bottom: 0px;
}

#challenge-difficulty {
  text-align: center;
  color: #e6db74;
  font-size: 20px;
  margin: 8px 0;
}

#buttons {
	display: flex;
	justify-content: center;
}

[type=button] {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 5px 10px;
}

.invisible {
	visibility: hidden;
}

main {
  background-color: #585647;
  padding: 8px 16px;
  margin: 8px 16px;
  border-radius: 10px;
  color: #FFFFFF;
}

.spoiler-box {
  width: 26em;
  display: inline-block;
  background-color: #272822;

  text-indent: -9999px;/* sends the text off-screen */
}

.spoiler-box:hover{
  color: #ae81ff;
  text-indent: 0px;
}


h1, h2, h3, h4, h5, h6 {
  color: #a6e22e;
}

p, li {
  color: #e6db74;
}

a {
  color: #4782b2;
}

strong {
  color: #f92672;
  font-weight: normal;
}

ul {
  list-style: none; /* Remove default bullets */
}

/* https://www.w3schools.com/howto/howto_css_bullet_color.asp */
ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #fd971f; /* Change the color */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.purple {
  color: #ae81ff;
}

p.moverules {
  color: #66d9ef;
  margin-top: 0px;
}

h3.piecerules {
  margin-bottom: 0px;
}