button {
  user-select: none;
}

.editor-container {
  width: fit-content;
  margin: 0 auto;
  text-align: center;
}

#code-editor {
  height: 12em;
  width: 25em;
  font-size: .7em;
  border: 1px solid black;
}

#checkerboard {
  width: 18em;
  height: 18em;
  border: 1px solid gray;
  margin: 2em;
}

rect {
  stroke: rgb(200, 200, 200);
  stroke-width: .5;
}

#checkerboard .black {
  fill: rgb(50, 50, 60);
}

#checkerboard .white {
  fill: rgb(240, 240, 247);
}

#checkerboard .gray {
  fill: rgb(180, 180, 200);
}

.hidden {
  display: none;
}

.navbar-btn {
  display: none;
}

.navbar-icon {
  float: left;
  cursor: pointer;
  padding: 7px;
}

.navbar-icon-2 {
  position: absolute;
  right: 0;
  cursor: pointer;
  padding: 5px;
  transform: translate(100%, 100%);
}

.navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  width: 18px;
  margin-left: 1em  ;
}

.navicon:before,
.navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.navicon:before {
  top: 5px;
}

.navicon:after {
  top: -5px;
}

.navicon-close {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  width: 18px;
  margin-right: 1em;
}

.navicon-close:before,
.navicon-close:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 60%;
}

.navicon-close:before {
  top: 3px;
  left: -2px;
  transform: rotate(45deg);
}

.navicon-close:after {
  top: -3px;
  left: -2px;
  transform: rotate(-45deg);
}

.transparent {
  color: transparent;
}

.pure-g, *[class*='pure-u'] {
  height: 100%;
}

.content {
  overflow-y: scroll;
}

pre {
  display: inline-block;
  margin: .3em 0px;
  background: lightgray;
}

a {
  text-decoration: none;
}

#start-playing {
  display: block;
  margin: 0 auto;
  border: none;
  padding: 1em;
  font-weight: 300;
  background: aquamarine;
  cursor: pointer;
  font-size: 1.2em;
}

#start-playing:hover {
  background: #71F1C6;
}

#start-playing:active {
  text-decoration: underline;
}

@media (min-width: 48em) {
  #code-editor {
    width: 50em;
    font-size: 1em;
  }
}