* {margin: 0;}

*:before,

*:after {

    box-sizing: border-box;

}



.intro >*{

    margin-bottom: 1em;

}

header >*{

    margin-bottom: 0.5em;

}



body{

    display: flex;

    flex-direction: row;

    gap: 60px;

    justify-content: center;

    background-color: #fffbf7;

    margin: 8em 40em 5em 40em;

    font-size: 0.78em;

    color: rgba(6, 2, 29, 0.877);

    letter-spacing: 0.03em;

}



h1{

    font-family: 'bricolage';

    line-height: 1.6em;

    

}



h2{

    font-family: 'adelphe';

    line-height: 1.4em;

    font-style: normal;

    font-weight: 400;

}

.logo{

    /* mix-blend-mode: multiply; */

    max-width: 20em;

}



.bandreau{

    background-color: #c9bb41;

    width: 100vw;

    padding: 10px;

    margin: 0;

    top: 0px;

    position: fixed;



}



ol {

    

    list-style: square inside url("imgs/");

    padding: 20px;

  }

  

  ol li {

    padding: 10px;

    margin-left: 20px;

  }



#more {display: none;}



button{

   

    background-color: rgb(241, 207, 52);

    border: none;

    color: rgba(6, 2, 29, 0.877);

    padding: 7px 18px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 15px;

    cursor: pointer;

    font-family: 'bricolage';

    letter-spacing: 0.03em;



}



@font-face {

    font-family: 'bricolage';

    src: url('fonts/BricolageGrotesque-VariableFont_opsz\,wdth\,wght.ttf');

    /* font-weight: bold; */

    font-style: normal;

}



@font-face {

    font-family: 'kreon';

    src: url('fonts/Kreon-VariableFont_wght.ttf');



}



@font-face {

    font-family: 'adelphe';

    src: url('fonts/Adelphe-FructidorRegular.woff');

    font-weight: 400;

    font-style: normal;

}



@font-face {

    font-family: 'adelphe';

    src: url('fonts/Adelphe-FructidorItalic.woff');

    font-style: italic;

    font-weight: 400;

}



@font-face {

    font-family: 'adelphe';

    src: url('fonts/Adelphe-FructidorBoldItalic.woff');

    font-weight: 900;

    font-style: italic;

}



@font-face {

    font-family: 'adelphe';

    src: url('fonts/Adelphe-FructidorBold.woff');

    font-style: normal;

    font-weight: 900;

}



@media screen and (width <= 80rem) {



       body{

        display: flex;

        flex-direction: column;

        margin: 40px 40px;

    }

    header{

        margin-top: 45px;

    }



    .bandreau{

        left: -40px;

    }

   }