@font-face {
    font-family: ANTIQUE-OLIVE;
    margin: 0;
    src: url(/assets/font/antique-olive-nord-d-regular.ttf);
}
@font-face {
    font-family: DINA-CHAUMONT-TEXT-BOLD;
    src: url(/assets/font/DinaChaumont-TextBold.woff);
}
@font-face {
    font-family: HOST-REGULAR;
    src: url(/assets/font/HostGrotesk-Regular.ttf);
}
@font-face {
    font-family: HOST-BOLD;
    src: url(/assets/font/HostGrotesk-Bold.ttf);
}
@font-face {
    font-family: "Host Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    src: url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital@0;1&display=swap');
}


body, head{
    background-color: var(--color1);
    /*background-image: url("/assets/img/background.webp");
    background-size: 105% auto;
    background-repeat: repeat-y;*/
    padding: 0;
    margin: 0;
    font-family: var(--secondaryFont);
    font-size: var(--font-size);
    overflow-x: hidden !important;
    overflow-y: auto;
}

* {
  box-sizing: border-box;
}


body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

body::-webkit-scrollbar-track {
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  background: var(--sable-mouille);
  border-radius: 3px;
}



h1{
    font-family: var(--principalFont);
    font-size: calc(var(--font-size)/1.5);
    color: var(--mer);
    text-align: center;
}
h2{
    font-family: var(--secondaryFont);
    font-weight: 400; 
    font-size: calc(var(--font-size)/2);
    color: var(--sable-mouille);
}
h3{
    font-family: var(--principalFont);
    font-size: calc(var(--font-size)/2);
    color: var(--mer);
    text-align: center;
    line-height: 0;
}
h4{
    font-family: var(--principalFont);
    font-size: var(--font-size);
    color: var(--sable-mouille);
}
h5{
    font-family: var(--secondaryFont);
    font-weight: 400; 
    font-size: calc(var(--font-size)/3);
    color: var(--sable-mouille);
    line-height: 1.2;
}

h1, h2, h3, h4, h5 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.gap{
    width: 100%;
    height: var(--height-gap);
}