@charset "UTF-8";
/* Font Declarations
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
  font-family: 'open_sansregular';
  src: url(fonts/opensans-regular-webfont.woff2) format("woff2"), url(fonts/opensans-regular-webfont.woff) format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'work_sansblack';
  src: url(fonts/worksans-black-webfont.woff2) format("woff2"), url(fonts/worksans-black-webfont.woff) format("woff");
  font-weight: normal;
  font-style: normal; }

/* Font sizing, Font family
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Colors
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Responsive 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Paul Irish box model
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

/* Eric Meyer 2.0 reset
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

b {
  font-weight: bold; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* additional btn reset
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button {
  margin: 0;
  padding: 0;
  border: none;
  background: none; }
  button:focus {
    outline: none; }
  button * {
    pointer-events: none; }

/* Mixin for responsive font sizing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html, body, button {
  font-size: 16px; }
  @media screen and (min-width: 320px) {
    html, body, button {
      font-size: calc(16px + 8 * ((100vw - 320px) / 960)); } }
  @media screen and (min-width: 1280px) {
    html, body, button {
      font-size: 24px; } }

/* General font styling
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  font-family: "work_sansblack", "arial";
  color: #FFF;
  text-transform: uppercase;
  line-height: 1;
  margin: 20px 0; }

#hangman-container #words .letter p {
  font-size: 24px; }
  @media screen and (min-width: 320px) {
    #hangman-container #words .letter p {
      font-size: calc(24px + 104 * ((100vw - 320px) / 960)); } }
  @media screen and (min-width: 1280px) {
    #hangman-container #words .letter p {
      font-size: 128px; } }

h1 {
  font-size: 24px; }
  @media screen and (min-width: 320px) {
    h1 {
      font-size: calc(24px + 76 * ((100vw - 320px) / 960)); } }
  @media screen and (min-width: 1280px) {
    h1 {
      font-size: 100px; } }

p {
  color: #FFF;
  font-family: "open_sansregular", "arial";
  line-height: 1.4; }

#hangman-container #attempts p, #hangman-container #key-pressed p, #score p {
  display: inline;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  background: #262628;
  font-weight: bold;
  padding: 8px;
  line-height: 1.8;
  color: #FFF; }

/* Animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@-webkit-keyframes fadeOutUp {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0); } }
@keyframes fadeOutUp {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0); } }

.fadeOutUp {
  -webkit-animation: fadeOutUp ease-out;
          animation: fadeOutUp ease-out;
  -webkit-animation-duration: 1s;
          animation-duration: 1s; }

@-webkit-keyframes bwColorRepeater {
  50% {
    color: #262628; }
  75% {
    color: white; }
  100% {
    color: #262628; } }

@keyframes bwColorRepeater {
  50% {
    color: #262628; }
  75% {
    color: white; }
  100% {
    color: #262628; } }

.bw-color-repeater {
  -webkit-animation: bwColorRepeater;
          animation: bwColorRepeater;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 2s;
          animation-duration: 2s; }

/* Animate classes 
   from https://daneden.github.io/animate.css/ (slightly modified)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@-webkit-keyframes tadaEnd {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }
@keyframes tadaEnd {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

.tada-end {
  -webkit-animation-name: tadaEnd;
          animation-name: tadaEnd;
  -webkit-animation-duration: 1s;
          animation-duration: 1s; }

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

.fadeInDown {
  -webkit-animation: fadeInDown ease-out;
          animation: fadeInDown ease-out;
  -webkit-animation-duration: 1s;
          animation-duration: 1s; }

@-webkit-keyframes zoomInBounce {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

@keyframes zoomInBounce {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

.zoom-in-bounce {
  -webkit-animation-name: zoomInBounce;
          animation-name: zoomInBounce;
  -webkit-animation-duration: 1s;
          animation-duration: 1s; }

/* Hover classes 
   from http://ianlunn.github.io/Hover/ (slightly modified)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px); }
  50% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px); }
  100% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px); } }
@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px); }
  50% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px); }
  100% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px); } }

@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px); } }

@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px); } }

.hvr-bob {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
          transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  transition: background 0.5s ease; }
  .hvr-bob:hover {
    -webkit-animation-name: hvr-bob-float, hvr-bob;
            animation-name: hvr-bob-float, hvr-bob;
    -webkit-animation-duration: .3s, 1.5s;
            animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
            animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
            animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
            animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
            animation-direction: normal, alternate;
    background: black; }

/* Base styling
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#loading-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 32%;
  background: #262628;
  height: 10px;
  align-content: center; }

/* Animation
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.loading-bar-start {
  -webkit-animation: loadingBarStart ease-in;
          animation: loadingBarStart ease-in;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s; }

@-webkit-keyframes loadingBarStart {
  0% {
    width: 0%; }
  20% {
    width: 30%; }
  100% {
    width: 31%; } }

@keyframes loadingBarStart {
  0% {
    width: 0%; }
  20% {
    width: 30%; }
  100% {
    width: 31%; } }

.loading-bar-finish {
  -webkit-animation: loadingBarFinish ease-in-out;
          animation: loadingBarFinish ease-in-out;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s; }

@-webkit-keyframes loadingBarFinish {
  0% {
    width: 30%; }
  100% {
    width: 100%; } }

@keyframes loadingBarFinish {
  0% {
    width: 30%; }
  100% {
    width: 100%; } }

.loading-bar-color-repeater {
  -webkit-animation: loadingBarColorRepeater;
          animation: loadingBarColorRepeater;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  height: 10px; }

@-webkit-keyframes loadingBarColorRepeater {
  0% {
    background: #262628; }
  50% {
    background: white; }
  100% {
    background: #262628; } }

@keyframes loadingBarColorRepeater {
  0% {
    background: #262628; }
  50% {
    background: white; }
  100% {
    background: #262628; } }

/* General styling
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
  background: #F2B701; }

/* Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#root {
  padding: 0 10px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto; }

#grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: 60vh;
  grid-gap: 5px;
  align-items: center; }

/* Title
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#title-container {
  display: flex;
  justify-content: space-around; }
  #title-container .title {
    position: relative;
    transition: 1s width ease-out; }
    @supports (-webkit-background-clip: text) {
      #title-container .title {
        -webkit-background-clip: text;
        color: transparent;
        background-image: linear-gradient(to top, #000000 0%, #FFFFFF 0%, #FFFFFF 100%); } }

/* Hangman game
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#hangman-container {
  grid-column: 1/11; }
  #hangman-container .sub-title {
    margin: 0 auto;
    text-align: center;
    width: 80%;
    font-weight: bold; }
  #hangman-container #words {
    display: flex;
    justify-items: center;
    min-height: 120px; }
    #hangman-container #words .letter {
      width: 100%; }
      #hangman-container #words .letter:first-child {
        margin-left: 0; }
      #hangman-container #words .letter:last-child {
        margin-right: 0; }
      #hangman-container #words .letter:nth-child(1) {
        -webkit-animation-duration: 0.12s;
                animation-duration: 0.12s; }
      #hangman-container #words .letter:nth-child(2) {
        -webkit-animation-duration: 0.24s;
                animation-duration: 0.24s; }
      #hangman-container #words .letter:nth-child(3) {
        -webkit-animation-duration: 0.36s;
                animation-duration: 0.36s; }
      #hangman-container #words .letter:nth-child(4) {
        -webkit-animation-duration: 0.48s;
                animation-duration: 0.48s; }
      #hangman-container #words .letter:nth-child(5) {
        -webkit-animation-duration: 0.6s;
                animation-duration: 0.6s; }
      #hangman-container #words .letter:nth-child(6) {
        -webkit-animation-duration: 0.72s;
                animation-duration: 0.72s; }
      #hangman-container #words .letter:nth-child(7) {
        -webkit-animation-duration: 0.84s;
                animation-duration: 0.84s; }
      #hangman-container #words .letter:nth-child(8) {
        -webkit-animation-duration: 0.96s;
                animation-duration: 0.96s; }
      #hangman-container #words .letter:nth-child(9) {
        -webkit-animation-duration: 1.08s;
                animation-duration: 1.08s; }
      #hangman-container #words .letter:nth-child(10) {
        -webkit-animation-duration: 1.2s;
                animation-duration: 1.2s; }
      #hangman-container #words .letter p {
        font-family: "work_sansblack", "arial";
        color: #FFF;
        text-transform: uppercase;
        text-align: center; }
      #hangman-container #words .letter .letter-placeholder {
        position: relative;
        zoom: 0.75; }
  #hangman-container #attempts, #hangman-container #key-pressed {
    text-align: center; }

#hangman-btns {
  display: grid;
  grid-column: 3/9;
  justify-items: center; }
  #hangman-btns button p {
    font-family: "work_sansblack", "arial"; }

#score {
  position: absolute;
  bottom: 5%;
  right: 2%;
  width: 150px;
  text-align: right; }

button {
  display: block;
  text-align: center;
  background: #262628;
  color: #FFF;
  text-transform: uppercase;
  padding: 20px;
  margin: 10px 0;
  cursor: pointer; }

.hide {
  display: none !important; }

.hidden {
  opacity: 0; }

/* Media queries 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media all and (max-width: 480px) {
  #grid {
    grid-template-rows: auto; }
  #hangman-container #words {
    min-height: 70px; }
  #score {
    position: relative;
    display: flex;
    justify-items: center;
    grid-column: 4/9;
    text-align: center;
    width: auto;
    margin-top: 10px;
    right: initial; } }

.mobile-input {
  width: 300px;
  margin: 10px auto;
  display: flex;
  justify-items: center;
  height: 40px; }

input[type='text'],
input[type='number'],
textarea {
  font-size: 16px; }

/*  Boilerplate queries
  
  @media all and (max-width: 1024px) { } 

  @media all and (max-width: 1024px) { } 

  @media all and (max-width: 839px) {  }

  @media all and (max-width: 480px) {  }

*/


/*# sourceMappingURL=style.6d4d569388e3315655fc.css.map*/