/* The game boards properties */

/* @media all and (min-width: 768px){ */

body {
/*     
    display: -webkit-flex;
    -webkit-flex: 1 auto;
    flex: 1 auto;
    -webkit-order: 1;
    order: 1; */
    width: 100vw;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    background-image: url('images/oxalis.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-color: black;
}

/* board size */
.grid {
    /* -webkit-flex: 5 0px;
    flex: 5 0px;
    -webkit-order: 2;
    order: 2; */
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    max-height: 600px;
    max-width: 800px;
    perspective: 1000px;
}

.card {
    animation-name: rotate;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
    animation-play-state: paused;
    background-color: transparent;
    width: 200px;
    height: 200px;
    border-radius: 5em;
    /* -webkit-order: 3; */
    order: 3;
    
  }
  
  .card:active {
    animation-play-state:running;
  }
  
  @keyframes rotate {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotateY(180deg);
    }
  }  
/* Score */
h3 {
    font-family: fantasy;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    text-align: center;
    color: rgb(168, 238, 26);
}

.result {
    font-family: fantasy;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    text-align: center;
    color:rgb(91, 215, 14);
}

/* 
img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 5em;
    border: rgb(91, 215, 14);
    border-width: 4px;
    position: relative;
    transform-style: preserve-3d;
    transition-delay: 1s;
     
   
}  */

  /* .img:active ,
.img:focus {
  transform: rotateY(180deg);
} */

/* }

.userChoice {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    text-align: center;
    color:rgb(91, 215, 14);
}
.computerChoice {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    text-align: center;
    color:rgb(91, 215, 14);
} */