.flip-card {
    background-color: transparent;
    width: 100%;
    aspect-ratio: 1 / 1;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flip-card-back {
    transform: rotateY(180deg);
}

.flip-card-front img, .flip-card-front svg {
    width: 50% !important;
    height: 50% !important;
    object-fit: contain !important;
}

.flip-card-front img:not(.dark *), .flip-card-front svg:not(.dark *) {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.411));
}

.dark .flip-card-front img, .dark .flip-card-front svg {
    filter: drop-shadow(1px 1px 7px rgba(255, 255, 255, 0.205));
}

/* .flip-card-front img, .flip-card-front svg {
        filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
} */

.grid.grid-cols-2 img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

@keyframes spinY {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.grid.grid-cols-2 a:hover img.spin {
    animation: spin 1s linear infinite;
}

.grid.grid-cols-2 a:hover img.spinY {
    animation: spinY 1s linear infinite;
}

.modal-overlay {
    transition: opacity 0.3s ease;
}

@keyframes gradientShift {
    0% { 
        /* box-shadow: 0 4px 10px 0 #e4ffe6,
            0 0 20px 0 #e4ffe6; */
        background-position: 0% 50%;
        /* border-color: #e4ffe6;  */
    }
    50% { 
        /* box-shadow: 0 4px 10px 0 #d0e7ff,
            0 0 20px 0 #d0e7ff; */
        background-position: 100% 50%;
        /* border-color: #d0e7ff;  */
    }
    100% { 
        /* box-shadow: 0 4px 10px 0 #ffe4f1,
            0 0 20px 0 #ffe4f1; */
        background-position: 0% 50%;
        /* border-color: #ffe4f1; */
    }
}

.dark header {
    background: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), #3b5f3d, #4b472d, #29435c, #4d2126, #4e3b74, #632c47, #204353);
    background-size: 400% 400%;
    animation: gradientShift 5s ease;
}

header {
    background: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), #e4ffe6, #fff8d3, #d0e7ff, #ffe1e4, #eae0ff, #ffe4f1, #bcecff);
    background-size: 400% 400%;
    animation: gradientShift 5s ease;
}