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

body{
    background-color: #f1f1f1;
    margin: 10px 150px;
    font-size: 1.1em;
    font-family: 'adelphe';
    line-height: 1.6em;
    letter-spacing: 0.03em;
    /* overflow: hidden; */
}

.dark-mode {
    background-color: black;
    color: white;
  }

#logo{
    max-width: calc(5vh + 8vw);
}

#logo:hover{
    cursor: pointer;
}

img{max-height: calc(15vh + 12vw);}

header,main,footer{
    display: grid;
    grid-gap: 50px;
    grid-template-columns: 50% 50%;
    padding: calc(2vw + 2vh);
    padding-right: 10vw;
    padding-left: 10vw;
    align-items: center;
}

p{
    padding: 0;
}

a{
    color:rgb(236, 52, 28);
    text-decoration: none;
}


a:hover{
    text-decoration: underline;
}

li{
    list-style:none;
}

/* soulignement avec une image */
.underline {
    background: url(img/wacky-line.svg) no-repeat 0 100%;
}


@font-face {
    font-family: 'adelphe';
    src: url('fonts/Adelphe-FructidorRegular.woff');
    /* font-weight: bold; */
    font-style: normal;
}

@font-face {
    font-family: 'inclusive';
    src: url('fonts/Adelphe-FructidorItalic.woff');
    /* font-weight: bold; */
    font-style: italic;
}

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

    img{max-height: calc(23vh + 12vw);}

    #logo{
        max-width: calc(10vh + 8vw);
    }

    .langue{
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        align-items: center;
    }
    
    main,footer{
         display: flex;
         flex-direction: column;
       }
     
       body{
        margin: 20px 20px;
        overflow:visible;
    }
   }