* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  font-family: 'Mali', cursive,'Gill Sans';
  height: 100%;
  margin: 0;
  color: rgb(29, 121, 178);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-image: -webkit-radial-gradient(50% 65%, circle, white, rgb(254, 54, 54));
  width: 100%;
  height: 100%;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 10%;
  background-color: rgb(29, 121, 178);
}

.logo img {
  width: 90%;
  height: 90%;
}

.row {
  display: flex;
}

.players {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  height: 30%;
}

#player1 img, #player2 img {
  height: 60%;
}

#player1.active img {
  animation: mover 0.2s infinite  alternate;
}

#player2.active img {
  animation: mover 0.2s infinite  alternate;
}

@keyframes mover {
  100% { transform: translateY(-5px); }
}

#player1 .score, #player2 .score {
  font-size: 30px;
}

#player1, #player2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
}

.playing-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
}

.player1.clicked {
  background-image: url(../images/rocket-usa.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 75%;
}

.player2.clicked {
  background-image: url(../images/rocket-nrthkorea.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 75%;
}

.winner {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 20%;
  width: 100%;
  font-size: 2em;
}

.final-score {
  font-size: 1.5em;
}

.winner-player1 {
  width: 90%;
  height: 90%;
  background-image: url(../images/trump-rocket-winner.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.winner-player2 {
  width: 90%;
  height: 90%;
  background-image: url(../images/kim-rocket-winner.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.box {
  width: 25vw;
  height: 25vw;
  border: 1px solid rgb(29, 121, 178);
}

.row:first-child .box,
.row:last-child .box{
  border-top: 0;
  border-bottom: 0;
}

.row:first-child .box:first-child,
.row:first-child .box:last-child,
.row:last-child .box:first-child,
.row:last-child .box:last-child {
  border: 0;
}

.row .box:first-child,
.row .box:last-child {
  border-right: 0;
  border-left: 0;
}

.new-game-btn {
  color: rgb(255, 253, 79);
  border: 0;
  background-color: rgb(29, 121, 178);
  width: 100%;
  height: 10%;
  font-size: 2.5em;
  font-family: 'Mali', cursive,'Gill Sans';
}

.hidden {
  display: none;
}