﻿

.scale-hover {
    transition: 0.2s ease;
}



    .scale-hover:hover {
        transform: scale(1.2)
    }


.card-transition {
    /*box-shadow: 0 2px 6px rgba(0,0,0,0.1);*/
    box-shadow: rgba(0, 0, 0, 0.3) 0px 6px 8px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    transition: 0.2s ease, box-shadow 0.2s ease;
}

    .card-transition:hover {
        transform: translateY(-4px) scale(1.06);
        /*box-shadow: 0 6px 16px rgba(0,0,0,0.15);*/
        box-shadow: rgba(0, 0, 0, 0.7) 0px 12px 16px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
        z-index: 10;
    }

.opacity-animation {
    animation: opacity-a ease 2s
}

@keyframes opacity-a {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

.fadeInUp-animation {
    animation: 1.5s fadeInUp;
}

@keyframes fadeInHori {
    0% {
        transform: translateX(100%);
        opacity: 0.5;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

.fadeInHori-animation {
    animation: 2s fadeInHori;
}


/*Überprüfen, ob diese Animation noch genutzt werden*/
@keyframes blinds {
    to {
        background: rgb(31, 128, 134);
        background: linear-gradient(222deg, rgba(31, 128, 134, 1) 0%, rgba(9, 121, 72, 1) 35%, rgba(0, 221, 174, 0.9926773119122257) 66%, rgba(0, 212, 255, 1) 100%);
    }
}

.body-text {
    animation: text-fade-in 4s ease;
}

@keyfranes text-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
