@font-face {
    font-family: "arimoregular";
    src: url("../Arimo-Regular-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "gidole";
    src: url("../gidole-regular-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "robotolight";
    src: url("../Roboto-Light-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "robotoregular";
    src: url("../Roboto-Regular-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "robotomedium";
    src: url("../Roboto-Medium-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "robotobold";
    src: url("../Roboto-Bold-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "robotoslabregular";
    src: url("../RobotoSlab-Regular-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "robotoslabbold";
    src: url("../RobotoSlab-Bold-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "robotocdsregular";
    src: url("../RobotoCondensed-Regular-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "robotocdsbold";
    src: url("../RobotoCondensed-Bold-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
    font-family: "robotoregular",Arial, sans-serif;
    font-size:16px;
    line-height:normal;
    scroll-behavior: smooth; /*la page défile entre les sections*/
}

body {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: rgb(23, 117, 117);
}

*{
    box-sizing: border-box;
    margin: 0;
    padding:0;
    /*outline:1px solid red;*/
}

/*slideshow*/
*::before, *::after {
    box-sizing: border-box;
}
/*end slideshow*/

:root {
    --principale:rgba(181,239,243,1);
    --tertiaire:rgba(120,17,20,1);
    --secondaire:rgba(230,64,16,1);
    --blanc:rgba(255,255,255,1);
    --noir:rgba(0,0,0,1);
    --btngradient:linear-gradient(rgb(230, 162, 16),rgb(230, 84, 16),rgb(151, 27, 5));
}

a{
    font-weight: 300;
    color: black;
}

a:active,a:hover{
    color:var(--secondaire);
    background:var(--principale);
}

button{
    background-image: var(--btngradient);
    background-size:auto 200%;
    background-position:bottom;
    color: white;
    border-radius: 5px;
    box-shadow: none;
    border:none;
    font-size: 1.1em;
    font-family: "robotocdsbold",arial,sans-serif;
    display:inline-block;
    padding: 8px;
    text-align:center;
    text-decoration: none;
    letter-spacing: .1rem;
    text-transform: uppercase;
    font-size: 14.4px;
    transition-duration: 1000ms;
}

button:hover{
    background-image: var(--btngradient);
    background-position:top;
    transform: scale(1.05);
    cursor:pointer;
    transition-duration: 100ms;
}

h1,h2,h3,h4,h5{
    font-family:"robotocdsregular",arial,sans-serif;
    font-weight:200;
    text-transform: uppercase;
    letter-spacing: .5rem;
    text-align: center;
}

h1{
    font-size:2em;
}

header {
    position: relative;
    width: 100%;
    height: 15%;
    display:grid;
    place-items: center;
    background-color: var(--principale);
}

hr{
    border:0;
    border-top: 1px dashed var(--hr);
    margin-top:3rem;
    margin-bottom:3rem;
}

img {
    max-width:100%;
}

li {
    margin-bottom: .5rem;
    padding-left: 0.5ch;
}

li>ul{
    padding-left: 2ch;
}

main {
    height: 85%;
    background: url("../img/benjas.jpg"),
    linear-gradient(var(--principale) 5%, transparent);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    background-blend-mode:overlay;
}

nav {
    display: grid;
    place-items: center ;
    width: 100vw;
    padding: 1em;
    background: linear-gradient(var(--principale)50%,transparent 50%);
}

ol {
    padding-left: 1rem;
    margin-bottom:.75rem;
} 

strong {
    font-family: "robotoslabregular",Arial, sans-serifserif;
}

sub,sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
}

sub{
    bottom:-0.25em
}

sup{
    top:-0.5em
}

ul {
    padding-left: .5ch;
    margin-bottom:.75rem;
    list-style: '-';
}

/*ul a {
    text-decoration: none;
}*/

::marker {
    color: black;
    font-size:.75rem;
    margin-right: 1rem;
    content:'⬡';
    /*content:'-';*/
    /*content:'⬢';*/
}

.br-non {
    display: none;
}

.br-oui {
    display: inline;
}

.texte_centre {
    width: 100%;
    text-align: center;
}


/***************************************************************************************************/
/**************************************************************************************************/
@media screen and (min-width: 800px) {
    /***************************************************************************************************/
    /***************************************************************************************************/
    
    h1{
        font-size:2.5em;
    }

    .br-non {
        display: inline;
    }
    
    .br-oui {
        display: none;
    }
}