@import url('https://api.fontshare.com/v2/css?f[]=zodiak@100,101,300,301,400,401,700,701&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=switzer@100,101,200,201,300,301,400,401,500,501,600,601&display=swap');

/**************GENERAL*********************/
#contenu {
    margin: 0 0 10vh 0;
}

section {
        margin-left: 2.4vw;
}

/**************  ABOUT *********************/
.about{
    align-items: center;
    margin-bottom: 7vh;

}

.img-id {
    z-index: -60;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-45%, -50.5%); /* Centre l'image */
    height: 98vh;
}

/**************  RESUME *********************/


.resume {
    width: 46vw;
    margin: 12vh 0 10vh 0;
    vertical-align: middle;
}

.resume h1 {
    font-family: 'Zodiak';
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.02vw;
    font-size: 6.3em;
    line-height: 120%;
    margin: 0;
    text-transform: uppercase;
    -webkit-text-stroke-color: white;
    -webkit-text-stroke-width: 0.013em;
    -webkit-text-fill-color: transparent;
    text-align: end;
    mix-blend-mode: difference;
}

.resume p {
    font-family: 'Switzer', sans-serif;
    font-weight: 300;
    font-size: 1.12em;
    line-height: 168%;
    color: white;
    mix-blend-mode: difference;
    margin-top: 0;
    margin-right: 8.4vw;
}

/**************  LINKS *********************/

.links {
    display: flex;
}

.links div {
    margin-top: 3.5vh;
}

.links div:nth-child(1) {
    width: 25.5vw;
}

.links div:nth-child(2), .links div:nth-child(3) {
    width: 27vw;
}

.links div p {
    font-family: 'Switzer', sans-serif;
    font-weight: 400;
    font-size: 0.78em;
    text-transform: uppercase;
    color: #8f8f8f;
    margin: 0 0 0.64vh 0;
    font-style: italic;
    letter-spacing: 0.01vw;
}

.links div a {
    text-decoration: none;
    font-family: 'Switzer', sans-serif;
    font-weight: 300;
    font-size: 1.17em;
    line-height: 140%;
    color: white;
    mix-blend-mode: difference;
}

/**************DESCRIPTION*********************/
#description{
    padding: 9vh 0 2vh 0;
    border-top: 1.6px solid rgb(73, 73, 73);
    border-bottom: 1.6px solid rgb(73, 73, 73);
}

/**************  BRIEF  *********************/

.description {
    display: flex;
    margin: 0 2.5vw 9vh 2.5vw;
}

.description:nth-child(2) {
    padding-top: 2vh;
}

.description-title {
    width: 25.5vw;
    font-family: 'Switzer', sans-serif;
    font-weight: 400;
    font-size: 0.94em;
    text-transform: uppercase;
    color: #8f8f8f;
    margin-top: 0.6vh;
    font-style: italic;
}

.middle-section {
    display: flex;
    justify-content: flex-start;
    font-size: 1.05em;
    font-family: 'Switzer', sans-serif;
    font-weight: 400;
}

.middle-section div {
    width: 27vw;
}

.title {
    font-style: italic;
    margin: 0 0 1.2vh 0;
    color: #8f8f8f;
}

li{ 
    list-style: none;
    line-height: 170%;
}


/*///////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/

/*********************TABLETTE********************/
@media (max-width: 1280px) {

.img-id {
    top: 46%;
    left: 60%;
    height: 99vh;
}

.resume {
    width: 55vw;
    margin: 12vh 0 7vh 0;
}

.resume h1 {
    font-size: 5.3em;
}

.resume p {
    font-size: 1.07em;
    line-height: 163%;
}


.links div p {
    font-size: 0.75em;
}

.links div a {
    font-size: 1.05em;
}

.links div:nth-child(3) {
    width: 30vw;
}

.description-title {
    margin-top: 0.3vh;
}

.middle-section {
    font-size: 0.96em;
}

.middle-section div {
    width: 24vw;
    padding-right: 3vw;
}

}

/*********************MOBILE********************/
@media (max-width: 770px) {

html, body {
  overflow-x: hidden;
}

.img-id {
    display: none;
}

.mobile-hide{
    display: none;
}

.about{
   display: block;
   margin: 10vh 3.3vw 6vh 3.5vw;
    
}

.resume {
    width: 100%;
    margin: 0 0 5vh 0;
}

.resume h1 {
    margin: 0;
    text-align: start;
    font-size: 5em;
}

.resume p {
    margin-top: 0.5vh;
    font-size: 1.05em;
    line-height: 162%;
    font-weight: 400;
    color: black;
    mix-blend-mode: normal;
}

.links {
    display: block;
}

.links div {
    width: 90%!important;
    margin-top: 2.8vh;
}

.links div p {
    font-size: 0.9em;
}

.links div a {
    font-size: 1.1em;
        color: black;
    mix-blend-mode: normal;
    font-weight: 400;
}


#description{
    padding-top: 5vh;
}

.description {
    display: block;
    margin: 0 3.2vw 0 3.5vw;
    padding: 0;
}

.description-text {
    width: 94vw;
}

.middle-section {
    display: block;
    font-size: 1.05em;
}

.title {
    margin: 0 0 0.5vh 0;
}

.middle-section div {
    width: 100%;
    margin-bottom: 3.5vh;
}

.description:nth-child(2) {
    padding-top: 5vh;
}
}