/*  COLOR:
    JAUNE   pale    ffffcc  rgba(255, 255, 204, 1.0)
    JAUNE   clair   f9d66c  rgba(249, 214, 108, 1.0)
    JAUNE   base    f8ba57  rgba(248, 186, 87, 1.0)
    ORANGE  claire  e6854d  rgba(230, 133, 77, 1.0)
    ORANGE          e06d29  rgba(224, 109, 41, 1.0)
    MARRON  défault 4d2111  rgba(77, 33, 17, 1.0)
    MARRON  sombre  290000  rgba(41, 0, 0, 1.0)
    MARRON  claire  964f3d  rgba(150, 79, 61, 1.0)
    MARRON  texte   4d2110  rgba(77, 33, 16, 1.0)



    NEW
    MARRON  FADE    #7b594d  rgba(123, 89, 77, 1.0)
    MARRON  BCKG    #4d2111  rgba(77, 33, 17, 1.0)
    MARRON  2DE     #3f1b0d  rgba(63, 27, 13, 1.0)
    JAUNE   PALE    #ffffcc  rgba(255, 255, 204, 1.0)
    JAUNE   BASE    #f8ba57  rgba(248, 186, 87, 1.0)
    JAUNE   2DE     #f5a623  rgba(245, 166, 35, 1.0)


*/
.xdebug-error{
    font-size: 18px;
    font-family: Arial, sans-serif;
}
.hide { display: none; }
.show { display: block; }



.body-bg{
    top: 0;
    margin-top: 3em;
    background: #3f1b0d url('../images/regis_is_real.jpg') no-repeat center top;
    background-size: 100% auto;
    background-position: center var(--bg-pos, 0%);
    background-attachment: scroll;

}




.main-width {
    width: 44em;
}

@font-face {
    font-family: 'bignoodle';
    src: url('../fonts/big_noodle_titling.ttf') format('truetype');
}
html {
}
body {
    margin: 0 auto;
    font-size: 18px;
    font-family: bignoodle, Arial, sans-serif;
    overflow-x: hidden;
}
header, nav, main, footer {
    margin: 0 auto;
    padding: 0px;
}

header, footer {
    text-align: center;
}
nav, footer {
    opacity: 0.95;
}



header {

}
header h1 {
    font-size: 1.8em;
    margin: 0;
    margin-top: 45px;
    padding: 0.6em 0em;
    /*color: #f8ba57;*/
    text-align: center;
    cursor: text;

    color: #fff398;
    text-shadow: 0px 0px 35px rgba(230, 111, 32, 1.0);
    letter-spacing: 2px

}


main {
    color: #f8ba57;
    overflow: hidden;
    display: flex;  /* Utilise flexbox pour centrer les éléments à l'intérieur */
    justify-content: center; /* Centre les éléments horizontalement */

}

main section {
    flex:1;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

main section.show {
    display: block;
    opacity: 1;
}
main section.hide {
    opacity: 0;
    display: none;
    pointer-events: none;
}
section {
    text-shadow: 0px 0px 35px rgba(230, 111, 32, 1.0);
    letter-spacing: 2px;    
    flex:1;
}

footer {
    padding: 1.5em 0em;
    color: #f8ba57;
    background-color: #4d2111;
    font-size: 1.3em;
}
footer a {
    color: #f9d66c;
    text-decoration: none;
    margin: 0 10px;
}
footer a:hover {
    color: #ffffcc;
}