body{
  background:#341f34;
  color:#fff;
}

.shadow{
  bottom:6px;
  right:6px;
}


/*Red*/
.red ~ .highlight{
  background:#ffbca6;
}

.red{
  background:#ff5983;
}

.red ~ .shadow{
  background:#a63a82;
}

/*Red hover*/
.space:hover .red ~ .highlight{
  background:#ffd4c2;
}

.space:hover .red{
  background:#ff75a2;
}

.space:hover .red ~ .shadow{
  background:#c250a1;
}


/*Purple*/
.purple ~ .highlight{
  background:#daeaf2;
}

.purple{
  background:#8cb2ff;
}

.purple ~ .shadow{
  background:#6f66cc;
}

/*Purple hover*/
.space:hover .purple ~ .highlight{
  background:#e9f3f7;
}

.space:hover .purple{
  background:#abccff;
}

.space:hover .purple ~ .shadow{
  background:#8e84e0;
}

/*Green*/
.green ~ .highlight{
  background:#ffeecc;
}

.green{
  background:#14cc80;
}

.green ~ .shadow{
  background:#15788c;
}

/*Green hover*/
.space:hover .green ~ .highlight{
  background:#fff5e0;
}

.space:hover .green{
  background:#1ce09f;
}

.space:hover .green ~ .shadow{
  background:#1e97ab;
}

/*Orange*/
.orange ~ .highlight{
  background:#ffc34d;
}

.orange{
  background:#f37c55;
}

.orange ~ .shadow{
  background:#a64b4b;
}

/*Orange hover*/
.space:hover .orange ~ .highlight{
  background:#ffd967;
}

.space:hover .orange{
  background:#f89b71;
}

.space:hover .orange ~ .shadow{
  background:#c26565;
}

/*Blue*/
.blue ~ .highlight{
  background:#80ffea;
}

.blue{
  background:#00d5ff;
}

.blue ~ .shadow{
  background:#266eff;
}


/*Blue hover*/
.space:hover .blue ~ .highlight{
  background:#9ffff3;
}

.space:hover .blue{
  background:#00e6ff;
}

.space:hover .blue ~ .shadow{
  background:#266eff;
}

/*Yellow*/
.yellow ~ .highlight{
  background:#ffeecc;
}

.yellow{
  background:#ffc34d;
}

.yellow ~ .shadow{
  background:#f37c55;
}

/*Yellow Hover*/
.space:hover .yellow ~ .highlight{
  filter: brightness(1.1);
}

.space:hover .yellow{
  filter: brightness(1.1);
}

.space:hover .yellow ~ .shadow{
  filter: brightness(1.1);
}

/*Rainbow*/
.rainbow ~ .highlight{
  display:none;
}

.rainbow{
  background: #ff5983;
  background: linear-gradient(135deg, #ff5983 5%,#f37c55 26%,#ffc34d 50%,#1ce09f 73%,#00d5ff 88%,#abccff 100%);
}

.rainbow ~ .shadow{
  background:#4d1f4d;
}

/*Rainbow Hover*/
.space:hover .rainbow{
  filter: brightness(1.1);
}

.space:hover .rainbow ~ .shadow{
  filter: brightness(1.1);
}

/*Stone*/
.stone ~ .highlight{
  display:none;
}

.stone{
  background: #c0c0c0 url('image/stone/stone3.png') 8px 8px;
}

.stone ~ .shadow{
  background:#333;
}

/*Stone Hover*/
.space:hover .stone{
  filter: brightness(1.1);
}

.space:hover .stone ~ .shadow{
  filter: brightness(1.1);
}

/*Warp*/
/*.warp ~ .highlight{
  display:none;
}*/

.warp{
  background: purple url('image/warp/warp2.png') 8px 8px;
}

.selected .warp{
  background: purple url('image/warp/warp3.gif') 8px 8px;
}

.warp ~ .shadow{
  background:#8e84e0;
}

/*Warp Hover*/
.space:hover .warp{
  filter: brightness(1.1);
}

.space:hover .warp ~ .shadow{
  filter: brightness(1.1);
}

/*Ice*/
.ice{
  background:#9999ff url('image/ice/ice2.png') 0px 0px;
}

.ice ~ .shadow{
  background:#283b73;
}

/*Fire*/
.fire{
  background:#9999ff url('image/fire/fire3.png') 0px 0px;
}


/*random*/
.random{
  background:#c0c0c0;
}