body {
    background: #fbf9fe;
}

/* color */

:root{

    --blue : #2159FF;
    --black : #01002A;
    --white : #FFF;
}

/* font */
 @media (min-width: 300px) {
    .title-6xl{
        margin: 0;
        color: var(--white);
        font-size: 4vh;
        font-weight: 400;
        font-family: 'Host Grotesk';
    }

    .title-5xl{
        margin: 0;
        color: var(--black);
        font-size: 3.5vh;
        font-weight: 400;
        font-family: 'Host Grotesk';
    }

    .title-5xlwhite{
        margin: 0;
        color: var(--white);
        font-size: 3.5vh;
        font-weight: 400;
        font-family: 'Host Grotesk';
    }

    .title-4xl{
        margin: 0;
        color: var(--black);
        font-size: 3vh;
        font-weight: 400;
        font-family: 'Host Grotesk';
    }

    .para{
        margin: 0;
        color: var(--black);
        font-size: 1.5vh;
        font-weight: 400;
        font-family: 'Host Grotesk';
    }
 }

@media (min-width: 768px) {
    .title-6xl{
        margin: 0;
        color: var(--white);
        font-size: 5vw;
        font-weight: 400;
        font-family: 'Host Grotesk';
    }

    .title-5xl{
        margin: 0;
        color: var(--black);
        font-size: 3.5vw;
        font-weight: 400;
        font-family: 'Host Grotesk';
    }

    .title-5xlwhite{
        margin: 0;
        color: var(--white);
        font-size: 3.5vw;
        font-weight: 400;
        font-family: 'Host Grotesk';
    }

    .title-4xl{
        margin: 0;
        color: var(--black);
        font-size: 3vw;
        font-weight: 400;
        font-family: 'Host Grotesk';
    }

    .para{
        margin: 0;
        color: var(--black);
        font-size: 1.1vw;
        font-weight: 400;
        font-family: 'Host Grotesk';
    }
}

/* Back button*/

 @media (min-width: 300px) {
    .retourbutton{
    padding : 4vh 3vh 0 3vh;
    display: flex;
    }

    .arrow{
    width: 4vh;
    transform: 0;
    color: var(--black);
    transition: all 300ms ease-in-out;
    }

     .arrow:hover{
    transform: translateX(-10px);
    }
}


@media (min-width: 768px) {
    .retourbutton{
    padding : 1.5vw 6vw 0 6vw;
    display: flex;
    }

    .arrow{
    color: var(--black);
    width: 2.5vw;
    transform: translate(0);
    transition: all 400ms ease-in-out;
    }

    .arrow:hover{
    transform: translateX(-30px);
    }
}

/* display tag */

@media (min-width: 300px) {
    .affichagetag{
        padding: 4vh 3vh;
        display: flex;
        flex-direction: row;
        gap: 3vw;
    }

    .tag{
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--blue);
        padding: 1vh 1vh;
        border-radius: 1vw;
        color: var(--white);
        font-size: 1.5vh;
        font-weight: 400;
        font-family: 'Geist mono';
    }
}


@media (min-width: 768px) {
    .affichagetag{
        padding: 1.5vw 6vw;
        display: flex;
        flex-direction: row;
        gap: 3vw;
    }

    .tag{
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--blue);
        padding: 1.2vh 1.2vh;
        border-radius: 0.5vw;
        color: var(--white);
        font-size: 1vw;
        font-weight: 400;
        font-family: 'Geist mono';
    }
}

/* media + title + objectifs */

@media (min-width: 300px) {
    .media-title{
        padding: 2vh 3vh;
        display: flex;
        flex-direction: column;
        gap: 2vh;
    }

    .imgexplo{
        width: 100%;
        height: 80vh;
        object-fit: cover;
    }

    .videoexplo{
        width: 100%;
        height: 50vh;
        object-fit: cover;
        border: none;
    }

    .objectif{
        font-family: 'Host Grotesk';
        font-weight: 400;
        font-style: italic;
        font-size: 2vh;
        color: var(--black);
    }
}

@media (min-width: 768px) {
    .media-title{
        padding: 1.5vw 6vw;
        display: flex;
        flex-direction: column;
        gap: 2vw;
    }

    .imgexplo{
        width: 100%;
        height: 80vh;
        object-fit: cover;
    }

    .videoexplo{
        width: 88vw;
        height: 80vh;
        object-fit: cover;
        border: none;
    }

    .objectif{
        font-family: 'Host Grotesk';
        font-weight: 400;
        font-style: italic;
        font-size: 1vw;
        color: var(--black);
    }
}

/* Double column : Concept + Use */

@media (min-width: 300px) {
    .doublecolumn{
        padding: 2.5vh 3vh;
        display: flex;
        flex-direction: column;
        gap: 5vh;
    }

    .column{
    display: flex;
    width: 100%;
    flex-direction: column;
     gap: 1.2vh;
    }
}

@media (min-width: 768px) {
    .doublecolumn{
        padding: 3vw 6vw;
        display: flex;
        flex-direction: row;
        gap: 5%;
    }

    .column{
    display: flex;
    width: 45%;
    flex-direction: column;
    gap: 2vh;
    }
}

/* Simple column */

@media (min-width: 300px) {
    .simplecolumn{
    padding: 2.5vh 3vh;
    display: flex;
    flex-direction: column;
    gap: 1.2vh;
    }
}

@media (min-width: 768px) {
    .simplecolumn{
    padding: 3vw 6vw;
    display: flex;
    flex-direction: column;
    gap: 2vh;
    }
}