@import '../../basicStyle.css';

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.title {
  position: relative;
  color: var(--light);
  letter-spacing: 4px;
  margin: 30px auto 60px auto;
  text-align: center;
  line-height: 70px;
  text-transform: uppercase;
}

.title::after,
.title::before {
  content: '';
  position: absolute;
  top: 87px;
  right: -65px;
  width: 150px;
  height: 35px;
  background: no-repeat url('img/bullet-01.svg');
  background-size: contain;
}

.title::before {
  top: 87px;
  left: -75px;
  transform: scaleX(-1);
}

.game-container {
  position: relative;
  margin: 0 auto;
  width: 500px;
  min-height: 300px;
}

.skeleton {
  position: absolute;
  top: 83px;
  left: 70px;
  width: 350px;
}

.enemy {
  width: 100%;
  background-size: contain;
}

#dead_eyes {
  opacity: 0;
}

.revolver1,
.revolver2 {
  position: absolute;
  width: 300px;
}

#bum1,
#bum2 {
  opacity: 0;
}

.revolver1 {
  bottom: 68px;
  left: -260px;
  transform: rotate(-45deg);
}

.revolver2 {
  bottom: 68px;
  right: -250px;
  transform: scaleX(-1) rotate(-45deg);
}

.text-bullets {
  width: 400px;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 180px;
  left: 55px;
}

.bullet {
  margin-right: 5px;
  position: relative;
}

.bullet-letter {
  position: absolute;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  color: var(--dark);
  top: 23px;
  left: 5px;
  font-size: 35px;
}

.bullet-img {
  width: 30px;
}

.word {
  position: absolute;
  width: 65px;
  height: 65px;
  bottom: 93px;
  right: 219px;
  border: 3px solid var(--light);
  outline: none;
  background-color: var(--dark);
  color: var(--light);
  font-family: inherit;
  text-transform: uppercase;
  font-size: 25px;
  padding: 5px 10px;
  letter-spacing: 3px;
  text-align: center;
}


.time {
  display: flex;
  justify-content: center;
  width: 250px;
  position: absolute;
  bottom: 36px;
  right: 125px;
  color: var(--light);
  text-transform: uppercase;
  font-size: 20px;
}

.lives {
  position: absolute;
  display: flex;
  width: 100px;
  height: 80px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: red;
  top: 120px;
  right: 205px;
  z-index: 10;
  text-align: center;
  text-transform: uppercase;
}

.lives__value {
  font-size: 25px;
  letter-spacing: 3px;
  color: var(--dark);
}

.lives__heart {
  background-color: var(--dark);
  display: inline-block;
  height: 30px;
  margin: 0 10px;
  position: relative;
  top: -8px;
  transform: rotate(-45deg);
  width: 30px;
}

.lives__heart:before,
.lives__heart:after {
  content: "";
  background-color: var(--dark);
  border-radius: 50%;
  height: 30px;
  position: absolute;
  width: 30px;
}

.lives__heart:before {
  top: -15px;
  left: 0;
}

.lives__heart:after {
  left: 15px;
  top: 0;
}

.revolver2 {
  transform: scaleX(-1) rotate(-45);
}

.shout1 {
  animation: shout1 .5s ease;
}

.shout2 {
  animation: shout2 .2s ease;
}

.game-window {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--light);
  z-index: 100;
}

.game-window__title {
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 20px;
}

.difficulty {
  position: relative;
  display: flex;
  width: 350px;
  min-height: 50px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--dark);
  color: var(--light);
  font-size: 25px;
  font-family: inherit;
  text-transform: uppercase;
  padding: 10px 10px;
  letter-spacing: 5px;
  outline: none;
  border: none;
}

.select-section {
  position: relative;
}

.closed::after,
.opened::after {
  content: ''; 
  position: absolute;
  right: 15px; 
  bottom: 3px; 
  border: 15px solid transparent; 
  border-top: 15px solid var(--light); 
  pointer-events: none;
}

.opened::after {
  transform: rotate(-180deg);
  bottom: 20px;
}

.select::-ms-expand {
  display: none;
}

.select:hover {
  border: 3px solid var(--dark);
}

.start-button {
  font-family: inherit;
  font-size: 30px;
  background-color: var(--light);
  border: 5px solid var(--dark);
  padding: 5px 10px;
  letter-spacing: 3px;
  margin-top: 40px;
}

.start-button:hover {
  background-color: var(--dark);
  color: var(--light);
}

.game-results {
  display: none;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
  z-index: 101;
}

.game-result__title {
  font-size: 30px;
  margin-bottom: 10px;
}

.game-result__value {
  background-color: var(--dark);
  color: var(--light);
  padding: 10px;
  letter-spacing: 3px;
  font-size: 20px;
}


@keyframes shout2 {
  0% {
    transform: scaleX(-1) rotate(-45)
  }

  50% {
    transform: scaleX(-1) rotate(-55deg)
  }

  100% {
    transform: scaleX(-1) rotate(-45)
  }
}

@keyframes shout1 {
  0% {
    transform: rotate(-45)
  }

  50% {
    transform: rotate(-55deg)
  }

  100% {
    transform: rotate(-45)
  }
}