body {
  font-family: Arial, Helvetica, sans-serif;
}

header {
  width: 100%;
  margin-top: 5%;
  margin-bottom: 5%;
  text-align: center;
  font-size: 45px;
}

select, input, span {
  font-size: 1.25vw;
}

select, input {
  width: 17.5vw;
  margin: 0.05vw;
  text-align: center;
}

input {
  width: 13vw;
  float: left;
  
}

.property_container {
  width: 100%;
  margin-bottom: 0.75vw;
  display: inline-block;
}

option, input {
  text-align: center;
}

option:checked {
  font-weight: 700;
  color: chocolate;
}

.bold {
  font-weight: bold;
}

.highlight {
  color: chocolate;
}

.interactive {
color: steelblue;
cursor: pointer;
user-select: none;
}

:active {
  color: blue;
}

.red {
  color: red;
}

.split {
  height: 100%;
  position: fixed;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.left {
  width: 30vw;
  left: 0;
  background-color: white;
  overflow-x: scroll;
}

.right {
  width: 70vw;
  right: 0;
  background-color: white;
}

.controls {
  position: absolute;
  top: 45%;
  left: 50%;
  margin-bottom: 5vw;
  transform: translate(-50%, -45%);
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#sprite_code_status {
  display: inline;
  width: 1.5vw;
  padding: 0.1vw;
  cursor: help;
}

.image_layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 67.5vw;
  transform: translate(-50%, -50%);
}

img #back_layer {
  z-index: 0;
}
img #blush_layer {
  z-index: 1;
}
img #hair_layer {
  z-index: 2;
}
img #eyes_layer {
  z-index: 3;
}
img #eyebrows_layer {
  z-index: 4;
}
img #mouth_layer {
  z-index: 5;
}
img #tears_layer {
  z-index: 6;
}
img #table_layer {
  z-index: 7;
}

.not-implemented {
  color: red !important;
  background-color: #ffcccc !important;
}

/* Prevents rapid clicks on interactive controls from highlighting page text. */
.interactive {
    -webkit-user-select: none;
    user-select: none;
}