body.theme-desert {
  background-image: url('/images/background/paper.jpg');
  background-color: black;
}

body.theme-desert .theme-button,
body.theme-desert .theme-input,
body.theme-desert .theme-label {
  color: #fff;
  background-color: #5D4037; /* 700 brown */
}

body.theme-desert .theme-button:active,
body.theme-desert .theme-input:focus {
  background-color: #3E2723; /* 900 brown */
}

body.theme-desert .theme-canvas canvas {
  border-style: groove;
  border-color: #FFF8E1;
}

/**
 * snow
 */
body.theme-snow {
  background-image: url('/images/background/snow.jpg');
  background-color: white;
}

body.theme-snow .theme-button,
body.theme-snow .theme-input,
body.theme-snow .theme-label {
  color: #37474F;
  background-color: #80DEEA;
}

body.theme-snow .theme-button:active {
  background-color: #26C6DA; /* 900 brown */
}

body.theme-snow .theme-canvas canvas {
  border-style: groove;
  border-color: #E0F7FA;
}

/**
 * moor
 */
body.theme-moor {
  background-image: url('/images/background/moor.jpg');
  background-color: gray;
}

body.theme-moor .theme-button,
body.theme-moor .theme-input,
body.theme-moor .theme-label {
  color: #37474F;
  background-color: #B0BEC5; /* 200 blue */
}

body.theme-moor .theme-button:active {
  background-color: #78909C; /* 900 brown */
}

body.theme-moor .theme-block {
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 1.0rem rgba(255, 255, 255, 0.5);
}

body.theme-moor .theme-canvas canvas {
  border-style: groove;
  border-color: #ECEFF1;
}

/**
 * tide
 */
body.theme-tide {
  background-image: url('/images/background/tide.jpg');
  background-color: gray;
}

body.theme-tide .theme-button,
body.theme-tide .theme-input,
body.theme-tide .theme-label {
  color: #37474F;
  background-color: #C5E1A5; /* 200 blue */
}

body.theme-tide .theme-button:active {
  background-color: #9CCC65; /* 900 brown */
}

body.theme-tide img.theme-block {
  background-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 1.0rem rgba(255, 255, 255, 0.5);
}

body.theme-tide .theme-block {
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 1.0rem rgba(255, 255, 255, 0.5), 0 0 0.5rem rgba(255, 255, 255, 1.0);
}

body.theme-tide .theme-canvas canvas {
  border-style: groove;
  border-color: #F1F8E9;
}

/**
 * lake
 */
body.theme-lake {
  background-image: url('/images/background/lake.jpg');
  background-color: gray;
}

body.theme-lake .theme-button,
body.theme-lake .theme-input,
body.theme-lake .theme-label {
  color: #37474F;
  background-color: #80CBC4; /* 200 blue */
}

body.theme-lake .theme-button:active {
  background-color: #26A69A; /* 900 brown */
}

body.theme-lake img.theme-block {
  background-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 1.0rem rgba(255, 255, 255, 0.5);
}

body.theme-lake .theme-block {
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 1.0rem rgba(255, 255, 255, 0.5), 0 0 0.5rem rgba(255, 255, 255, 1.0);
}

body.theme-lake .theme-canvas canvas {
  border-style: groove;
  border-color: #E1F5FE;
}