#kontener {
    border: 3px dotted rgba(121, 41, 41, 0.699);
    background-color: rgba(0, 0, 0, 0.13);
    height: 150px;
    width: 150px;

    perspective: 1000px;

    position: relative;
}

#card {
    transform-style: preserve-3d;
    transform-origin: 100%;

    transition: 1s;

    position: absolute;

    width: 100%;
    height: 100%;
}

.face {
    position: absolute;

    backface-visibility: hidden;

    color: white;
    width: 100%;
    height: 100%;
    background-color: black;
    
    display: flex;
    align-items: center;
    justify-content: center; 


}


.front {

    position: absolute;

    background-color: rgb(66, 9, 9);

    /* transform: rotate(-35deg); */

}

.back {
    position: absolute;

    
    transform: rotateY(180deg);
    
    background-color: rgb(31, 35, 94);
}


#card:hover {
transform: translate(-100%) rotateY(180deg)
}