@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

body {
    min-height: 100vh;
    min-width: 100vh;
    background-color: #2F27CE;
    color: rgb(255, 255, 255);
    font-family: "Bebas Neue";
}
h1 {
    font-size: 4em;
    color: #ffffff;
    text-align: center;
}
p {
    font-size: 30px;
    color: #ffffff;
    text-align: center;
    font-weight: bold;
}

.actions {
    display: flex;
    justify-content: center;
}

.actions button {
    padding: 8px 16px;
    font-family: Bebas Neue;
    font-size: 30px;
    border-radius: 10px;
    background-color: #dddbf9;
    color: rgb(23, 12, 85);
    justify-content: center;
    transition: 0.2s all linear;
}

.actions button:hover {
    background-color: #0c25c7;
    color: #ffffff;
}

.grid-container {
    display: grid;
    justify-content: center;
    grid-gap: 16px;
    grid-template-columns: repeat(6, 140px); 
    grid-template-rows: repeat(2, calc(140px / 2 * 3));
}

.card {
    height: calc(140px / 2 * 3);
    width: 140px;
    border-radius: 10px;
    background-color: #DEDCFF;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s all ease in-out;
}

.front-image {
    width: 60px;
    height: 60px;
}

.card.flipped {
    transform: rotateY(180deg);
}

.front,
.back {
    backface-visibility: visible;
    position:absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.card .front {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card .back {
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(240,6.7%,17.6%,1)'/><path d='m25.57 20.66 13.77 13.77-4.91 4.91-13.77-13.77zm13.77 4.91L25.57 39.11l-4.91-4.91 13.77-13.54zm-20-11.14-4.91 4.91L.66 5.57 5.57.66zM5.57 19.34.66 14.43 14.43.66l4.91 4.91z'  stroke-width='1' stroke='none' fill='%2303a9f4ff'/><path d='M34.43 19.34 20.66 5.57 25.57.66l13.77 13.77zm-13.77-4.91L34.43.66l4.91 4.91-13.77 13.77zm-1.32 20-4.91 4.91L.66 25.57l4.91-4.91zM5.57 39.34.66 34.43l13.77-13.77 4.91 4.91z'  stroke-width='1' stroke='none' fill='%233f51b5ff'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
    background-position: center center;
    background-size: cover;
    backface-visibility: hidden;
}

.card .front{
    transform: rotateY('180deg');
}