@font-face {
  font-family: AmongUs1; src: url(./among-us1.ttf);
}

@font-face {
  font-family: AmongUs2; src: url(./among-us2.ttf);
}

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  background-image: url(./images/background1.jpg);
  background-size: cover;
  background-color: black;
}
.no-image {
  background-image: none;
  background-color: black;
}

/* ********** PLAYER SCREEN ********** */

.player {
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 400px;
}

.buttons {
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.length {
  width: 300px;
  height: 100vh;
  display: none;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.length-butt,
.start-butt {
  width: 200px;
  height: 75px;
  border: 3px solid white;
  border-radius: 10px;
  background-color: black;
  color: white;
  font-family: AmongUs2;
  font-size: 30px;
  box-shadow: 0 5px 0 #dbdbdb;
}

h1 {
  font-family: 'AmongUs1', sans-serif;
  color: white;
  font-size: 50px;
}

.selected {
  background: none;
  font-size: 0px;
  border: none;
  box-shadow: none;

}

.color {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.color-h1 {
  width: 300px;
  display: flex;
  justify-content: center;
}

.color-buttons {
  width: 170px;
  display: flex;
  flex-wrap: wrap;
}

.color-butt {
  height: 75px;
  width: 75px;
  margin: 5px;
  border: 3px solid #fff;
  border-radius: 10px;
  background-color: black;
}

#red {
  background-image: url(./images/red-char.png);
  background-size: contain;
  background-position: center;
}

#hit-red {
  background-image: url(./images/red-dead.png);
  background-size: contain;
  background-position: center;
}

#destroyed-red {
  background-image: url(./images/red-ghost.png);
  background-size: contain;
  background-position: center;
  animation: hover 2s infinite linear;
}

#pink {
  background-image: url(./images/pink-char.png);
  background-size: contain;
  background-position: center;
}

#hit-pink {
  background-image: url(./images/pink-dead.png);
  background-size: contain;
  background-position: center;
}

#destroyed-pink {
  background-image: url(./images/pink-ghost.png);
  background-size: contain;
  background-position: center;
  animation: hover 2s infinite linear;
}

#black {
  background-image: url(./images/black-char.png);
  background-size: contain;
  background-position: center;
}

#hit-black {
  background-image: url(./images/black-dead.png);
  background-size: contain;
  background-position: center;
}

#destroyed-black {
  background-image: url(./images/black-ghost.png);
  background-size: contain;
  background-position: center;
  animation: hover 2s infinite linear;
}

#brown {
  background-image: url(./images/brown-char.png);
  background-size: contain;
  background-position: center;
}

#hit-brown {
  background-image: url(./images/brown-dead.png);
  background-size: contain;
  background-position: center;
}

#destroyed-brown {
  background-image: url(./images/brown-ghost.png);
  background-size: contain;
  background-position: center;
  animation: hover 2s infinite linear;
}

#blue {
  background-image: url(./images/blue-char.png);
  background-size: contain;
  background-position: center;
}

#hit-blue {
  background-image: url(./images/blue-dead.png);
  background-size: contain;
  background-position: center;
}

#destroyed-blue {
  background-image: url(./images/blue-ghost.png);
  background-size: contain;
  background-position: center;
  animation: hover 2s infinite linear;
}

#orange {
  background-image: url(./images/orange-char.png);
  background-size: contain;
  background-position: center;
}

#hit-orange {
  background-image: url(./images/orange-dead.png);
  background-size: contain;
  background-position: center;
}

#destroyed-orange {
  background-image: url(./images/orange-ghost.png);
  background-size: contain;
  background-position: center;
  animation: hover 2s infinite linear;
}

#cyan {
  background-image: url(./images/cyan-char.png);
  background-size: contain;
  background-position: center;
}

#hit-cyan {
  background-image: url(./images/cyan-dead.png);
  background-size: contain;
  background-position: center;
}

#destroyed-cyan {
  background-image: url(./images/cyan-ghost.png);
  background-size: contain;
  background-position: center;
  animation: hover 2s infinite linear;
}

#green {
  background-image: url(./images/green-char.png);
  background-size: contain;
  background-position: center;
}

#hit-green {
  background-image: url(./images/green-dead.png);
  background-size: contain;
  background-position: center;
}

#destroyed-green {
  background-image: url(./images/green-ghost.png);
  background-size: contain;
  background-position: center;
  animation: hover 2s infinite linear;
}

#color-hide {
  background: none;
  border: none;
}

.orientation {
  display: none;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.horizontal,
.vertical {
  width: 200px;
  height: 75px;
  border: 3px solid white;
  border-radius: 10px;
  background-color: black;
  color: white;
  font-family: AmongUs2;
  font-size: 30px;
  box-shadow: 0 5px 0 #dbdbdb;
  margin-top: 30px;
}

.start-game {
  display: none;
}

.cell {
  height: 12.5%;
  width: 12.5%;
  border: 1px solid rgb(146, 146, 146);
  border-radius: 7px;
  font-size: 0px;
}

.void {
  border: none;
  background: none;
  height: 0px;
  width: 0px;
}

.place-ship {
  display: none;
}

/* ********** GRIDS ********** */

.grids {
  display: none;
  flex-direction: column;
  height: 100vh;
  justify-content: space-evenly;
  align-items: center;
}

.click-block {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100vw;
  background: none;
}

.player-grid,
.comp-grid {
  height: 650px;
  width: 650px;
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
}

.p-turn {
  display: none;
}

.c-turn {
  display: none;
}

.choose-position {
  display: none;
}

.column {
  flex-direction: column;
}

.comp-grid {
  background-color: none;
}

#miss {
  background-image: url(./images/gun.png);
  background-size: 81px 81px;
}



/* ********** WIN SCREEN ********** */

.winner {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: fadeIn 3s linear;
}

.victory,
.defeat {
  color: #4f4fff;
  font-family: AmongUs2;
  display: flex;
  margin-bottom: 100px;
  font-size: 100px;
}

.winner img {
  display: flex;
  width: 100vw;
  height: auto;
}

.play-again {
  height: 162px;
  width: 110px;
  background-image: url(./images/play-again.png);
  background-size: contain;
  background-color: black;
  border: none;
}

.loser {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: fadeIn 3s linear;
}

.defeat {
  color: red;
}

.show {
  display: flex;
}

.show-block {
  display: block;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes hover {
  0% {
    background-position-y: 1px;
  }
  50% {
    background-position-y: -3px;
  }
  100% {
    background-position-y: 1px;
  }
}