* {
    position:relative;
    font-family:'Lora';
  }
  
  html, body {
    padding:0;
    margin:0;
  }
  
  header, main, footer {
    width:100%;
  }
  
  .taboo-bar,.action .icon,.alert {
    transition:         0.2s ease;
    -o-transition:      0.2s ease;
    -moz-transition:    0.2s ease;
    -webkit-transition: 0.2s ease;
  }
  
  .alert.s {
    top:0;
  }
  
  a {
    text-decoration:none;
    color:inherit;
  }
  
  a:hover {
    text-decoration:none;
  }
  
  li {
    list-style:none;
  }
  
  h1, h2, h3 {
    font-weight:lighter;
  }
  
  header {
    text-align:center;
    padding:1em 0;
  }
  
  .card-container {
    text-align:center;
  }
  
  .card {
    display:inline-block;
  
    .team {
      text-transform:uppercase;
      letter-spacing:1em;
      color:#999;
      margin:0 0 1em 0;
    }
  
    .keyword {
      font-size:5em;
      margin:0;
    }
  
    ul {
      padding:0;
    }
  
    .unmentionable {
      font-size:1.5em;
      line-height:150%;
    }
  
    .unmentionable.large {
      font-size:3em;
    }
  }
  
  .taboo-bar {
    height:0.1em;
    width:110%;
    position:absolute;
    left:-5%;
    top:50%;
    background-color:#eee;
    z-index:-1;
  }
  
  .unmentionable:hover .taboo-bar, a:hover .taboo-bar,.action:hover .taboo-bar {
    background-color:#333;
    width:120%;
    left:-10%;
  }
  
  .taboo-bar.dark {
    background-color:#666;
  }
  
  .icon {
    display:inline-block;
  
    span {
      display:inherit;
    }
  }
  
  .action {
    padding:2.5em 3.5em;
    display:inline-block;
    line-height:75%;
    cursor:pointer;
  }
  
  .correct:hover {
    color:#690;
  }
  
  .incorrect:hover {
    color:#c00;
  }
  
  .pass:hover {
    color:#c90;
  }
  
  .icon-pass, .icon-incorrect, .icon-correct {
    font-family:'Raleway';
    font-weight:100;
    font-size:3em;
    text-align:center;
  }
  
  footer {
    margin-top:3em;
    border-top:1px solid #eee;
    color:#999;
    text-align:center;
    padding:2em 0;
    text-transform:uppercase;
    font-size:0.8em;
  }
  
  .title {
    font-size:3em;
  }
  
  .copy {
    display:inline-block;
    max-width:60em;
    width: 50%;
    line-height:200%;
    font-size:1.5em;
  
    .button {
      margin:2em 0;
    }
  }
  
  .icon-back {
    font-size:2em;
  }
  
  .settings {
  
    .card {
      width:100%;
    }
  
    .setting_field {
      width:100%;
      font-size:1.25em;
      margin:0.5em 0;
      padding:0.5em;
      outline:none;
      border:1px solid #eee;
    }
  
    .setting_save {
      -webkit-appearance:none;
      box-shadow:none;
      outline:none;
      border:none;
      text-transform:uppercase;
      padding:1.5em 2em;
      letter-spacing:0.25em;
      background-color:transparent;
      border:2px solid #333;
      color:#333;
      cursor:pointer;
      position:absolute;
      right:0.5em;
      bottom:2em;
    }
  
    .setting_save:hover {
      background-color:#333;
      color:#FFF;
    }
  }
  
  .timer {
    position:absolute;
    bottom:-3.5em;
    left:calc(100% - 25em);
    width: 25em;
    overflow:hidden;
  
    .time {
      font-size:25em;
      color:#eee;
      line-height:80%;
    }
  }
  
  .alert {
    position:fixed;
    top:-5.25em;
    left:0;
    width:100%;
    background-color:#c90;
    color:#FFF;
    padding:2em 0;
    text-align:center;
    margin:0;
  }
  
  .button {
    display:inline-block;
    text-transform:uppercase;
    font-size:0.6em;
    padding:1em 3em;
    border:2px solid #333;
    letter-spacing:0.25em;
    cursor:pointer;
  }
  
  .button:hover {
    background-color:#333;
    color:#FFF;
  }