body, html {
    height: 100%;
    margin: 0;
    perspective: 1000px
    font-family: 'Roboto', sans-serif;
}

.movingObject {
    /* a little bit of shadow (beware the png transparency) */
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4));
    /* -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4)); */
    transform: translateZ(0);
  }

.flip-box {
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
  
/* This container is needed to position the front and back side */
.flip-animation-first-half {
    transition: transform 0.2s;
    transform-style: preserve-3d linear;
    transform: rotateY(90deg);
}

.flip-animation-second-half {
    transition: transform 0.2s;
    transform-style: preserve-3d linear;
    transform: rotateY(180deg);
}

.changeBoardButton {
    background: black;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
}