@font-face {
    font-family: abc;
    src: url(../ressources/ABCMonumentGrotesk.woff);
}

*{
    font-family: abc;
}

:root{
    --white: rgb(240, 240, 240);
    --black: black
}

@media (orientation: landscape) {
    :root{
        --font-size-1: 30px;
        --font-size-2: 30px;
        --opacity: 30%;
        --padding: 1vw;
    }

    .link{
        font-family: abc;
        font-size: var(--font-size-1);
        text-decoration: underline;
        width: fit-content;
        color: black;
    }
    
    .link:hover{
        cursor: pointer;
        opacity: var(--opacity);
        text-decoration: none;
    }
    
    body{
        display: flex;
        flex-direction: column;
        margin: 0%;
    }


    #boutons{
        height: auto;

        background-color: var(--black);

        position: fixed;
        bottom: 0px;
        color: var(--white);

        padding: var(--padding);
        width: calc(100vw - 2 * var(--padding));

        display: flex;
        flex-direction: row;
        justify-content: space-between;

        font-size: var(--font-size-2);
    }

    #boutons a{
        margin-left: var(--padding);
    }

    .micro-btn{
        text-decoration: underline;
        color: var(--white) !important;
    }

    .micro-btn:hover{
        cursor: pointer;
        opacity: var(--opacity);
        text-decoration: none;
    }
}

@media (orientation: portrait) {
    :root{
        --font-size-1: 15px;
        --font-size-2: 15px;
        --opacity: 30%;
        --padding: 1vw;
    }

    .link{
        font-family: abc;
        font-size: var(--font-size-1);
        text-decoration: underline;
        width: fit-content;
        color: black;
    }
    
    .link:hover{
        cursor: pointer;
        opacity: var(--opacity);
        text-decoration: none;
    }
    
    body{
        display: flex;
        flex-direction: column;
        margin: 0%;
    }


    #boutons{
        height: auto;

        background-color: var(--black);

        position: fixed;
        bottom: 0px;
        color: var(--white);

        padding: var(--padding);
        width: calc(100vw - 2 * var(--padding));

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        font-size: var(--font-size-2);
    }

    #boutons div:last-of-type{
        text-align: end;
    }

    #boutons div > span:first-of-type{
        transform: translateY(100%);
    }

    #boutons a{
        margin-left: var(--padding);
    }

    .micro-btn{
        text-decoration: underline;
        color: var(--white) !important;
    }

    .micro-btn:hover{
        cursor: pointer;
        opacity: var(--opacity);
        text-decoration: none;
    }
}

*::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  * {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }