@charset "UTF-8";

@font-face {
    font-family: "CrimsonText";
    src: url(../fonts/CrimsonText-Regular.ttf);
}

.infos {
    position: absolute;
    z-index: 30;
    right: 9vh;
    height: 100vh;
    width: 18vw;
    overflow: hidden;
    font-size: 3.8vh;
    line-height: 5vh;
    font-family: "CrimsonText";
}

.titres {
    position: absolute;
    z-index: 30;
    right: 27vh;
    height: 100vh;
    width: 18vw;
    overflow: hidden;
    font-size: 3.8vh;
    line-height: 5vh;
    font-family: "CrimsonText";
}

.container-eyes {
    position: fixed;
    top: 1em;
    left: 1em;
    z-index: 1000;
    width: 11vw;
    aspect-ratio: 409.3/97.4;

}

.eyesopen {
    width: 100%;
    height: 100%;
    cursor: pointer;
    fill: none;
    stroke: black;
    stroke-width: 2px;

}

.eyesclose {
    width: 100%;
    height: 100%;
    cursor: pointer;
    fill: none;
    stroke: black;
    stroke-width: 2px;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.scrolls-container {
    cursor: pointer;
    height: 100%;
    perspective: 5vw;
}

.map {
    position: absolute;
    background-color: transparent;
    z-index: 30;
    right: 10vh;
    height: 100vh;
    width: 12vw;
    overflow: hidden;
    font-size: 3.8vh;
    line-height: 5vh;
    text-align: right;
    font-family: "CrimsonText";
}

::-webkit-scrollbar {
    position: absolute;
    background: rgba(144,144,144,1);
    width: 80px;
}
.switch-night ::-webkit-scrollbar {
    background: rgba(0,0,0,1);
}

::-webkit-scrollbar-thumb {
    height: 0.17vw;
    background: black;
}
.switch-night ::-webkit-scrollbar-thumb {
    background: rgba(144,144,144,1);
}

.scroll-left::-webkit-scrollbar {
    display: none;
}

.scroll-mid::-webkit-scrollbar {
    display: none;
}

.scroll-right::-webkit-scrollbar {
    display: none;
}

.scroll-left::-webkit-scrollbar {
    display: none;
}

.scroll-container {
    cursor: pointer;
    z-index: 2;
    position: fixed;
    top:0;
    height: 100%;
    width: calc(100%/3);
    overflow-x: hidden;
}

.scroll-left {
    left: 2;
    transform: rotateZ(270deg) rotateX(90deg) rotateY(180deg);
}

.scroll-mid {
    z-index: 1;
    left: 0;
    transform: rotateX(75deg);
    top: 30%;
    width: 100%;
}

.scroll-right {
    z-index: 1;
    left:66.6%;
    transform: rotateZ(90deg) rotateX(90deg);
}

.scroll-back {
    width: 100%;
    z-index: 0;
}

.scroll-slide {
    height: 30%;
    width: 100%;
    background: transparent;
}

.switch-night .scroll-slide {
   opacity: 0;
}

.switch-night .container-infos {
   opacity: 0;
}

.scroll-slide-haut {
    z-index: 0;
    height: 60000%;
    width: 100%;
    border-bottom: 1px solid black;
    background: linear-gradient(180deg, rgba(121,172,233,1) 0%, rgba(214,216,218,1) 16%, rgba(213,214,215,1) 27%, rgba(105,121,156,1) 34%, rgba(75,86,108,1) 35%, rgba(0,0,0,1) 36%, rgba(0,0,0,1) 40%, rgba(167,170,173,1) 42%, rgba(171,200,228,1) 46%, rgba(162,209,255,1) 54%, rgba(178,197,217,1) 59%, rgba(0,0,0,1) 62%, rgba(0,0,0,1) 65%, rgba(153,181,221,1) 70%, rgba(241,241,241,1) 77%);
}

.switch-night .scroll-slide-haut {
    background: linear-gradient(180deg, rgb(52, 49, 49) 1%, rgba(134,102,21,1) 2%, rgba(0,0,0,1) 3%, rgba(0,0,0,1) 4%, rgba(170,94,6,1) 5%, rgba(0,0,0,1) 6%, rgba(94,68,9,1) 7%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 9%, rgba(180,112,9,1) 10%, rgba(0,0,0,1) 11%, rgba(0,0,0,1) 12%, rgba(134,102,21,1) 13%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 15%, rgba(170,94,6,1) 16%, rgba(0,0,0,1) 17%, rgba(94,68,9,1) 18%, rgba(0,0,0,1) 19%, rgba(0,0,0,1) 20%, rgba(180,112,9,1) 21%, rgba(0,0,0,1) 22%, rgba(0,0,0,1) 23%, rgba(134,102,21,1) 24%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 26%, rgba(170,94,6,1) 27%, rgba(0,0,0,1) 28%, rgba(94,68,9,1) 29%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 31%, rgba(180,112,9,1) 32%, rgba(0,0,0,1) 33%, rgba(0,0,0,1) 34%, rgba(134,102,21,1) 35%, rgba(0,0,0,1) 36%, rgba(0,0,0,1) 37%, rgba(170,94,6,1) 38%, rgba(0,0,0,1) 39%, rgba(94,68,9,1) 40%, rgba(0,0,0,1) 41%, rgba(0,0,0,1) 42%, rgba(180,112,9,1) 43%, rgba(0,0,0,1) 44%, rgba(0,0,0,1) 45%, rgba(134,102,21,1) 46%, rgba(0,0,0,1) 47%, rgba(0,0,0,1) 48%, rgba(170,94,6,1) 49%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 51%, rgba(0,0,0,1) 52%, rgba(134,102,21,1) 53%, rgba(0,0,0,1) 54%, rgba(0,0,0,1) 55%, rgba(170,94,6,1) 56%, rgba(0,0,0,1) 57%, rgba(94,68,9,1) 58%, rgba(0,0,0,1) 59%, rgba(0,0,0,1) 60%, rgba(180,112,9,1) 61%, rgba(0,0,0,1) 62%, rgba(0,0,0,1) 63%, rgba(134,102,21,1) 64%, rgba(0,0,0,1) 65%, rgba(0,0,0,1) 66%, rgba(170,94,6,1) 67%, rgba(0,0,0,1) 68%, rgba(94,68,9,1) 69%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 71%, rgba(180,112,9,1) 72%, rgba(0,0,0,1) 73%, rgba(0,0,0,1) 74%, rgba(134,102,21,1) 75%, rgba(0,0,0,1) 76%, rgba(0,0,0,1) 77%, rgba(170,94,6,1) 78%, rgba(0,0,0,1) 79%, rgba(94,68,9,1) 80%, rgba(0,0,0,1) 81%, rgba(0,0,0,1) 82%, rgba(180,112,9,1) 83%, rgba(0,0,0,1) 84%, rgba(0,0,0,1) 85%, rgba(134,102,21,1) 86%, rgba(0,0,0,1) 87%, rgba(0,0,0,1) 88%, rgba(170,94,6,1) 89%, rgba(0,0,0,1) 90%, rgba(94,68,9,1) 91%, rgba(0,0,0,1) 92%, rgba(0,0,0,1) 93%, rgba(180,112,9,1) 94%, rgba(0,0,0,1) 95%, rgba(0,0,0,1) 96%, rgba(134,102,21,1) 97%, rgba(0,0,0,1) 98%, rgba(0,0,0,1) 99%, rgba(170,94,6,1) 100%) !important;
}

.switch-night .container-image {
    opacity: 0;
 }

.container-infos {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 30;
    right: 80px;
    height: 100%;
    width: 25%;
    font-size: 3.8vh;
    line-height: 5vh;
    text-align: left;
    font-family: "CrimsonText";
}

.container-infos .etape {
    display: flex;
    border-bottom: 2px solid black;
}

.entry-etape {
    width: 100%;
}

.entry-km {
   text-align: center;
}

.entry-villes {
   text-align: right;
}

.container-image {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: calc(100% - 80px);
    height: 100%;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.container-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .4s ease-in-out;
}