body{
    background: black;
}

main{
    margin-top: 200px;
    width: 100vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.page_title{
    margin: var(--padding2) auto;
    text-align: center;
}

.section{
    margin-top: 70px;
    max-width: var(--page_content_width);
    display: flex;
    justify-content: center;
}

.navbar .logo_signature{
    background-image: url("../data/nav/Signature_lhp_footer.svg");
}

.mission_container_round{
    width: 500px;
    height: 500px;
    padding: var(--padding6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.mission_container_round::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--blue);
    -webkit-mask-image: radial-gradient(
        circle, 
        rgba(0, 0, 0, 0) 50%, 
        black 50%,
        black 51%,
        rgba(0, 0, 0, 0) 51%);
    mask-image: radial-gradient(
        circle, 
        rgba(0, 0, 0, 0) 50%, 
        black 50%,
        black 51%,
        rgba(0, 0, 0, 0) 51%);
}

.mission_content > *:first-child, .qui > *:first-child{
    margin-bottom: var(--padding2);
}

.orbit_container{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.orbit_area{
    width: 100%;
    height: 100%;
    position: relative;
}

.orbit{
    position: absolute;
    width: 100%;
    height: 100%;
}

.orbit1{
    animation: rotate 6s linear infinite;
}

.orbit2{
    animation: rotate 4s linear infinite;
}

.satellite {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -25%);
}

.satellite1{
    background: conic-gradient(
        var(--blue) 0deg 30deg,
        transparent 30deg 360deg
    );
    -webkit-mask-image: radial-gradient(
        circle, 
        rgba(0, 0, 0, 0) 50%, 
        black 50%,
        black 55%,
        rgba(0, 0, 0, 0) 55%);
    mask-image: radial-gradient(
        circle, 
        rgba(0, 0, 0, 0) 50%, 
        black 50%,
        black 55%,
        rgba(0, 0, 0, 0) 55%);
}

.satellite2{
    background: conic-gradient(
        transparent 0deg 170deg,
        var(--blue) 170deg 210deg,
        transparent 210deg 360deg
    );
    -webkit-mask-image: radial-gradient(
        circle, 
        rgba(0, 0, 0, 0) 50%, 
        black 50%,
        black 52%,
        rgba(0, 0, 0, 0) 52%);
    mask-image: radial-gradient(
        circle, 
        rgba(0, 0, 0, 0) 50%, 
        black 50%,
        black 52%,
        rgba(0, 0, 0, 0) 52%);
}

.satellite3{
    background: conic-gradient(
        transparent 0deg 130deg,
        var(--dark_blue) 130deg 180deg,
        transparent 180deg 360deg
    );
    -webkit-mask-image: radial-gradient(
        circle, 
        rgba(0, 0, 0, 0) 51%, 
        black 51%,
        black 53%,
        rgba(0, 0, 0, 0) 53%);
    mask-image: radial-gradient(
        circle, 
        rgba(0, 0, 0, 0) 51%, 
        black 51%,
        black 53%,
        rgba(0, 0, 0, 0) 53%);
}

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

.qui_container{
    display: flex;
    align-items: center;
    gap: var(--padding3);
}

.qui_image{
    content: "";
    background-image: url(..//data/pictures/a_propos/train.webp);
    background-size: 110%;
    width: 300px;
    height: 400px;
    flex-shrink: 0;
}

.qui{
    flex: 1;
}

.aventure_container{
    position: relative;
    z-index: 0;
    width: calc(var(--page_content_width) * 0.5);
    margin: var(--padding6);
}

.aventure_text{
    position: relative;
    z-index: 10;
    padding: var(--padding4);
    border: solid white 5px;
    position: relative;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.aventure_image{
    position: absolute;
}

.aventure_image:nth-of-type(1){
    background-image: url(../data/pictures/a_propos/aars.webp);
    width: 200px;
    height: 300px;
    top: -150px;
    left: -100px;
    z-index: 3;
}

.aventure_image:nth-of-type(2){
    background-image: url(../data/pictures/a_propos/astronaute.webp);
    width: 300px;
    height: 200px;
    bottom: -20px;
    left: -150px;
    z-index: 3;
}

.aventure_image:nth-of-type(3){
    background-image: url(../data/pictures/a_propos/bivouac.webp);
    width: 300px;
    height: 400px;
    bottom: -300px;
    left: 100px;
    z-index: 2;
}

.aventure_image:nth-of-type(4){
    background-image: url(../data/pictures/a_propos/cascade.webp);
    width: 350px;
    height: 450px;
    bottom: -150px;
    right: -250px;
    z-index: 5;
}

.aventure_image:nth-of-type(5){
    background-image: url(../data/pictures/a_propos/rando.webp);
    width: 270px;
    height: 400px;
    top: -230px;
    right: -200px;
    z-index: 4;
}

@media (max-width: 1100px){/* mobile only*/
    .mission_container_round{
        width: 70vw;
        height: 70vw;
    }

    .qui_container{
        flex-direction: column;
        width: 80vw
    }

    .aventure_container{
        width: 80vw;
        margin: 80vw auto;
    }

    .aventure_text{
        padding: 3vw;
    }

    /******/

    .aventure_image{
        display: none;
    }

    .aventure_container{
        margin: 10vw auto;
    }


    /*
    .aventure_image:nth-of-type(1){
        width: 37vw;
        height: 60vw;
        top: -70vw;
        left: -5vw;
        z-index: 3;
    }

    .aventure_image:nth-of-type(2){
        width: 45vw;
        height: 30vw;
        bottom: -20vw;
        left: -10vw;
        z-index: 3;
    }

    .aventure_image:nth-of-type(3){
        width: 40vw;
        height: 55vw;
        bottom: -50vw;
        left: 30vw;
        z-index: 2;
    }

    .aventure_image:nth-of-type(4){
        width: 40vw;
        height: 55vw;
        bottom: -25vw;
        right: -20vw;
        z-index: 5;
    }

    .aventure_image:nth-of-type(5){
        width: 45vw;
        height: 68vw;
        top: -60vw;
        right: -5vw;
        z-index: 4;
    }*/
}