@font-face {
    font-family: 'madeInfinity';
    src: url('./fonts/madeInflityFont/MADEINFINITYPersonalUse-Medium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
html {
    width: 100vw;
}
@font-face {
    font-family: 'vokrus';
    src: url('./fonts/Vorkurs/II Vorkurs Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AcuminPro';
    src: url('./fonts/Acumin Pro/Acumin Pro Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

div:not(.timeline) {
    background-color: #fefefe;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fefefe;
    overscroll-behavior: none;
}

.firstPage {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fefefe;
}

ul {
    margin : 0 !important;
}
html {
    margin : 0 !important;
    padding : 0 !important;
}
.container {
    position: relative;
    z-index: 10;
}

.circle {
    display: flex;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    position: absolute;
    left: -176px; /* Ajustez cette valeur pour aligner avec le "O" */
    top: 50%;
    transform: translateY(-50%);
    justify-content: center;
    align-items: center;
    z-index: 1;
    opacity: 0;
}

.circle.loaded {
    animation: 1.5s normal 1.75s forwards openingFlashAnimationCircle;
}

.circle p {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    transform-origin: center;
    animation: rotate 35s 2.25s linear infinite;
    font-family: 'AcuminPro';
}

.circle span {
    display: inline-block;
    position: absolute;
    left: 50%;
    transform-origin: 0 175px;
    font-size: 27px;
}


.welcomeTitle {
    font-size: 14rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 190px;
    z-index: 2;
    padding-top : 20px;
    font-family: 'Bebas Neue', cursive;
    overflow: hidden;
    animation: 0.01s normal 10s forwards disactiveOverflowHiddenAnimation;
}

#portfolioTxt{
    margin : 0;
    padding : 0;
    transform: translateY(100%);
    z-index: 4;
    opacity: 0;
}

#portfolioTxt.loaded {
    animation: 1.5s normal 0.1s forwards openingFlashAnimation;
}

@keyframes openingFlashAnimation {
    from {
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes disactiveOverflowHiddenAnimation {
    to {
        overflow: visible;
    }
}
@keyframes openingFlashAnimationCircle {
    from {
    }
    to {
        opacity: 1;
    }
}


@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.containerCertifButton {
    position: relative;
    width: 30vw;
    align-content: center;
    align-items: center !important;
    justify-content: center;
}

.certifButton {
    position: absolute;
    width: 50%;
    height: 40px;
    border-radius: 20px;
    top : 10px;
    left : 55px;
    color: white;
    align-content: center;
    text-align: center;
    background-color: black !important;
    cursor: pointer;
    font-size : 1vw;
}

#divFinTxt {
    white-space: nowrap;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 1.3em;
    padding-left : 5px;
    padding-right : 5px;
}

html::-webkit-scrollbar {
    width: 12px; /* width of the entire scrollbar */
}

body::-webkit-scrollbar {
    width: 12px; /* width of the entire scrollbar */
}

body::-webkit-scrollbar {
    width: 10px; /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
    background: #f1f1f1; /* couleur de l'arrière-plan de la scrollbar */
}

body::-webkit-scrollbar-thumb {
    background: #888; /* couleur de la partie qui défile */
}

body::-webkit-scrollbar-thumb:hover {
    background: #555; /* couleur de la partie qui défile au survol */
}

.single-line-text {
    white-space: nowrap; /* Empêche le texte de se casser sur plusieurs lignes */
    overflow: hidden;    /* Cache le texte qui dépasse */
    text-overflow: ellipsis; /* Ajoute des points de suspension à la fin si le texte dépasse */
    box-sizing: border-box;
}

#disclamerAntiOrdi {
    display: none;
}

#disclamerProOrdi, #disclamerFentre1000px {
    display: none;
    font-size: 1em;
    align-content: center;
    text-align: center;
    font-family: 'madeInfinityThin', cursive;
    height: 100vh;
}

.certifButton p {
    padding-right: 15px;
    padding-left : 15px;
}

@media only screen and (max-width: 767px) {
    #disclamerProOrdi {
        display: block;
    }

    .firstPage, .timeline {
        display: none;
    }

    #containerSecondPage {
        display: none !important;

    }

    body {
        overflow: hidden;
    }
}

@media only screen and (min-width: 767px) and (max-width: 1026px) {
    #disclamerFentre1000px {
        display: block;
    }

    .firstPage, .timeline {
        display: none;
    }

    #containerSecondPage {
        display: none !important;
    }
    body {
        overflow: hidden;
    }
}

.certifContainer {
    width: 100%;
    text-align: center;
    height: 40px;
    cursor : pointer;
}

.certifContainer p {
    top : 20px;
    background-color: black;
    height: 100%;
    color : white;
    padding : 0px 20px 0px 20px;
    border-radius: 17px;
}

a {
    color: #ffffff !important;
    text-decoration: none;
}

a:hover,
a:focus,
a:active {
    color: #ffffff !important;
    text-decoration: none;
}