style.css

html,
body {
  font: 16px/1.2 "Hack", Helvetica, arial, sans-serif;
  color: rgb(220,220,220);
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-weight: 300;
  background: rgb(100,100,100);
  margin: 0px;
}

hr {
  border: dotted 1px rgb(220,220,220);
}

h1 {
  font-size: 40px;
  margin-bottom: 40px;
}

h2 {
  margin-top: 40px;
  margin-bottom: 20px;
}

input {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

#editor-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 47%;
  height: 100%;
  left: 15%;
  top: 0;
  padding-top: 0%;
  position: absolute;
}

#wrapper {
  padding-top: 5%;
  left: 15%;
  width: 47%;
  position: relative;
}

#game-container {
  height: 85%;
  margin: 0 auto;
  display: block;
}

#play-container {
  height: 85%;
  margin: 0 auto;
  display: block;
}

#selector {
  width: 15%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-right: dotted 4px rgb(220,220,220);
  background: rgb(130,130,130);
}

#selector-inner {
  padding-left: 30px;
  padding-right: 60px;
  padding-top: 70px;
}

#sidebar {
  width: 38%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border-left: dotted 4px rgb(220,220,220);
  background: rgb(130,130,130);
}

#sidebar-inner {
  padding-left: 60px;
  padding-right: 60px;
}

.icon {
  margin-right: 15px;
}

.button {
  background-color: rgb(80,80,80);
  opacity: 0.8;
  font-size: 14px;
  border-radius: 10px;
  border: solid 2px rgb(220,220,220);
  padding: 9px;
  cursor: pointer;
  z-index: 1000;
}

.button:hover {
  background-color: rgb(35,35,35);
}

.button:active {
  background-color: rgb(30,30,30);
}

.button-edit {
  left: 115px;
  top: 35px;
  position: absolute;
}

.button-game {
  left: 182px;
  top: 35px;
  position: absolute;
}

.button-play {
  left: 248px;
  top: 35px;
  position: absolute;
}

.button-load {
  left: 25px;
  top: 35px;
  position: absolute;
}

.button-save {
  left: 90px;
  top: 35px;
  position: absolute;
}

.button-reset {
  left: 40px;
  top: 35px;
  position: absolute;
}

.button-plus {
  margin-top: 20px;
  font-size: 24px;
  padding-top: 2px;
  padding-bottom: 2px;
  background-color: rgb(130,130,130);
}

.button-minus {
  position: relative;
  margin-left: 15px;
  font-size: 16px;
  padding-top: 2px;
  padding-bottom: 2px;
  background-color: rgb(130,130,130);
}

.button-item {
  padding-top: 8px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 8px;
  font-size: 16px;
  margin-bottom: 10px;
  background-color: rgb(130,130,130);
  color: white;
}

.button-plus:hover, .button-minus:hover, .button-item:hover {
  background-color: rgb(60,60,60);
}

.button-active {
  background-color: rgb(90,90,90);
}

.button-row {
  margin-bottom: 30px;
  width: 150px;
}

/*
* gameplay settings input
*/

#gameplay fieldset {
  border: 0px;
  width: 48%;
  display: inline-block;
  padding: 0px;
  margin: 0px 0px 5px 0px;
}

input {
  font-family: "Hack";
  border: 1px dotted #fff;
  width: 120px;
  padding: 4px;
  color: #fff;
  margin-left: 0px;
}

/*
* selector settings
*/

.list {
  margin-top: 30px;
  margin-bottom: 30px;
}

.list-title {
  display: block;
  font-size: 40px;
  margin-bottom: 10px;
}

/*
* config settings
*/

.config-field {
  font-size: 18px;
  display: block;
  margin-top: 8px;
  margin-bottom: 4px;
}