@font-face {
  font-family: kashimir;
  src: url(../fonts/kashimir.ttf);
}

.container { 
  background: black;
  /*position: relative; */
  width: 970px; 
  margin: 0 auto; 
  padding: 0; 
}

.story {
  max-width: 650px;
  margin: 2em auto;
}
.story p {
  color: white;
  margin-bottom: 1em;
}
.story p a {
  color: red;
}
.story p a:hover {
  text-decoration: underline;
}

#win {
  display: none;
  color: white;
  position: absolute;
  left: 200px;
  top: 1200px;
  width: 0;
  height: 125px;
  z-index: 10;
  font-family: 'kashimir';
  font-size: 3em;
  background: black;
  border: 2px solid #333;
  padding: 20px;
}

#win-img {
  margin-top: .1em;
  height: 160px;
  width: 317px;
}

.share {
  display: block;
  position: absolute;
  left: 395px;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

#facebook {
  top: 55px;
}

.share:hover {
  opacity: .5;
}

#twitter {
  top: 120px;
}

#share-text {
  top: 25px;
}

#share-text:hover {
  opacity: 1;
}

.wrapper {
  width: 970px;
}

:focus {outline:none;}
::-moz-focus-inner {border:0;}

#header {
  margin-bottom: 1em;
  color: white;
}

p {
  font-family: helvetica, arial, sans-serif;
  font-size: 1em;
  font-family: 'BWHaasText-65Medium';
  color: red;
  margin: 0em 1em 0em 1em;
}

.game-wrapper {
  display: none;
  width: 970px;
}

.text-wrapper {
  width: 800px;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.difficulty-wrapper {
  width: 970px;
  font-size: 1.5em;
  display: block;
  text-align: center;
  margin-bottom: 1em;
}

.difficulty {
  display: inline;
  margin: 0 auto;
  text-align: center;
  font-family: 'BWHaasText-65Medium';
  color: white;
  position: relative;
}

.difficulty.selected {
  color: red;
}

.difficulty::after {
  display: block;
  content: "▲";
  font-size: .75em;
  color: red;
  position: absolute;
  top: 1.5em;
  left: 50%;
  transform: translate(-50%,0);
  visibility: hidden;
}

.difficulty.selected::after, .difficulty:hover::after {
  visibility: visible;
}

.difficulty-wrapper span {
  font-family: 'BWHaasText-65Medium';
  color: white;
}

.difficulty:hover {
  color: red;
  cursor: pointer;
}

.text-wrapper p {
  display: none;
}

.drag-item {
  display: inline-block;
  margin: .77em;
  height: 174px;
  width: 194px;
  color: white;
  cursor: move;
  z-index: 9;
}

.top-row {
  margin-top: 2em;
}

#pile {
  margin-bottom: 1em;
}

.drop-wrapper {
  width: 850px;
  height: 174px;
  background: url(../img/tab.png);
  background-repeat: none;
  display: block;
  margin: 0 auto;
  margin-bottom: 2em;
}

#drop {
  width: 776px; 
  height: 174px;
  float: right;
}

.drop {
  font-family: 'kashimir';
  display: inline-block;
  width: 194px;
  height: 174px;
  background: black;
  text-align: center;
  color: white;
  opacity: 0;
}

.measure-row {
  text-align: center;
  margin-bottom: 0px;
  width: 970px;
}

.hover {
  opacity: .5;
}

.drop-hover {
  background: red;
  opacity: 1;
}

.drop-hover-easy {
  background: #ccb93d;
  opacity: 1;
}

audio {
  display: none;
}

.drag-item img {
  width: 194px;
  height: 174px;
}

.game-button {
  text-align: center;
  margin-bottom: 4em;
}

.game-button a {
  display: inline;
  cursor: pointer;
  font-family: 'kashimir';
  border: none;
  background: black;
  color: white;
  font-size: 1.5em;
  margin-right: 1em;
}

.game-button img {
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

.game-button img:hover {
  opacity: .5;
}

.game-button button:hover {
  opacity: .5;
}