/* app css stylesheet */

/* general setups */
body {
    background:	black;
    color: white;
}
h3 {
  text-align: center;
}

.full-width {
  height: 100vh;
  width: 100vw;
}

.full-width i {
  font-size: 60px;
}


/* result bar */
.result-bar {
  background: rgba(255,255,255,0.20);
  padding: 10px;
}

.result-bar span {
    font-size: 30px;
    font-weight: bold;
    margin: 5px;
}

/* game card with actions bar */
.game-card {
  padding: 0;
  width: 200px;
  height: 200px;
  margin: 10px;
  background: #ffffff;
  color: 	#666666;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
  transition: all .2s ease-in-out;
}

.game-card img {
  width: 100%;
  height:100%;
}

/* chosing scale effect*/
.choice-card  {
   transition: all .2s ease-in-out;
}

.choice-card :hover {
   -ms-transform: scale(1.1); /* IE 9 */
    -webkit-transform: scale(1.1); /* Safari */
    transform: scale(1.1);
}



.actions {
  position: absolute;
  bottom: 0px;
  width: 100%;
}

/* heroes  */
.heroes-card {
  position: relative;
  padding: 10px;
  border-radius: 100%;
  background: #ffffff;
  width: 200px;
  height: 200px;
}

.heroes-card img {
  width: 60%;
  height: 60%;
}

.heroes-card:hover span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  color: white;
  font-weight: bold;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.40);
  justify-content: center;
  align-items: center;
  display: flex;
  font-size: 15px;
}

.heroes-card span {
  display: none;
}

/* players heroes images */
.player-image {
  width: 50px;
  height: 50px;
}

.game-result {
  width: 100%;
}

.game-result img{
  width: 200px;
  height: 200px;
}

.animated {
  -webkit-animation-duration: .7s;
  animation-duration: .7s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-25px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

/* media query */
@media screen and (max-width: 900px) {
    span {
      font-size: 8px;
    }
    h3 {
      font-size: 14px;
    }
    .game-card {
      width: 100px;
      height: 100px;
      margin: 3px;
    }
    button {
      text-align: center;
    }

    .full-width .game-card {
      width: 170px;
      height: 170px;
    }

    .heroes-card { 
      width: 100px;
      height: 100px;
      padding: 10px;
    }

    .game-result img{
      width: 100px;
      height: 100px;
    }

    .heroes-card img {
      width: 90%;
      height: 90%;
    }
}