* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Cairo", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
        "slnt" 0;
}

body {
    background: #f2f2f2;
}

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

.crd {
    width: 50%;
    height: 50vh;
    margin: 5rem;
    perspective: 1500px;
    align-self: end;
}

.front,
.back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    backface-visibility: hidden;
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.front {
    background-image: url(../images/buildings.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 2;
    color: #fefefe;
    transform: rotateY(0deg);
}

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

/* Hover Triggers applied to the parent container */
.crd:hover .front {
    transform: rotateY(180deg);
}

.crd:hover .back {
    transform: rotateY(0deg);
}


@keyframes scroll {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}