/*Police d'écriture de titre*/
@font-face {
    font-family: "TT Nooks Script Trial";
    src: url(TTNooksScriptTrialBlack.otf);
}

/*Police d'écriture de texte*/
@font-face {
    font-family: "TT Nooks Script Trial Light";
    src: url(TTNooksScriptTrialLight.otf);
}

/*      ---         informations générales sur le style du site*/
body {
    background-color: #fee47d;
    color: #404040;
    font-family: "TT Nooks Script Trial Light",
        serif;
    font-size: 120%;

    /*marges*/
    padding: 0px;
    margin: 0px;
}


/*      ---         les fonctions de mise en page générale*/

/*les strong sont normalisé*/
strong {
    font-weight: inherit;
}

/*les liens sont normalisé*/
a {
    color: inherit;
    text-decoration: none;
}

h1 {
    font-family: "TT Nooks Script Trial", serif;
    font-size: 400%;
    font-weight: 500;
    text-align: center;
    background: linear-gradient(0deg, #fee47d 39%, #409a81 0%);
    margin-top: 0px;
    padding-top: 20px;
    padding-bottom: 0px;
}

p {
    font-family: "TT Nooks Script Trial Light", serif;
    font-size: 150%;
    font-weight: 400;
}


/*      ---       Bandeau Supérieur et Inférieur*/
/*défintion des bandeaux*/
.Bandeau {
    background-color: white;
    /*padding: 20px;*/
    width: 120%;
    margin-left: -20px;
}

/*position du bandeau suppérieur par rapport au haut de page*/
#sup {
    position: fixed;
    top: 25px;
    z-index: 2;
}

/*position du bandeau inférieur par rapport au haut de page*/
#inf {
    padding-top: 20px;
    padding-bottom: 20px;
    position: fixed;
    bottom: 0px;
    z-index: 2;
}

/*      ---         Bandeau sup*/

#accueil {
    /*Bouton de retour à l'accueil*/
    /*box*/
    background-color: #409a81;
    padding: 20px;
    margin-left: 50px;
    display: inline-block;
    /*text*/
    font-family: "TT Nooks Script Trial", serif;
    font-weight: 300;
    font-size: larger;
    text-decoration: none;
    color: #404040;
    transition: 0.5s;
}

/*aspect lorsque la souris passe dessus*/
#accueil:hover {
    color: #fee47d;
    scale: 1.2;
    box-shadow: 0px, 0px, 10px, #404040;
    /*n'a pas d'effet...*/
}

#menu {
    /*bande menu*/
    position: absolute;
    /*le bandeau du menu ne défile pas quand la page défile*/
    right: 20%;
    margin-left: 250px;
    /*overflow: auto;*/
    font-size: 110%;
    font-weight: 700;
    padding-top: 20px;
}

.bouton {
    /*bouton menu*/
    /*box*/
    display: inline-block;
    margin-left: 20px;
    /*text*/
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

/*aspect lorsque la souris passe dessus*/
.bouton:hover {
    color: #000;
    text-decoration: underline #fee47d;
    text-underline-offset: 0.8em;
    scale: 1.2;
}

/*      ---         Bandeau inf*/
#reseaux {
    /*bouton de lien vers les réseaux sociaux*/
    margin-left: 50px;
}

/*pour voir sur quelle page on est sur le menu */
#ici {
    color: #409a81;
}

/*Classe lien pour le portolio en page à propos*/

.lien {
    background-color: #409a81;
    font-family: "TT Nooks Script Trial", serif;
    font-weight: 400;
    font-size: 150%;
    color: inherit;
    padding: 20px;
    width: 8em;
    margin: 0px auto;
}


/*      ---         Animation des boutons*/


button {
    border: none;
    display: block;
    position: relative;
    padding: 0.7em 2.4em;
    font-size: 18px;
    background: transparent;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    color: #404040;
    z-index: 1;
    font-family: inherit;
    font-weight: 500;
}

button span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: -1;
    /* border: 4px solid #404040; */
}

button span::before {
    content: "";
    display: block;
    position: absolute;
    width: 8%;
    height: 500%;
    background: var(--lightgray);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-60deg);
    transition: all 0.3s;
}

button:hover span::before {
    transform: translate(-50%, -50%) rotate(-90deg);
    width: 100%;
    background: #404040;
}

button:hover {
    color: white;
}

button:active span::before {
    background: #404040;
}