body{
    background: url("https://stepik.org/media/attachments/lesson/374893/world.png");
    font-family: "JetBrains Mono", monospace;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.cards-container{
    width: 600px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.card{
    width: 180px;
    height: 180px;
    position: relative;
    transition: all 1s linear;
    transform-style: preserve-3d;
}

.front,
.back{
    height: 180px;
    width: 180px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    border-radius: 15px;
    flex-direction: column;
    transform: rotateX(0deg)  /*for mozilla's bug*/

}
.back{
    z-index: 1;
    background: orange;
    color: #F9EFE5;
    transform: rotateY(180deg);
}

.front{
    z-index: 2;
    background: #F9EFE5;
    color: orange;
    backface-visibility: hidden;

}

/*.card:hover{*/
/*    transform: rotateY(180deg);*/

/*}*/
input{
    border: none;
    border-radius: 6px;
    padding: 0 8px;
}

button{
    background: orange;
    color: white;
    padding: 3px 9px;
    border-radius: 8px;
    border: none;
}

.submission{
    width: 600px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}