/* Works on Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #2468d6 whitesmoke;
  }
  
  /* Works on Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 10px;
  }
  
  *::-webkit-scrollbar-track {
    background: whitesmoke;
  }
  
  *::-webkit-scrollbar-thumb {
    background-color: #2468d6;
  }

html, body {
    height: 100%;
    margin: 0;
}

#navbar{
    transition: all 0.5s;
}

.parallax {
    /* The image used */
    background-image: url("../img/background-moutain-modified.png");
  
    /* Set a specific height */
    /* min-height: 1000px; */
    height: 100%;
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bloc-page {
    background-color:whitesmoke;
    color:black;
    padding:5%;
}

.bloc-page img{
    width: 50%;
    padding: 5px;
    border-radius: 50%;
}

.bloc-page2 {
    background-color:#2468d6;
    color:black;
    padding:5%;
}

.bloc-page2 h1{
    color: white;
}

.bloc-page3 {
    background-color:#d69224;
    color:white;
    padding:5%;
}

.div-center {
    margin: 0;
    position: absolute;
    display:flex; 
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.text-header{
    padding:10%;
    color:black;
    border-radius: 30px;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.color-logo-bleu{
    color:#2468d6;
}

.color-logo-orange{
    color:#d69224;
}

.presentation{
    font-size: 2ch;
}

@media screen and (min-device-width : 320px) {
    .div-center {
        margin: 0;
        position: absolute;
        display:flex; 
        align-items: center;
        justify-content: center;
        top: 50%;
        left: 35%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .text1 {
        font-size: 2ch;
    }

    .text2{
        font-size: 2.75ch;
    }
    
    .text3{
        font-size: 2.25ch;
    }

    .presentation{
        font-size: 1.5ch;
    }
}

@media screen and (min-device-width : 375px) {
    .div-center {
        margin: 0;
        position: absolute;
        display:flex; 
        align-items: center;
        justify-content: center;
        top: 50%;
        left: 35%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .text1 {
        font-size: 2.25ch;
    }

    .text2{
        font-size: 3.25ch;
    }
    
    .text3{
        font-size: 2.75ch;
    }

    .presentation{
        font-size: 1.75ch;
    }
}

@media screen and (min-device-width : 425px) {
    .div-center {
        margin: 0;
        position: absolute;
        display:flex; 
        align-items: center;
        justify-content: center;
        top: 50%;
        left: 35%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .text1 {
        font-size: 2.75ch;
    }

    .text2{
        font-size: 3.75ch;
    }
    
    .text3{
        font-size: 3.25ch;
    }

    .presentation{
        font-size: 2.25ch;
    }
}

@media screen and (min-device-width : 425px) and (orientation: landscape) {
    .div-center {
        margin: 0;
        position: absolute;
        display:flex; 
        align-items: center;
        justify-content: center;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .text1 {
        font-size: 3.5ch;
    }

    .text2{
        font-size: 4.5ch;
    }
    
    .text3{
        font-size: 4ch;
    }

    .presentation{
        font-size: 2.5ch;
    }
}

@media screen and (min-device-width : 768px) {
    .div-center {
        margin: 0;
        position: absolute;
        display:flex; 
        align-items: center;
        justify-content: center;
        top: 50%;
        left: 35%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .text1 {
        font-size: 6ch;
    }

    .text2{
        font-size: 7ch;
    }
    
    .text3{
        font-size: 6.5ch;
    }

    .presentation{
        font-size: 2.5ch;
    }
}

@media screen and (min-device-width : 768px) and (orientation: landscape) {
    .div-center {
        margin: 0;
        position: absolute;
        display:flex; 
        align-items: center;
        justify-content: center;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .text1 {
        font-size: 4ch;
    }

    .text2{
        font-size: 5ch;
    }
    
    .text3{
        font-size: 4.5ch;
    }

    .presentation{
        font-size: 2.5ch;
    }
}

@media screen and (min-device-width : 1024px) and (orientation: landscape) {
    .div-center {
        margin: 0;
        position: absolute;
        display:flex; 
        align-items: center;
        justify-content: center;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .text1 {
        font-size: 6ch;
    }

    .text2{
        font-size: 7ch;
    }
    
    .text3{
        font-size: 6.5ch;
    }

    .presentation{
        font-size: 3ch;
    }
}

@media screen and (min-device-width : 1440px) and (orientation: landscape) {
    .div-center {
        margin: 0;
        position: absolute;
        display:flex; 
        align-items: center;
        justify-content: center;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .text1{
        font-size: 8ch;
    }
    
    .text2{
        font-size: 10ch;
    }
    
    .text3{
        font-size: 9.25ch;
    }

    .presentation{
        font-size: 3ch;
    }
}