* {
  box-sizing: border-box;
  font-family: "VT323", monospace !important;
  font-size: 21px !important;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.screen {
  background-image: url("http://gilleskurt.com/thefearsomethree/bgprops.png"), url("http://gilleskurt.com/thefearsomethree/bg.png");
  height: 500px;
  overflow: hidden;
  position: relative;
  width: 500px;
}

@keyframes cloudToRight {
  to {
    transform: translateX(700px);
  }
}
.cloud {
  background-image: url("http://gilleskurt.com/thefearsomethree/clouds.png");
  height: 200px;
  position: absolute;
  width: 200px;
}

.cloud--1 {
  animation: cloudToRight 120s linear infinite;
  transform: translateX(-110px);
}

.cloud--2 {
  animation: cloudToRight 200s 10s linear infinite;
  transform: translateX(-200px);
  background-position-x: 250px;
}

@keyframes blink {
  0%, 30% {
    opacity: 0;
  }
  32%, 100% {
    opacity: 1;
  }
}
.opening-screen__start-button {
  background-color: transparent;
  border: 0;
  color: #F59600;
  animation: blink 1.5s 3.5s linear infinite;
  background-image: url("http://gilleskurt.com/thefearsomethree/press-start.png");
  height: 500px;
  opacity: 0;
  width: 500px;
}
.opening-screen__start-button:hover {
  cursor: pointer;
}

@keyframes topDownFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.opening-screen__title {
  animation: topDownFadeIn 1.5s 1s ease forwards;
  opacity: 0;
  position: absolute;
  transform: translateY(-20%);
}

.opening-screen__figures {
  animation: topDownFadeIn 2s 1s ease forwards;
  opacity: 0;
  position: absolute;
  transform: translateY(-5%);
}

@keyframes moveUp {
  to {
    transform: translateY(-5%);
  }
}
.has-message .opening-screen__figures,
.has-message .opening-screen__title {
  animation: moveUp 0.4s ease forwards;
  opacity: 1;
  transform: translateY(0);
}

.continue-button {
  background-color: transparent;
  border: 0;
  color: #F59600;
}
.continue-button:hover {
  cursor: pointer;
}
.continue-button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.game-over .message-box,
.game-end .message-box {
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  bottom: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, 50%);
}

.opening-screen .message-box {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.message-box {
  background-color: rgba(151, 106, 68, 0.9);
  border-radius: 7px;
  padding: 15px;
  position: absolute;
  bottom: 7px;
  transform: translateY(0);
  opacity: 1;
}
.message-box.is-hidden {
  opacity: 0;
  transform: translateY(20%);
}

.message-box--full {
  left: 7px;
  width: calc(100% - 15px);
}

.message-box--half {
  right: 7px;
  width: calc(100% - 150px);
}

@keyframes moveIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes goner {
  to {
    opacity: 1;
    transform: rotate(-30deg) translate(-100%);
  }
}
.sheriff {
  animation: moveIn 1s ease forwards;
  background-image: url("http://gilleskurt.com/thefearsomethree/character-spritesheet.png");
  background-position-x: 0;
  background-position-y: -618px;
  height: 200px;
  opacity: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200px;
  transform: translateX(-10%);
  z-index: 2;
}
.sheriff.is-armed {
  background-position-x: -206px;
}
.sheriff.is-dead {
  background-position-x: -618px;
}
.sheriff.is-gone {
  transform: translateX(0);
  animation: goner 1s ease forwards;
}
.sheriff.is-shooting {
  background-position-x: -412px;
}

.opponent {
  animation: moveIn 1s ease forwards;
  background-image: url("http://gilleskurt.com/thefearsomethree/character-spritesheet.png");
  background-position-x: 0;
  height: 200px;
  opacity: 0;
  position: absolute;
  right: 100px;
  bottom: 70px;
  width: 200px;
  transform: translateX(10%);
}
.opponent.is-armed {
  background-position-x: -206px;
}
.opponent.is-dead {
  background-position-x: -618px;
}
.opponent.is-shooting {
  background-position-x: -412px;
}

.opponent--1 {
  background-position-y: 0;
}

.opponent--2 {
  background-position-y: -206px;
}

.opponent--3 {
  background-position-y: -412px;
}

.is-hidden {
  display: none;
}

.shoot-button {
  background-color: transparent;
  border: 0;
  color: #F59600;
  text-align: center;
  width: 100%;
}
.shoot-button:hover {
  cursor: pointer;
}
.shoot-button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}