body{
    background: #000000;
    background: linear-gradient(144deg, rgba(0, 0, 0, 1) 0%, rgba(0, 3, 156, 1) 11%, rgba(0, 0, 191, 1) 78%, rgba(0, 0, 0, 0.9) 100%);
    height: 120dvh;
    overflow-y: scroll;
}

.main__content-wrapper{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    align-content: top;
    justify-content: flex-end;
    align-items: center;
    overflow-x: hidden;
}

.container__content-board{
    background-color: transparent;
    max-width: 1080px;
    border: 3px solid #000000;
    border-radius: 1rem;
    justify-items: center;
    width: 100%;
    margin-top: 1.5rem;
}

.board__button{
    font-size: 1.5rem;
    font-weight: 600;
    width: 50rem;
    padding: 1rem;
    margin: 1rem;
    border-radius: 1rem;
    border: none;
    text-align: -webkit-center;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
}

.content__squares-container {
    padding: 1rem;
    margin: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    perspective: 1000px;
    font-size: 1.8rem;
    font-weight: 600;
}

.card-wrapper {
    position: relative; 
    width: 15rem;
    height: 15rem;
    border-radius: 1rem;
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    cursor: pointer;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.card-front {
    background-color: #15163d;
    color: white;
    transform: rotateY(0deg);
    transition: 0.6s ease-in-out;
}

.card-front:hover, .card-back:hover{
    background-color: #212155;
}

.card-back {
    background-color: #050525;
    color: white;
    transform: rotateY(180deg);
    transition: 0.6s ease-in-out;
    font-size: 9rem;
}

.card-wrapper.show-card-verse .card-front {
    transform: rotateY(180deg);
}

.card-wrapper.show-card-verse .card-back {
    transform: rotateY(0deg);
}

.squares__square-element p{
    font-size: 3rem;
}

.card-back.wrong-pair{
    border: 1.5px solid #ff0000;
}

.card-back.right-pair{
    border: 1.5px solid #0eac0e;
    background-color: #086408;
}
 
.card-wrapper.right-card-verse .card-back{
    transform: rotateY(0deg)!important;
    position: relative; 
    width: 15rem;
    height: 15rem;
    border-radius: 1rem;
}


.right-pair-disappear{
    animation: ShakeSquare 3s forwards;
}

@keyframes makeDisappear {
    to{
        animation: ShakeSquare 3s linear infinite;
        opacity: 0;
        display: none;
    }
}

@keyframes ShakeSquare {
     0% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    25% {
        transform: matrix3d(0.99939, 0, 0.03489, 0, 0, 1, 0, 0, -0.03489, 0, 0.99939, 0, -5, 0, 0, 1);
    }
    50% {
        transform: matrix3d(0.99939, 0, -0.03489, 0, 0, 1, 0, 0, 0.03489, 0, 0.99939, 0, 5, 0, 0, 1);
    }
    75% {
        transform: matrix3d(0.99939, 0, 0.03489, 0, 0, 1, 0, 0, -0.03489, 0, 0.99939, 0, -5, 0, 0, 1);
    }
    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        display: none;
    }
}


.content__squares-final_screen{
    width: 100%;
    height: 100%;
    text-align: -webkit-center;
    text-align: center;
    margin: 2rem 0.5rem;
    color: #ffffff;
    display: none;
}

.content__squares-final_screen h4{
    font-size: 2rem;
    padding: 1.5rem;
}
.content__squares-final_screen p{
    font-size: 1.2rem;
    padding: 1rem;
}