.frog_img {
    width: 90px;
    height: 90px;
}

.field{
  width: 400px;
  margin: auto;
  display: flex;
  justify-content:space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}
.radiobuttons{
  width: 400px;
  margin: auto;
  display: flex;
  padding-top: 20px;
}

.playground{
    width: 400px;
    margin-left: 33%;
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
}

/* this is the card that will be flipped*/
.card {
    background-color: transparent;
    width: 100px;
    height: 100px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    cursor: pointer;
  }

  .card .clicky {
    cursor: default;
  }
  
  /* this container defines front/back of the card */
  .inner-card {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .card {
    transform: rotate(0deg);
  }

  .card .clicky {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }

  
  /* Style the back side */
 .back {
    background-color: transparent;
    transform: rotateY(180deg);
  }

  .field_box{
    padding: 4px;
  }

  .newgame{
    cursor: pointer;
    background-color: aquamarine;
  }


  @media only screen and (max-width: 650px) {
    .playground{
        margin: auto;
    }
}