@font-face {
    font-family: adelphe;
    src: url(fonts/adelphe/Adelphe-GerminalRegular.woff2);
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: adelphe;
    src: url(fonts/adelphe/Adelphe-GerminalItalic.woff2);
    font-style: italic;
    font-weight: normal;
}

@font-face {
    font-family: adelphe;
    src: url(fonts/adelphe/Adelphe-GerminalBold.woff2);
    font-style: normal;
    font-weight: bold
}

@font-face {
    font-family: adelphe;
    src: url(fonts/adelphe/Adelphe-GerminalBoldItalic.woff2);
    font-style: italic;
    font-weight: bold;
}

@font-face{
    font-family: trouble;
    src: url(fonts/trouble_troublehel_100_kerned.otf);
}

@font-face{
    font-family: troubleIn;
    src: url(fonts/troublehel_150.otf);
}

@font-face {
    font-family: trouble_adelphe;
    src: url(fonts/trouble_adelphe_kerned.otf);
}

#backImage{
    min-height: 200vh;
    min-width: 150vw;
    pointer-events: none;
    display: block;
    position: fixed;
    width: auto;
    height: auto;
    top: 50%;
    filter: blur(20px);
    opacity: .15;
    mix-blend-mode:luminosity;
    transform-origin: center;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg) ;
}


::selection{
    background-color: black;
    color: white;
}



:root{
    --mainfont : adelphe;
    --ndfont : trouble;
     --backC : rgb(234, 234, 234); 
   /* --backC : #6e4635 ;*/
    --fontTitle : 3.5vw;
    --fontTitleLess : 2.5vw;
    --fontInter : 1.5vw;
    --fontIntroNum : 3vw;
    --textS : 1.3vw;
    --smallText : .95vw;
    --smallMarge : 2vw;
}

.trouble{
    font-family: trouble;
    font-size: .9em;
}

em{
    font-style: italic;
}
strong{
    font-weight: bold;
}

.minu{
    text-transform: lowercase;
}

body{
    margin: 0 auto;
    background-color: var(--backC);
    font-family: adelphe;
}

/* width */
::-webkit-scrollbar {
    width: 5px;    
  }
  
/* Track */
::-webkit-scrollbar-track {
background: var(--ndColor);
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #888; 
background: var(--mainColor); 

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: black; 
}



/* CREDITS  */

#credits{
    display: block;
    position: relative;
    padding: 1vw;
    line-height: 1.2;
    background-color: var(--mainColor);
    color: var(--ndColor);
}

#credits h1{
    display: block;
    font-family: trouble;
    font-size: .9em;
}

#credits h1::after{
    display: block;
    content: " ";
    white-space: pre;
}

#credits p::after{
    display: block;
    content: " ";
    white-space: pre;
}

.listCred{
    display: block;
    columns: 2;
    column-gap: var(--smallMarge);
}
.listCred p {
    display: inline-block;
    width: 100%;
}


#lang{
    z-index: 100;
}


@media (orientation:portrait) {

    .desktop{
        display: none;
    }

    body{
        overflow-x: hidden;
    }

    :root{
      
        --fontTitle : 7.5vw;
        --fontTitleLess : 6.5vw;
        --fontInter : 4vw;
        --fontIntroNum : 3vw;
        --textS : 3.8vw;
        --smallText : 3vw;
        --smallMarge : 5vw;
    }

    #credits{
        padding: 5vw;
        line-height: 1.2;
        font-size: var(--smallText);
    }
    
    #credits h1{
        font-size: .9em;
    }

    #credits h1::after{
        display: block;
        content: " ";
        white-space: pre;
    }

    #credits p::after{
        display: block;
        content: " ";
        white-space: pre;
    }

    .listCred{
        columns: 1;

    }
    
    
    
}