/*
Theme Name: Card Draw
Template:   twentytwentyfour
*/
@import url("../twentytwentyfour/style.css");

/* #1 - Scale buttons on hover */
.btn a {
    transition: .2s ease-in-out;
}

.btn a:hover {
    transform: scale(1.05);
}

/* #2 - Ease-in-out banner */
#accueil div {
    animation: banner-ease-in-out 1.5s ease-in-out;
}

/* #3 - Rotation Logo */
.custom-logo-link {
    animation: rotation 6s ease-in-out 4s infinite;
}

/* #4 - Intro Page Sepia */
body.home {
    animation: intro-sepia 5s ease-out;
}

/* #5 - Hover Image Sepia */
img {
    transition: .2s ease-in-out;
}

img:hover {
    filter: sepia(100%);
}

/* #2 - Keyframes - Ease-in-out banner */
@keyframes banner-ease-in-out {
    0%{
        transform: translateX(-300px);
        opacity: 0;
    }

    100%{
        transform: translateX(0);
        opacity: 1;
    }
}

/* #3 - Keyframes - Rotation logo */
@keyframes rotation {
    0%{
        transform: rotate(0deg);
    }

    75%{
        transform: rotate(360deg);
    }

    100%{
        transform: rotate(360deg);
    }
}

/* #4 - Keyframes - Intro Page Sepia */
@keyframes intro-sepia {
    0%{
        filter: sepia(100%);
    }

    100%{
        filter: sepia(0%);
    }
}