main { @include position(fixed,0,0,0,0); overflow-y: auto; }
.image-holder { @include flex-container(stretch);  position: relative; min-height: 100%; padding-top:($header-height);
  .child { text-align: center; width:100%; max-width:$max-width; margin-left: auto; margin-right: auto; }
  img { max-width: 100%; }
  h1, h2 { font-weight: $light; font-size:1.5em; margin-top: 0.5em; margin-bottom: 0.5em; color:rgba($white,0.6);
    &.nope { color:$red; }
    &.yup { color:$green; }
  }
  a { color:$link; text-decoration: none; }
  .input-holder { position: relative;
    select { font-family:$slab; color:black; font-size:1.3rem; }
    select { background-color:rgba($white,0.65); border:none; margin: 0; display:block; width:100%; padding-left:$pad; padding-right:$pad; height: 3em; text-transform: capitalize;
      &:focus { background: rgba($white,0.9); }
      option { padding-left:$pad; font-size:1rem; }
    }
    label { position: absolute; top:$pad; left:$pad; }
  }
  
  /*
  h2 { font-size:2em; font-weight: $light; margin-top: 0.2em; margin-bottom: 0.4em; display: block;
    &.nope { color:$red; }
    &.yup { color:$green; }
  }
  */
  
  .correctis { color:$white; font-weight: $light; font-size:0.8em; text-transform: uppercase; }
  .correct-title { margin:0; display: block; font-size:1.5em; color:lighten($blue,20%); font-weight:$light;
    &:hover { text-decoration: underline; }
  }
  
  .button-holder { padding-top: 1em; }
  button { background:transparent; border:2px solid $link; color:$link; font-family:$font; font-size:1.4em; font-weight:$light; padding:.25em 1em; cursor:pointer;
    &:hover { background:$link; color:$dark; }
  }
  
  .result { padding-top: 0.5em;}
}

[data-display="wrong"], [data-display="correct"], [data-display="play again"] { display: none; }


@media (max-width:$max-width) {
  .image-holder {
    h1 { font-size:5vw; }
  }
}