body {
  font-family: 'Bungee', cursive;
  display: flex;
  justify-content: center;
}

#gametime {
  margin: 5vh;
  min-height: 600px;
  height: auto;
  width: 600px;
  background: white;
  padding: 10px;
  border: 10px solid transparent;
  border-image: linear-gradient(to right, #efb837 0%, #e03933 100%);
  border-image-slice: 1;
  -webkit-animation: transitionSmoother ease-in .5s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: transitionSmoother ease-in .5s; /* Firefox < 16 */
  animation: transitionSmoother ease-in .5s;
}

h1 {
  font-size: 45px;
  text-align: center;
  font-weight: 800;
  letter-spacing: 50px;
  margin-left: 50px;
  padding: 5px;
}
.glow {
  animation: glow 1s infinite alternate;
}
table {
  display: inline-block;
}

th, td {
  border: 3px solid black;
}

th, td, .letter-guess, .letter-last {
  text-align: center;
  vertical-align: middle;
}

.header-tile {
  font-size: 4em;
  -webkit-animation: dragLeft ease-in .5s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: dragLeft ease-in .5s; /* Firefox < 16 */
  animation: dragLeft ease-in .5s;
}

.dash {
  font-family: cursive;
  vertical-align: 5px;
}

input {
  border: none;
}

.letter-tile, .input-tile {
  font-size: 4em;
}

.letter-guess, .letter-last {
  font-family: 'Bungee', cursive;
  font-size: 1em;
  height: 100%;
  width: 100%;
  background: none;
  padding: none;
  box-sizing: border-box;
}

.letter-guess:focus {
  outline: none;
  margin:-5px -1px;
  border: 5px solid #efb837;
}

.letter-last:focus {
  outline: none;
  margin: -5px 0;
  border: 5px solid #F23C55;
}

.orange {
  background: orange;
  background: linear-gradient(to bottom right, #ffa84c, #ff7b0d);
}

.yellow {
  background: yellow;
  background: linear-gradient(to bottom right, #fff173, #ffe921);
}

footer {
  display: flex;
  height: 80px;
}

article {
  height: 40px;
  width: 250px;
  text-align: center;
  margin: auto;
}

p {
  margin-top: 10px;
}

#score {
  border: 8px solid #efb837;
  -webkit-animation: scoreAnimation ease-in 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: scoreAnimation ease-in 2s; /* Firefox < 16 */
  animation: scoreAnimation ease-in 2s;
}

#high-score {
  border: 8px solid #e03933;
  -webkit-animation: highScoreAnimation ease-in 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: highScoreAnimation ease-in 2s; /* Firefox < 16 */
  animation: highScoreAnimation ease-in 2s;
}
.mystery-word {
  display: inline-block;
  position: relative;
  width: 200px;
  left: 80px;
  top: -10px;
  font-size: 50px;
  color: white;
  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

.mystery {
  color: #ff7b0d;
  font-family: 'Bungee';
}

@keyframes transitionSmoother { /* FOR THE PAGE ON REFRESH */
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes dragLeft { /* FOR THE FIRST MYSTERY TILE */
  0% {
    opacity: 0;
    transform: translate(50px, 0px);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}

@keyframes scoreAnimation {
  0% {
    background-color: #efb837;
  }
  100% {
    background-color: #FFFFFF;
  }
}

@keyframes highScoreAnimation {
  0% {
    background-color: #e03933;
  }
  100% {
    background-color: #FFFFFF;
  }
}
@keyframes glow {
        from {text-shadow: none;}
        to {text-shadow: 0px 0px 50px #FF9933;
        text-shadow: 0px 0px 40px #FF9933;
        text-shadow: 0px 0px 30px #FF9933;
        text-shadow: 0px 0px 20px #FF9933;
        text-shadow: 0px 0px 10px #FF9933;
        color: #FF9933;}
}
@media screen and (max-width: 595px) {
  #gametime {
    width: 250px;
  }
  h1 {
    font-size: 25px;
    text-align: center;
    font-weight: 800;
    letter-spacing: 30px;
    margin-left: 25px;
    padding: 5px;
  }
  .mystery-word {
    display: none;
  }
  p {
    margin-top: 15px;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 800;
  }
}