@import url('https://fonts.googleapis.com/css?family=Pacifico');

html, body {
  background: #aaaaaa;
  margin: 0;
  padding: 0;
}

h1, h2 {
  text-align: center;
  color: white;
  font-size: 5vmin;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
  font-family: Pacifico, arial, serif;
  font-weight: normal;
}

h2 {
  font-size: 3.5vmin;
  margin-top: 5vmin;
}

#points {
  font-family: Pacifico, Verdana, sans-serif;
  color: white;
  font-size: 5vmin;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
  position: absolute;
  top: 1vmin;
  right: 2vmin;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.boxes {
  margin: auto auto;
  text-align: center;
  white-space: nowrap;
}

.color-box {
  display: inline-block;
  background: red;
  box-sizing: border-box;
  border: 1.25vmin solid white;
  border-radius: 2px;
  width: 20vmin;
  height: 20vmin;
  margin-right: 5vmin;
  box-shadow: 0 1rem 0.75rem -0.75rem rgba(0,0,0,0.25);
  position: relative;
}

.boxes.mini .color-box {
  width: 15vmin;
  height: 15vmin;
  margin-right: 3vmin;
  cursor: pointer;
}

.color-box.right {
  border-color: green;
}

.color-box.wrong {
  border-color: #e81222;
}

#box-3 {
  margin-right: 0;
  background: #ccc;
  overflow: hidden;
}

#color-3 {
  margin-right: 0;
}

#box-3::before {
  content: "?";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Pacifico, Verdana, sans-serif;
  font-size: 6vmin;
  color: rgba(0,0,0,0.5);
}

#scrim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
  display: none;
}

#scrim.correct,
#scrim.incorrect {
  display: block;
}

#scrim > div {
  padding: 3vmin;
  border-radius: 3px;
  background: white;
  box-shadow: 0 0.5rem 1.5rem -0rem rgba(0,0,0,0.25);
}

#scrim h2 {
  color: #444;
  margin-top: 0;
  display: none;
}

#scrim.correct #correct,
#scrim.incorrect #incorrect {
  display: block;
}

#scrim button {
  width: 100%;
  text-align: center;
  font-size: 2vmin;
  padding: 1.5vmin;
  border-radius: 3px;
  border: 0;
  background: #396;
  color: white;
  box-shadow: 0 1rem 0.75rem -0.75rem rgba(0,0,0,0.25);
  cursor: pointer;
}

#correct-color,
#picked-color {
  position: absolute;
  width: 100%;
  height: 60%;
  z-index: 2;
}

#picked-color {
  top: 50%;
}