body {
    background-color: #000;
    color: white;
    font-family: "Roboto", sans-serif;
    margin: 0;
    padding: 0;
}

footer {
    text-align: center;
    font-size: .75rem;
    margin-top: 8rem;
}

a {
    color: #fff;
    text-decoration: none;
}

h1 {
    color: white;
}

h2 {
    color: #f87f23;
}

ul {
    line-height: 2rem;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.contact-section {
    margin-top: 5rem;
    text-align: center;
}

.page1 {
    height: 100vh;
}

.page2 {
    text-align: center;
    margin-top: 10rem;
}

.page2 h1 {
    margin-top: 0;
    font-size: 4.5rem;
    margin-bottom: 5rem;
}

.page2 h3 {
    margin-bottom: 0;
    font-size: 1.5rem;
}

ul li {
    margin-bottom: 2rem;
}

.link-section {
    padding-bottom: 3rem;
    width: 400px;
    border-bottom: solid 1px #fff;
    text-align: center;
    margin: auto;
}

.aspect {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 1rem;
    row-gap: 1rem;
    padding-left: 25rem;

    transition-duration: 2s;

}

a:hover {
    text-decoration: underline;
}

.logo-page1 {
    width: 40%;
    z-index: 100;
}

.logo1 {
    position: absolute;
    top: 35%;
    width: 100%;
    text-align: center;
}

.logo-page2 {
    max-width: 20%;
    margin-bottom: 2rem;
}

.background-elipse {
    margin: auto;
    text-align: center;
}

.elipse {
    width: 50%;
    margin-top: 100px;
    z-index: -1;

    animation: spin  1s linear;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll)* -1s);
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

.down-arrow-section {
    display: flex;
    position: absolute;
    bottom: 20%;
    width: 100%;
}

.bio-section{
    max-width: 60%;
    margin:auto;
    text-align: justify;
    line-height: 2rem;
    margin-top: 5rem;
}

.bio-section img{
    display: block;
    margin-bottom: 3rem;
}

.bio-img{
    width: 15rem;
    border-radius: 50%;
    margin: auto;
    position:relative;
    z-index: 100;
}

.down-arrow-section2 {
    display: flex;
    position: relative;
    bottom: 20%;
    width: 100%
    margin-top:4rem;
}

.triangle {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 20px 30px 20px;
    border-color: transparent transparent #f87f23 transparent;
    transform: rotate(180deg);
    border-radius: 10%;
    margin: auto;
    margin-top: 35px;
    animation: MoveUpDown 1s linear infinite;
}

.cercle {
    width: 70px;
    height: 70px;
    border: solid 2px white;
    border-radius: 50%;
    text-align: center;
    display: block;
    margin: auto;
}

@keyframes MoveUpDown {

    0%,
    100% {
        margin-top: 20px;
    }

    50% {
        margin-top: 30px;
    }
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotateY(.5turn) translate(25%, 120%);
        transform: rotateY(.5turn) translate(25%, 120%);
    }
}

@keyframes spin {
    to {
        -webkit-transform: rotateY(.5turn) translate(25%, 90%);
        transform: rotateY(.5turn) translate(25%, 90%);
    }
}

/*@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
        .elipse {
            -webkit-animation: spin linear both;
                    animation: spin linear both;
            animation-timeline: scroll();
        }
    };
}
*/
.paragraph {
    margin-bottom: 10rem;
    margin-top: 3rem;
}

/* MObile view */

@media screen and (max-device-width: 500px) {
    .logo-page1 {
        width: 90%;
        z-index: 100;
    }

    .page2 h1 {
        font-size: 2.7rem;
    }

    .logo-page2 {
        max-width: 40%;
        margin-bottom: 2rem;
    }

    .bio-section{
        max-width: 90%;
        margin:auto;
        text-align: center;
        line-height: 1.5rem;
        margin-top: 5rem;
    }



    .page2 h3:first-child {
        font-size: 1rem;
    }

    .logo1 {
        position: absolute;
        top: 35%;
        text-align: center;
    }

    .background-elipse {
        margin: auto;
        text-align: center;
    }

    .elipse {
        width: 100%;
        margin-top: 45%;
    }

    .down-arrow-section {
        display: flex;
        position: absolute;
        bottom: 10%;
        width: 100%;
    }

    .triangle {
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 0 15px 20px 15px;
        border-color: transparent transparent #f87f23 transparent;
        transform: rotate(180deg);
        border-radius: 10%;
        margin: auto;
        animation: MoveUpDown 1s linear infinite;
    }

    .cercle {
        width: 50px;
        height: 50px;
        border: solid 2px white;
        border-radius: 50%;
        text-align: center;
        display: block;
        margin: auto;
    }

    @keyframes MoveUpDown {

        0%,
        100% {
            margin-top: 15px;
        }

        50% {
            margin-top: 20px;
        }
    }

    @-webkit-keyframes spin {
        to {
            -webkit-transform: rotateY(.5turn) translate(0%, 350%);
            transform: rotateY(.5turn) translate(0%, 350%);
        }
    }

    @keyframes spin {
        to {
            -webkit-transform: rotateY(.5turn) translate(0%, 350%);
            transform: rotateY(.5turn) translate(0%, 350%);
        }
    }

}

/*large mobile view */

@media screen and (min-device-width: 501px) and (max-device-width: 750px) {
    .logo1 {
        position: absolute;
        top: 30%;
        text-align: center;
    }

    .logo-page1 {
        width: 70%;
        z-index: 100;
    }

    .background-elipse {
        margin: auto;
        text-align: center;
    }

    .elipse {
        width: 80%;
        margin-top: 20%;
    }

    .down-arrow-section {
        display: flex;
        position: absolute;
        bottom: 10%;
        width: 100%;
    }

    .triangle {
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 0 15px 20px 15px;
        border-color: transparent transparent #f87f23 transparent;
        transform: rotate(180deg);
        border-radius: 10%;
        margin: auto;
        animation: MoveUpDown 1s linear infinite;
    }

    .cercle {
        width: 50px;
        height: 50px;
        border: solid 2px white;
        border-radius: 50%;
        text-align: center;
        display: block;
        margin: auto;
    }

    @keyframes MoveUpDown {

        0%,
        100% {
            margin-top: 15px;
        }

        50% {
            margin-top: 20px;
        }
    }

    @-webkit-keyframes spin {
        to {
            -webkit-transform: rotateY(.5turn) translate(0%, 250%);
            transform: rotateY(.5turn) translate(0%, 250%);
        }
    }

    @keyframes spin {
        to {
            -webkit-transform: rotateY(.5turn) translate(0%, 250%);
            transform: rotateY(.5turn) translate(0%, 250%);
        }
    }
}

@media screen and (min-device-width: 751px) {
    .logo-page1 {
        width: 50%;
        z-index: 100;
    }

    .logo-page2 {
        width: 35%;
    }

    .logo1 {
        position: absolute;
        top: 30%;
        text-align: center;
    }

    .background-elipse {
        margin: auto;
        text-align: center;
    }

    .elipse {
        width: 60%;
    }

    .down-arrow-section {
        display: flex;
        position: absolute;
        bottom: 10%;
        width: 100%;
    }

    .triangle {
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 0 15px 20px 15px;
        border-color: transparent transparent #f87f23 transparent;
        transform: rotate(180deg);
        border-radius: 10%;
        margin: auto;
        animation: MoveUpDown 1s linear infinite;
    }

    .cercle {
        width: 50px;
        height: 50px;
        border: solid 2px white;
        border-radius: 50%;
        text-align: center;
        display: block;
        margin: auto;
    }

    .link-section {
        width: 300px;
        text-align: left;
        margin: 0;
    }

    .contact-section {
        text-align: left;
    }

    .page2 {
        display: grid;
        grid-template-columns: 1fr 2fr;
        margin: 5rem;
    }

    .page2-section2 {
        order: 1;
        position: relative;
    }

    .page2-section2 div {
        position: absolute;
        bottom: 0;
    }

    .page2-section1 {
        order: 2;
    }


    @keyframes MoveUpDown {

        0%,
        100% {
            margin-top: 15px;
        }

        50% {
            margin-top: 20px;
        }
    }


    @-webkit-keyframes spin {
        to {
            -webkit-transform: rotateY(1turn) translate(30%, 290%);
            transform: rotateY(1turn) translate(30%, 290%);
        }
    }

    @keyframes spin {
        to {
            -webkit-transform: rotateY(1turn) translate(30%, 290%);
            transform: rotateY(1turn) translate(30%, 290%);
        }
    }

}

@media screen and (min-device-width: 1201px) {
    .logo-page2 {
        width: 78%;
    }

    .services {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto auto;
        grid-column-gap: 5rem;
        text-align: left;
        float: right;
        min-width: 75%;

    }

    ul {
        list-style-type: disc;
        padding: 7%;
    }

    .service-billet-point {
        text-align: right;
        margin-top: 2rem;
    }

}

@media screen and (min-device-width: 1901px) {
    @-webkit-keyframes spin {
        to {
            -webkit-transform: rotateY(1turn) translate(30%, 230%);
            transform: rotateY(1turn) translate(30%, 230%);
        }
    }

    @keyframes spin {
        to {
            -webkit-transform: rotateY(1turn) translate(30%, 230%);
            transform: rotateY(1turn) translate(30%, 230%);
        }
    }

    .logo-page2 {
        width: 50%;
    }

    p a{
        font-size: 2rem;
    }

}

@media screen and (max-height: 400px) {
    .cercle {
      display: none;
    }
}