* {
    box-sizing: border-box;
}

/* Titre */

header {
    width: 80%;
}

h1 {
    padding-top: 1%;
    margin-top: 5%;
    border-top: solid;
    border-width: 5px;
    border-radius: 25px;
    border-color: #ffe8a9fa;
    color: black;
    background-color: rgba(255, 255, 255, 0.075);
    text-align: center;
}

/* MENU */

nav{
    margin-right: 20%;
}

nav>ul{
    display: flex;
    justify-content: flex-end;
    list-style: none;
}

nav>ul>li {
    border-top: solid 2px rgb(0, 0, 0);
    background: rgba(255, 255, 255, 0.075);
    border-radius: 0px 0px 10px 5px;
    margin-right: 5px;
    font-size: 85%;
    padding-bottom: 2%;
    padding-top: 2%;
    padding-left: 1%;
    padding-right: 2%;
}

nav>ul>li>a{
    color: black;
}

nav>ul>li:hover{
    background: #7e6955f1;
    border-radius: 0;
}

nav>ul>li>a{
    display: block;
    text-decoration: none;
    padding-top: 10%;
}

 /* SOUS MENU */

.sousmenu {
    display: none;
    position: absolute;
    list-style: none;
}

.sousmenu>li>a{
    color: black;
    font-size: 120%;
    text-decoration: none;
}
nav>ul>li:hover .sousmenu {
    display: block;
    background-color: #7e6955f1;
    padding: 2% 1%;
    border-radius: 0 0 10px 10px;  
    margin-top: 1.6%; 
    margin-left: -0.65%;
}



.intro{
    font-size:75%;
}

/* BODY*/

body {
    width: 80%;
    margin-left:20%;
    margin-right: 20%;
}

h2{
    margin-left: 29.5%;
    margin-top: 3%;
    margin-bottom: 5%;
    border-top: solid;
    border-width: 5px;
    border-radius: 25px;
    border-color: #ffe8a9fa;
    color: black;
    background-color: rgba(255, 255, 255, 0.075);
    padding-left: 1.5%;
    width: 12em;
}

h3{
    margin-top: 1%;
    border-top: solid;
    border-width: 5px;
    border-radius: 25px;
    border-color: #ffe8a9fa;
    color: black;
    background-color: rgba(255, 255, 255, 0.075);
    margin-right: 20%;
    padding-left: 1.5%;
    width: 16em;
}

p {
    padding: 10px;
    font-size: 120%;
    color: black;
    border: solid;
    margin-right: 20%;
    margin-top: 1%;
    margin-bottom: 3%;
    border-radius: 10px;
}

strong:first-of-type{
    margin-left: 25%;
}

strong{
    margin-right: 5%;
}

/* FOOTER */

footer{
    display: flex;
    color: black;
    justify-content: center;
    margin-right: 20%;
    margin-bottom: 3%;
}

footer>a{
    margin-right: 3%;
}

footer>a:link, a:visited{
    color: black;
    text-decoration: none;
}

/* FONDS */

.fond {
    background-color: #ffe8a9fa;
    background-size: 10px 10px, 5px 5px;
  }

.fond2{
    --col: #7e69552c;
    background-color:#aa8763;
    background-image: radial-gradient(var(--col), var(--col) 20%, transparent 12%, transparent),
                      radial-gradient(var(--col), var(--col) 25%, transparent 22%, transparent);
    background-size: 10px 10px, 5px 5px;
  }

/* LOGO */

.logo {
    position: absolute;
    left:0;
    width: 10%;
    margin-left: 5%;
    border-radius: 10px;
}

.btc{
    width: 8%;
    margin-left:-5%;
}

.btc2{
    display: none;
}

/* IFRAME */

.iframe1{
    border: solid;
    border-radius: 10px;
    width: 80%;
    height: 500px;
    margin-bottom: 3%;
    color: black;
}

.iframe2{
    border: solid;
    border-radius: 10px;
    width: 80%;
    height: 42px;
    margin-bottom: 1%;
}

a{
    color: black;
}

h1:hover,
h2:hover,
h3:hover {
    color: #ffe8a9fa;
}

@media (min-width: 375px) and (max-width: 1000px){
    body{
        width: 100%;
        margin: 0;
    }
    header{
        width: 100%;
    }

    h1{
        width: 50%;
        display: block;
        margin-right: auto;
        margin-left: auto;
        font-size:150%;
    }

    h2{
        width: 70%;
        display: block;
        margin-right: auto;
        margin-left: auto;
        font-size:150%;

    }

    h3{
        width: 70%;
        display: block;
        margin-right: auto;
        margin-left: auto;
        font-size:100%;

    }

    main{
        width: 98%;
        margin-left: 1%;
        font-size: 150%;
    }

    p{
        margin:0%;
        border-left: none;
        border-right: none;
    }

    .iframe1{
        width: 100%;
        margin-top: 3%;
    }

    .iframe2{
        width: 100%;
        margin-top: 3%;
    }

    footer{
        text-align: center;
        margin-left: 20%;
    }


    nav{
        width: 98%;
        margin-top: 9%;
        margin-left: 1%;
        margin-right: 5%;
    }

    nav>ul{
        font-size:90%;
    }

    .logo{
        left: 0;
        margin: 0;
        top:0;
        min-width: 20%;
    }

    .btc{
        display: none;
    }

    .btc2{
        display: block;
        position: absolute;
        width: 10%;
        right:0;
        top: 2%;;
        min-width: 20%;

    }

}