.thecard {
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.8s ease;
    border-radius: 2rem;
    padding: 1.5rem;
    text-align: center;
    margin: auto;
}

.thecard:hover {
    transform: rotateY(180deg);
    width: 300px;
    height: 200px;
}

.thefront {
    position: absolute;
    padding: 1.5rem;
    flex: 1;
    background: white;
    border-radius: 2rem;
    border: rgb(53, 53, 53) 0.1rem solid;
    border-color: rgb(163, 163, 163);
    text-align: center;
    backface-visibility: hidden;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    z-index: 1;
}

.theback {
    position: relative;
    padding: 1.5rem;
    flex: 1;
    background: rgb(7, 155, 155);
    border-radius: 2rem;
    border: rgb(53, 53, 53) 0.1rem solid;
    border-color: rgb(163, 163, 163);
    text-align: center;
    backface-visibility: hidden;
    overflow: hidden;
    transform: rotateY(180deg);
    text-align: justify;
    -webkit-backface-visibility: hidden;
    z-index: 2;
}

.the-maine-card-container {
    padding: 1.5rem;
    flex: 1;
    border-radius: 2rem;
    text-align: center;
    perspective: 1000px;
}

My flipcard animation flickers and glitches when mouse hovers over it and only flips is the mouse is placed at the center of the card.I added a z-index to help it transition smoother, but that did not work. Does anyone know what might be the problem?