:root {
	--bleu-charte:#51849a;
	--black-charte:#2a2a2a;
    --grey50-charte:#939393;
    --grey25-charte:#C9C9C9;
    --yellow-charte: #ddbe25;
  }
/* bebas-neue-regular - latin */
@font-face {
    font-family: 'Bebas Neue';
    font-weight: 400;
    src: url('src/fonts/bebas-neue-v9-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('src/fonts/bebas-neue-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('src/fonts/bebas-neue-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('src/fonts/bebas-neue-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
        url('src/fonts/bebas-neue-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('src/fonts/bebas-neue-v9-latin-regular.svg#BebasNeue') format('svg'); /* Legacy iOS */
}
@font-face {
    font-family: 'Bebas Neue';
    font-weight: 200;
    src: url('src/fonts/Bebas-Neue-Light.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('src/fonts/Bebas-Neue-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('src/fonts/Bebas-Neue-Light.woff') format('woff'), /* Modern Browsers */
        url('src/fonts/Bebas-Neue-Light.ttf') format('truetype'), /* Safari, Android, iOS */
        url('src/fonts/Bebas-Neue-Light.svg#BebasNeue') format('svg'); /* Legacy iOS */
}
body {
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    text-align:center;
}
main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
}
footer {
    font-size:12px;
    color:grey;
    margin:30px 20px;
}
h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    font-weight: 400;
    margin: 0;
    color: var(--black-charte);
}
h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    font-weight: 200;
    color: var(--grey50-charte);
    margin:10px 0;
}  
p {
    color: var(--black-charte);
    margin:10px 0 20px;
} 
a {
    color: var(--yellow-charte);
    text-decoration: none;
}
a:hover {
    color: var(--bleu-charte);
}
a h2:hover, a h3:hover {
    color: var(--yellow-charte);
}  

    
    ul {
        display:flex;
        justify-content: center;
        margin: auto;
        list-style-type: none;
        padding-inline-start: 0px;
        padding-bottom:10px;
    }
    li {
        flex-direction: row;
    }
    ul a.FAS, ul a.FAB {
        font-style:initial;
        font-size:20px!important;
        color:#434343!important;
        text-decoration:none;
        padding: 8px;
    }
    ul a.FAS {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
    }
    ul a.FAB {
        font-family: "Font Awesome 5 Brands";
        font-weight: 400;
    }    
button.retro {
    border-color: var(--yellow-charte);
    background-color: white;
    border-width: 2px;
    border-radius: 10px;
    color: var(--yellow-charte);
    padding: 10px 15px 8px 15px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    font-weight: 500;
    border: 2px solid var(--yellow-charte);
    cursor: pointer;
    box-shadow: 0px 4px 0px var(--yellow-charte);
}
button.retro:hover {
    border-color: var(--bleu-charte);
    border-width: 2px;
    color: var(--bleu-charte);
    box-shadow: 0px 2px 0px var(--bleu-charte);
    position: relative;
    top: 2px;
}