/**
 * Copyright (c) 2019 Nathaniel Wroblewski
 * I am making my contributions/submissions to this project solely in my personal
 * capacity and am not conveying any rights to any intellectual property of any
 * third parties.
**/

html {
  font-size: 15px;
}

html, body {
  height: 100%;
  width:  100%;
  padding: 0;
  margin:  0;
  background-color: #fffff8;
  color: #666;
  font-family: serif;
}

.container {
  width: 400px;
  margin: 0 auto;
  padding: 5rem 1rem;
}

.title {
  font-weight: 400;
  margin: 0;
  font-size: 2rem;
  line-height: 1;
  font-family: 'Montserrat', sans-serif;
}

.subtitle {
  margin: 0.5rem 0 1rem;
  font-size: 1.2rem;
  color: #aaa;
  font-family: 'Libre Baskerville', serif;
}

.text {
  width: 100%;
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
  vertical-align: baseline;
  font-size: 1.4rem;
  line-height: 2rem;
}

.game-container {
  position: relative;
}

.game {
  height: 400px;
  width: 400px;
  background-color: #eee;
}

.timer, .points {
  position: absolute;
  top: 0;
  right: 0;
  margin: 10px;
}

.points {
  top: 20px;
}

.current-word, .error {
  position: absolute;
  top: 0;
  left: 0;
  margin: 10px;
}

.error {
  color: red;
  display: none;
}

.header {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
}

.dark {
  color: #666;
}

.light {
  color: #aaa;
}

.how-to-play .header {
  margin: 2em 0 0 0;
}

.how-to-play .text {
  margin: 0.5em 0;
}

table {
  margin-top: 0.5em;
}

th, td {
  vertical-align: baseline;
  font-size: 1.4rem;
  line-height: 2rem;
}

td:first-of-type {
  width: 120px;
}