/* ----------------------------------------------------------------------------
 * Animations CSS
 * ---------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------
 * Déclarations générales
 * ---------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}

h1 {
    font-family: 'Courgette', cursive;
    font-size: 3em;
    margin-top: 1rem;
    text-align: center;
}

html {
    background-image: linear-gradient(#F4D03F, #1DD6B2);
    font-family: 'Raleway', sans-serif;
    min-height: 100vh;
}



/* ----------------------------------------------------------------------------
 * Classes CSS
 * ---------------------------------------------------------------------------- */
.fade {
    opacity: 0;
}

.flex-total-center {
    align-items: center;
    display: flex;
    justify-content: center;
}


/* ----------------------------------------------------------------------------
 * Éléments spécifiques
 * ---------------------------------------------------------------------------- */
#carrousel {
    margin: 0 auto;
    text-align: center;
    
}
#carrousel figcaption {
    opacity: 0;
    margin: 0 auto;
    position: relative;
    width: 350px;
    padding: 10px 5px;
    top: -100px;
    background-color: rgb(172, 162, 23, 0.55);
    color: #F4D03F;
    text-shadow: 1px 1px 3px black,
                -1px -1px 3px black;
}
#carrousel img {
    margin: 5px auto;
}
#carrousel img:hover + figcaption, /* quand le curseur survole l'image... */
#carrousel figcaption:hover {      /* ...mais aussi la légende */
    opacity: 1;
}

#carrousel-progress {
}

#menu button{
    background-image: linear-gradient(to bottom, #F4D03F, #aca217);
    border: none;
    border-radius: 10px;
    font-size: 3rem;
    padding: 10px 20px;
    width: 6rem;
    text-align: center;
    margin: 5px;
    box-shadow: inset 0px 2px 5px rgba(255, 255, 255, 0.7),
                inset 0px -2px 5px rgba(0, 0, 0, 0.7);
}

#menu button:hover{
    background-image: linear-gradient(to bottom, #c4b922, #F4D03F);
    box-shadow: inset 0px 1px 3px rgba(255, 255, 255, 0.7),
                inset 0px -1px 3px rgba(0, 0, 0, 0.7);
}

#menu button.disabled, #menu button.disabled:hover{
    background-image: linear-gradient(to bottom, #d8d8d8, #999997);
    box-shadow: inset 0px 2px 5px rgba(255, 255, 255, 0.7),
                inset 0px -2px 5px rgba(0, 0, 0, 0.7);
}