body{
    background-color: white;
    font-family: Helvetica, Arial, sans-serif;
    color: black;
    display: flex;
    width: 100%;
    margin: 0px;
}



header{
    width: 100%;
    height: 15%;
    position: fixed;
    
}
.entete{
    margin: 3rem 0 3rem 7%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.username{
    margin-left: 70% ;
    text-decoration: none;
    color: black;
    font-weight: 500;
    font-size: x-large;
}


.burger span{
	background: black;
	width: 30px;
	height:  2.5px;
	display:  block;
}

.burger span:not(:last-child) {
	margin-bottom:  6px;
}

.logo{
    width: 71px;
    height: 71px;
    margin: -1rem 7rem 3rem 2rem;
}


.main-container{
    width: 70vw;
    display: block;
    margin-left: 20%;
    min-height: 100vh;
    height: 150vh;
    display: flex;
    justify-content: space-between;
        
}

.image1{
    width: 215px;
    height: 215px;
    /*margin: O O O -15%;*/
}


.image2{
    width: 420px;
    height: 500px;
    margin: 8rem 3rem 0 0;
}

.txt-carreer{
    margin: 15rem 0 0 -17rem ;
}

.txt1{
    font-size: 1.2rem;
    position: absolute;
    margin: 5% 0 0% -15%;

}

.txt2{
    font-size: 3.7rem;
    position:absolute;
    margin: 7% 0% 0 -15%;

}

.image3{
    width: 450px;
    height: 450px;
    margin: 40rem 0 0 -29rem;
}


.main-container2{
    width: 70vw;
    display: block;
    margin-left: 19%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}




.txt-embracing{
    margin-bottom: 5rem;
}
.txt3{
    font-size: 1.5rem;
}

.txt4{
    font-size: 2.7rem;
}

.grid{
    display: grid;
    grid-column-gap: 13rem;
    grid-row-gap: 3rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    
}

.grid1{
    
    grid-column: 1;
    grid-row: 1;
    padding-left: 0.5rem;
    border-left: 2px solid #d300c5;
    /*border-left: 2px solid #ff0169;
    border-left: 2px solid #FF7a00;*/
    /*background: radial-gradient(
        farthest-corner at 40px 60px,
        #fdf497 0%,
        #fdf497 5%,
        #FD5949 45%,
        #d6249f 60%,
        #285AEB 90%
    );
    z-index: 5;*/
}

.white{
    background: black;
    z-index: 100;

}

.grid2{
    grid-column: 2;
    grid-row: 1;
    padding-left: 0.5rem;
    border-left: 2px solid #d300c5;
}
.grid3{
    
    grid-column: 1;
    grid-row: 2;
    padding-left: 0.5rem;
    border-left: 2px solid #d300c5;
}

.grid4{
    
    grid-column: 2;
    grid-row: 2;
    padding-left: 0.5rem;
    border-left: 2px solid #d300c5;
}

.img-container{
    background-image: url(images/images_4.png);
    background-size: 100%;
    width: 100vw;
    display: block;
    height: 800px;
    display: flex;
    justify-content: center;
    margin-top: 3rem;

}

.image4{
width: 100%;
position: absolute; 
}

.txt5{
    font-size: 4.75em;
    position: absolute; 
    color: white;
    margin: -50% -80% 0% 20%;
}

@media screen and (max-Width: 770px) {
    .image1{
        display: none;
    }

    .image3{
        display: none;
    }
}