* {
  font-family: "Montserrat", "Helvetica", sans-serif;
}

html {
  background: url('../img/pattern.png') #EEECE5;
}

.page-content {
  width: 90%;
  margin: auto;
}

.page-title {
  margin: 2.5em 0 0 0;
  text-align: center;
}

.page-title img {
  border: 2px dotted #f39c12;
  border-radius: 50%;
  width: 200px;
}

.page-title h1 {
  color: #f39c12;
  font-size: 2.4em;
  margin: 0;
  padding-bottom: .4rem;
}

.ofc {
  color: #87713b;
  margin: 0 0 2em 0;
  text-align: center;
  font-size: 1.2rem;
}

.words {
  list-style-type: none;
  margin: 2em 0 0;
  text-align: center;
  padding: 0;
}

.words li {
  background: #f39c12;
  border: 1px solid #f39c12;
  color: #fff;
  display: inline-block;
  height: 2.3em;
  line-height: 2.3em;
  margin: 0 0 2em 0;
  width: 100%;
  text-align: left;
}

.words li:hover {
  cursor: pointer;
}

.touch .words li {
  height: 2.6em;
  line-height: 2.6em;
}

.words li strong {
  background: #fff;
  color: #f39c12;
  font-size: 1.2em;
  font-weight: bold;
  margin-right: .5em;
  height: 100%;
  width: 30px;
  text-align: center;
  display: none;
}

.site-footer {
  color: #87713b;
  margin: 3em 0 2em 0;
  font-size: .8em;
  text-align: center;
}

.site-footer a, .site-footer a:visited {
  color: #f39c12;
}

.site-footer .network {
  margin: 1.25em 0;
}

.no-touch .words li strong {
  display: inline-block;
}

.keyboard, .finger {
  display: none;
}

.no-touch .keyboard {
  display: block;
}

.touch .finger {
  display: block;
}

.words-text {
  padding-left: 10px;
}

@media screen and (min-width: 768px) {
  .words li {
    width: 46%;
    margin-left: 1%;
    margin-right: 1%;
  }

  .page-title h1 {
    font-size: 3em;
  }

  .ofc {
    font-size: 1.5rem;
  }
}

@media screen and (min-width: 1024px) {
  .words li {
    width: 370px;
  }
}

.social-network {
  width: 180px;
  margin: 0 auto;
}

.fb-share-button {
  padding-right: 10px;
}