/*Bouton de base*/
.redirect-button{
    margin:0 auto;
}



.ui-btn {
    --btn-default-bg: rgb(41, 41, 41);
    --btn-padding: 15px 20px;
    --btn-hover-bg: rgb(51, 51, 51);
    --btn-transition: .3s;
    --btn-letter-spacing: .1rem;
    --btn-animation-duration: 1.3s;
    --btn-shadow-color: rgba(0, 0, 0, 0.137);
    --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);
    --hover-btn-color: #FAC921;
    --default-btn-color: var(--light);
    --font-size: 18px;
    --font-weight: 500;
    --font-family: 'Kanit', sans-serif;;
}








/*Les boutons avec la bonne couleur suivant le domaine des projets*/

/*Bouton d'information*/
/*Bouton Basique*/
.ui-btn.esc-button{
    margin: 0 auto;
    box-sizing: border-box;
    padding: var(--btn-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-secondary);
    font: var(--font-weight) var(--font-size) var(--font-family);

    border: none;
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    box-shadow: var(--btn-shadow);
}

.ui-btn.esc-button span {
    letter-spacing: var(--btn-letter-spacing);
    box-sizing: border-box;
    position: relative;
    /*background: inherit;*/
    color: var(--neutral-secondary);
}

.ui-btn.esc-button span::before {
    box-sizing: border-box;
    position: absolute;
    content: "";
    color: var(--black-bg-color);
}

.ui-btn.esc-button:hover, .ui-btn.esc-button:focus {
    border-radius: 4px;
    color: var(--neutral-secondary);
}

.ui-btn.esc-button:hover span, .ui-btn.esc-button:focus span {
    color: var(--black-bg-color);

}
/*Fin bouton basique*/
/*Fin bouton d'information*/






/*Bouton Basique*/
.ui-btn.basis-button{
    margin: 0 auto;
    box-sizing: border-box;
    padding: var(--btn-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black-bg-color);
    font: var(--font-weight) var(--font-size) var(--font-family);
    background: var(--light-hover);
    border: none;
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    box-shadow: var(--btn-shadow);
}

.ui-btn.basis-button span {
    letter-spacing: var(--btn-letter-spacing);
    box-sizing: border-box;
    position: relative;
    background: inherit;
    color: var(--black-bg-color);
}

.ui-btn.basis-button span::before {
    box-sizing: border-box;
    position: absolute;
    content: "";
    background: var(--light);
    color: var(--black-bg-color);
}

.ui-btn.basis-button:hover, .ui-btn.basis-button:focus {
    background: var(--light);
    border-radius: 4px;
    color: var(--black-bg-color);
}

.ui-btn.basis-button:hover span, .ui-btn.basis-button:focus span {
    color: var(--black-bg-color);

}
/*Fin bouton basique*/


/* Bouton neutre welcome */
.ui-btn#welcome {
    margin: 0 auto;
    box-sizing: border-box;
    padding: var(--btn-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--default-btn-color);
    font: var(--font-weight) var(--font-size) var(--font-family);
    background: var(--neutral-secondary);
    border: none;
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    box-shadow: var(--btn-shadow);
}

.ui-btn#welcome span {
    letter-spacing: var(--btn-letter-spacing);
    box-sizing: border-box;
    position: relative;
    background: inherit;
}

.ui-btn#welcome span::before {
    box-sizing: border-box;
    position: absolute;
    content: "";
    background: var(--neutral-primary);
}

.ui-btn#welcome:hover, .ui-btn#welcome:focus {
    background: var(--neutral-primary);
    border-radius: 4px;
}
/* Fin neutre Welcome*/


/* Bouton Animation */
.ui-btn#animation {
    margin: 0 auto;
    box-sizing: border-box;
    padding: var(--btn-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--default-btn-color);
    font: var(--font-weight) var(--font-size) var(--font-family);
    background: var(--fruit-secondary);
    border: none;
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    box-shadow: var(--btn-shadow);
}

.ui-btn#animation span {
    letter-spacing: var(--btn-letter-spacing);
    box-sizing: border-box;
    position: relative;
    background: inherit;
}

.ui-btn#animation span::before {
    box-sizing: border-box;
    position: absolute;
    content: "";
    background: var(--fruit-primary);
}

.ui-btn#animation:hover, .ui-btn#animation:focus {
    background: var(--fruit-primary);
    border-radius: 4px;
}
/* Fin Animation */

/* Bouton Communication */
.ui-btn#communication {
    margin: 0 auto;
    box-sizing: border-box;
    padding: var(--btn-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--default-btn-color);
    font: var(--font-weight) var(--font-size) var(--font-family);
    background: var(--lightblue-secondary);
    border: none;
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    box-shadow: var(--btn-shadow);
}

.ui-btn#communication span {
    letter-spacing: var(--btn-letter-spacing);
    box-sizing: border-box;
    position: relative;
    background: inherit;
}

.ui-btn#communication span::before {
    box-sizing: border-box;
    position: absolute;
    content: "";
    background: var(--lightblue-primary);
}

.ui-btn#communication:hover, .ui-btn#communication:focus {
    background: var(--lightblue-primary);
    border-radius: 4px;
}
/*Fin communication*/

/* Bouton DevWeb */
.ui-btn#developpement {
    margin: 0 auto;
    box-sizing: border-box;
    padding: var(--btn-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--default-btn-color);
    font: var(--font-weight) var(--font-size) var(--font-family);
    background: var(--green-secondary);
    border: none;
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    box-shadow: var(--btn-shadow);
}

.ui-btn#developpement span {
    letter-spacing: var(--btn-letter-spacing);
    box-sizing: border-box;
    position: relative;
    background: inherit;
}

.ui-btn#developpement span::before {
    box-sizing: border-box;
    position: absolute;
    content: "";
    background: var(--green-primary);
}

.ui-btn#developpement:hover, .ui-btn#developpement:focus {
    background: var(--green-primary);
    border-radius: 4px;
}
/*Fin DevWeb*/

/* Bouton Game Design */
.ui-btn#gamedesign {
    margin: 0 auto;
    box-sizing: border-box;
    padding: var(--btn-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--default-btn-color);
    font: var(--font-weight) var(--font-size) var(--font-family);
    background: var(--lavender-secondary);
    border: none;
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    box-shadow: var(--btn-shadow);
}

.ui-btn#gamedesign span {
    letter-spacing: var(--btn-letter-spacing);
    box-sizing: border-box;
    position: relative;
    background: inherit;
}

.ui-btn#gamedesign span::before {
    box-sizing: border-box;
    position: absolute;
    content: "";
    background: var(--lavender-primary);
}

.ui-btn#gamedesign:hover, .ui-btn#gamedesign:focus {
    background: var(--lavender-primary);
    border-radius: 4px;
}
/*Fin Game Design*/

/* Bouton Web Design */
.ui-btn#webdesign {
    margin: 0 auto;
    box-sizing: border-box;
    padding: var(--btn-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--default-btn-color);
    font: var(--font-weight) var(--font-size) var(--font-family);
    background: var(--pink-secondary);
    border: none;
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    box-shadow: var(--btn-shadow);
}

.ui-btn#webdesign span {
    letter-spacing: var(--btn-letter-spacing);
    box-sizing: border-box;
    position: relative;
    background: inherit;
}

.ui-btn#webdesign span::before {
    box-sizing: border-box;
    position: absolute;
    content: "";
    background: var(--pink-primary);
}

.ui-btn#webdesign:hover, .ui-btn#webdesign:focus {
    background: var(--pink-primary);
    border-radius: 4px;
}
/*Fin Web Design*/

/* Bouton Graphic Design */
.ui-btn#graphicdesign {
    margin: 0 auto;
    box-sizing: border-box;
    padding: var(--btn-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--default-btn-color);
    font: var(--font-weight) var(--font-size) var(--font-family);
    background: var(--sun-secondary);
    border: none;
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    box-shadow: var(--btn-shadow);
}

.ui-btn#graphicdesign span {
    letter-spacing: var(--btn-letter-spacing);
    box-sizing: border-box;
    position: relative;
    background: inherit;
}

.ui-btn#graphicdesign span::before {
    box-sizing: border-box;
    position: absolute;
    content: "";
    background: var(--sun-primary);
}

.ui-btn#graphicdesign:hover, .ui-btn#graphicdesign:focus {
    background: var(--sun-primary);
    border-radius: 4px;
}
/*Fin Graphic Design*/

/* Bouton Audiovisuel */
.ui-btn#audiovisuel {
    margin: 0 auto;
    box-sizing: border-box;
    padding: var(--btn-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--default-btn-color);
    font: var(--font-weight) var(--font-size) var(--font-family);
    background: var(--orange-secondary);
    border: none;
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    box-shadow: var(--btn-shadow);
}

.ui-btn#audiovisuel span {
    letter-spacing: var(--btn-letter-spacing);
    box-sizing: border-box;
    position: relative;
    background: inherit;
}

.ui-btn#audiovisuel span::before {
    box-sizing: border-box;
    position: absolute;
    content: "";
    background: var(--orange-primary);
}

.ui-btn#audiovisuel:hover, .ui-btn#audiovisuel:focus {
    background: var(--orange-primary);
    border-radius: 4px;
}
/*Fin Audiovisuel*/

/* Bouton neutre Contact*/
.ui-btn#about {
    margin: 0 auto;
    box-sizing: border-box;
    padding: var(--btn-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--default-btn-color);
    font: var(--font-weight) var(--font-size) var(--font-family);
    background: var(--neutral-secondary);
    border: none;
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    box-shadow: var(--btn-shadow);
}

.ui-btn#about span {
    letter-spacing: var(--btn-letter-spacing);
    box-sizing: border-box;
    position: relative;
    background: inherit;
}

.ui-btn#about span::before {
    box-sizing: border-box;
    position: absolute;
    content: "";
    background: var(--neutral-primary);
}

.ui-btn#about:hover, .ui-btn#about:focus {
    background: var(--neutral-primary);
    border-radius: 4px;
}
/* Fin neutre About*/

/* Bouton neutre Contact*/
.ui-btn#contact {
    margin: 0 auto;
    box-sizing: border-box;
    padding: var(--btn-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--default-btn-color);
    font: var(--font-weight) var(--font-size) var(--font-family);
    background: var(--neutral-secondary);
    border: none;
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    box-shadow: var(--btn-shadow);
}

.ui-btn#contact span {
    letter-spacing: var(--btn-letter-spacing);
    box-sizing: border-box;
    position: relative;
    background: inherit;
}

.ui-btn#contact span::before {
    box-sizing: border-box;
    position: absolute;
    content: "";
    background: var(--neutral-primary);
}

.ui-btn#contact:hover, .ui-btn#contact:focus {
    background: var(--neutral-primary);
    border-radius: 4px;
}
/* Fin neutre Contact*/






.ui-btn:hover span, .ui-btn:focus span {
    color: var(--light-hover);

}

.ui-btn:hover span::before, .ui-btn:focus span::before {
    animation: chitchat linear both var(--btn-animation-duration);
}

@keyframes chitchat {
    0% {
        content: "#";
    }

    5% {
        content: ".";
    }

    10% {
        content: "^{";
    }

    15% {
        content: "-!";
    }

    20% {
        content: "#$_";
    }

    25% {
        content: "№:0";
    }

    30% {
        content: "#{+.";
    }

    35% {
        content: "@}-?";
    }

    40% {
        content: "?{4@%";
    }

    45% {
        content: "=.,^!";
    }

    50% {
        content: "?2@%";
    }

    55% {
        content: "\;1}]";
    }

    60% {
        content: "?{%:%";
        right: 0;
    }

    65% {
        content: "|{f[4";
        right: 0;
    }

    70% {
        content: "{4%0%";
        right: 0;
    }

    75% {
        content: "'1_0<";
        right: 0;
    }

    80% {
        content: "{0%";
        right: 0;
    }

    85% {
        content: "]>'";
        right: 0;
    }

    90% {
        content: "4";
        right: 0;
    }

    95% {
        content: "2";
        right: 0;
    }

    100% {
        content: "";
        right: 0;
    }
}
/*Fin bouton de base*/