@import url(../css/general.css);
@import url(../css/animations.css);
@import url(../css/reveal.css);


.title{
    display: flex;
    flex-direction: column;

    width : 70%;

    margin: 0 auto; 
}

.title h2{
    font-family: 'Lexend', sans-serif;
    font-size: 3rem;
}

.title p{
    margin-left: 3rem;
    width : 70%;
}

.categories-buttons{
    display: flex;

    margin : 0 auto;

    justify-content: space-between;
    width : 50%;
}

.button-category{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding : 1rem;
    margin-top: 3rem;

    background-color: var(--primary);
    width : 20rem;

    color : var(--dark);

    border-radius: 0.6rem;
}



.button-category.type{
    
    background-color: var(--secondary);
}



.button-category p{
    margin : 0;
    width : 70%;
    text-align: center;

    font-size: 1.2rem;
    transition : 200ms ease;
}

.button-category p span{
    font-weight: 600;
}

.button-category img{
    margin-top: 1rem;
    width : 15%;
    transition : 200ms ease;
}

.button-category:hover p{
    color: var(--primary);
}

.button-category.type:hover p{
    color : var(--secondary)
}

.button-category:hover img{
    margin : 0;
    width : 19%;
    transform : translateY(-50%);

}

.button-category.clicked img{
    animation: au-revoir 1s ease-in-out 0s 1 normal forwards;
}

@keyframes au-revoir{
    0%{
        transform : translate(0%, -50%);
        opacity: 1;
    }

    50%{
        transform : translate(-50%, -50%);
        opacity: 1;
    }

    100%{
        transform : translate(500%, -50%);
        opacity: 0;
    }
}


@media only screen and (max-width: 480px){
    .title{
        width : 100%;
    }

    .title h2{
        margin-left: 1rem;
        font-size: 2rem;
    }

    .title p{
        width : 85%;
    }

    .categories-buttons{
        width : 100%;
        flex-direction: column;
        align-items: center;
    }

    .categories-buttons .button-category{
        min-height: 10rem;
    }
}