@font-face {
    font-family: Vercors;
    src: url(fonts/Drome-Vercors.woff2);
}

@font-face {
    font-family: Ardeche;
    src: url(fonts/Drome-Ardeche.woff2);
}

@font-face {
    font-family: Barronies;
    src: url(fonts/Drome-Barronies.woff2);
}

@font-face {
    font-family: Royans;
    src: url(fonts/Drome-Royans.woff2);
}

@font-face {
    font-family: Diois;
    src: url(fonts/Drome-Diois.woff2);
}

@font-face {
    font-family: eterne-text;
    src: url(fonts/eterne-text.woff2);
}

@font-face {
    font-family: eterne-bold;
    src: url(fonts/eterne-text-1.woff2);
}

/* .button{
    filter: invert(68%) sepia(71%) saturate(5978%) hue-rotate(124deg) brightness(90%) contrast(101%);
    
} */

.button div{
    writing-mode: vertical-lr;
    text-orientation: mixed;
    rotate: 180deg;
    line-height: .48;
}

.button a{
    writing-mode: vertical-lr;
    text-orientation: mixed;
    rotate: 180deg;
    line-height: .48;
    color: var(--vert);
}

/* ------------------- boutons modules --------------------- */
.button{
    font-family: Royans;
    font-size: 6vw;
    line-height: .45;
    color: var(--vert);
    z-index: 1000;
    margin: 1.5vw;
    width: 3vw;
    position: fixed;
    display: flex;
    flex-direction: column;
}

.button img{
    color: var(--vert);
    width: 100%;
}

.button a{
    margin-bottom: 1vw;
    margin-top: 1vw;
}

.button div{
    margin-bottom: 1vw;
    margin-top: 1vw;
}

#btn-1{
    top: 0px;
    left: 0px;
}

#btn-2{
    bottom: 0px;
    left: 0px;
}
#btn-3{
    top: 0px;
    right: 0px;
}
#btn-4{
    right: 0px;
    bottom: 0px;
}
#btn-5{
    bottom: 0px;
    left: 50vw;
    transform: translateX(-50%);
}


.button:has(> a):hover {
    color: black;
    filter: brightness(0) saturate(100%);
    cursor: pointer;
}

.button:has(> div):hover {
    color: black;
    filter: brightness(0) saturate(100%);
    cursor: pointer;
}

p{
    margin: 0px
}

:root{
    --vert: #00a048;
    --marron: #2d1b0b;
    --blanc: rgb(255, 255, 255);
    --margin-border: 6vw;
}

body{
    margin: 0px;
    overscroll-behavior: contain;
    background-color: var(--blanc);
}

*::-webkit-scrollbar {
    display: none;
}
* {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.eterne-text{
    font-family: eterne-text;
}