@font-face {
    font-family: DepartureMono;
    src: url('/fonts/DepartureMono-Regular.woff') format('woff');
}

@font-face {
    font-family: ProtoMonoLight;
    font-style: Light;
    font-weight: 200;
    src: url('/fonts/ProtoMono-Light.woff') format('woff');
}

@font-face {
    font-family: ProtoMonoMedium;
    font-style: Medium;
    font-weight: 400;
    src: url('/fonts/ProtoMono-Medium.woff') format('woff');
}

@font-face {
    font-family: ProtoMonoBold;
    font-style: Bold;
    font-weight: 700;
    src: url('/fonts/ProtoMono-SemiBold.woff') format('woff'); 
}

.libre-barcode-128-regular {
    font-family: "Libre Barcode 128", system-ui;
    font-weight: 400;
    font-style: normal;
  }

html {
    margin: 10px 0px 30px 1px;
}

* {
    margin: 0;
    box-sizing: border-box;
    color: #1f1f1f;
    font-family: "DepartureMono", regular;
}

#telephone {
    padding-top: 20px;
}

#ticket {
    width: 400px;
    height: 1400px;
    background-color: rgb(249, 249, 249);
    margin: 0 auto;
    box-shadow: 5px 5px 19px #a29494;
    padding: 20px;
}

.logo {
    font-family: "ProtoMonoMedium";
    padding-top: 20px;
    text-align: center;
    font-size: 5px;
    white-space: pre-wrap;
    text-wrap: balance;
    display: flex;
    justify-content: center;
}

.separateur {
    font-family: "ProtoMonoLight";
    font-weight: 200;
    text-align: center;
    font-size: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.separateur2 {
    font-family: "ProtoMonoLight";
    font-weight: 200;
    text-align: center;
    font-size: 15px;
    padding-top: 10px;
    padding-bottom: 25px;
}

h1 {
    font-size: 14px;
    text-align: center;
}

.datetime {
    font-family: "DepartureMono";
}

#haut {
    text-align: center;
}

#liste {
    text-transform: uppercase;
    text-align: justify;
}

ul.leaders {
    max-width: 40em;
    padding: 0;
    overflow-x: hidden;
    list-style: none
}

ul.leaders li:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
}

ul.leaders span:first-child {
    padding-right: 0.33em;
    background-color: rgb(249, 249, 249);
}

ul.leaders span + span {
    float: right;
    padding-left: 0.33em;
    background-color: rgb(249, 249, 249);
}

#regles {
    font-size: 10px;
    padding-bottom: 5px;
}

#liste {
    padding-bottom: 15px;
}

.phrase {
    text-align: center;
    padding-bottom: 10px;
}

.phrase2 {
    text-align: center;
}

h6 {
    text-align: center;
}

h4 {
    text-align: center;
}

.lienPortfolio {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    text-align: center;
    font-size: 12px;
    border: 1px solid black;
}

.lienPortfolio:hover {
    color: #0000fc !important;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    text-align: center;
    font-size: 12px;
    border: 1px solid #0000fc;
}

.rainbow_text_animated {
    background: linear-gradient(to right, #6666ff, #0099ff, #ff3333, #ff6666);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 10s ease-in-out infinite;
    background-size: 400% 100%;
}

@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}

.rainbow_text_animated_reverse {
    background: linear-gradient(to right, #6666ff, #0099ff, #ff3333, #ff6666);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation_reverse 10s ease-in-out infinite;
    background-size: 400% 100%;
}

@keyframes rainbow_animation_reverse {
    0%,100% {
        background-position: 100% 0;
    }

    50% {
        background-position: 0% 0;
    }
}

.lien {
    color:transparent
}

@keyframes infiniteScroll {
    from {transform: translateX(0)}
    to {transform: translateX(-50%)}
  }
  .container {
    width: 100%;
    overflow-x: hidden;
  }
  .horizontal-scrolling-items {
    display: flex;
    font-size: 10px;
    width: 2600px;
    animation-name: infiniteScroll;
    animation-duration: 60s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    margin-bottom: 15px;
  }
  .horizontal-scrolling-items__item {
    white-space: nowrap;
  }

.barcode {
    text-align: center;
    font-family: "Libre Barcode 128", system-ui;
    font-size: 26px;
}

.infos {
    text-align: center;
    font-size:6px;
    text-transform: uppercase;
}

a:hover {
  color: #0000fc;
}

.dot {
    width: 70%;
}