@font-face {
    font-family: "Rubik";
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
    src: url("rubik-light/rubik-italic-variablefontwght.woff2") format(woff2) tech(variations),
         url("rubik-light/rubik-italic-variablefontwght.woff") format(woff) tech(variations),
         url("rubik-light/rubik-italic-variablefontwght.woff2") format("woff2-variations"),
         url("rubik-light/rubik-italic-variablefontwght.woff") format("woff-variations");
}
.rubik {
    font-variation-settings: "wght" var(--rubik-wght, 300);
}@font-face {
    font-family: "Rubik";
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
    src: url("rubik-light/rubik-variablefontwght.woff2") format(woff2) tech(variations),
         url("rubik-light/rubik-variablefontwght.woff") format(woff) tech(variations),
         url("rubik-light/rubik-variablefontwght.woff2") format("woff2-variations"),
         url("rubik-light/rubik-variablefontwght.woff") format("woff-variations");
}
.rubik {
    font-variation-settings: "wght" var(--rubik-wght, 300);
}


body {
    background-color: black;
    margin: 0;
    font-family: "Rubik";
    color: white;
    
}
.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: black;
}

.hero h1 {
   
    font-family: "Rubik";
    font-size: 20rem;
    margin: 0;
    
}
.sous-titre {
    margin-top: 10px;
    font-size: 2rem;
    color: white;
    text-align: center;
}
.historique {
    
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: black;
    padding: 5%;
}
.historique h2 {
    text-align: center;
}

.historique p {
    margin-top: 10px;
    font-size: 2rem;
    color: white;
   
}

.bloc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 70px 10%;
    align-items: center
}


.bloc.inverse {
    flex-direction: row-reverse;
}
.bloc-video video {
    width: 600px;
    max-width: 500px;
    border-radius: 15px;
    display:flex;
    
}
.bloc-texte{
    max-width: 450px;
    text-align: center;
    
}
.bloc-texte h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}
.bloc-texte p {
    font-size: 1.1rem;
    line-height: 1.6;
}


.typos {
    margin: 0%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 50px;
    padding: 50px;
    margin-bottom: 10px;
   
}
.typos p {
    text-align: center;
    margin: 0;
}
.typos a {
    color: white;
}
.mavideo {
    width: 90%;
    padding: 5%;
}
.designers {
    border: 1px dotted white;
    padding: 10px;
    background-color: white;
    margin: 10%;
}
.scroll-images{
    display: flex;
    overflow-y: auto;
    gap: 20px;
}
.card {
    flex-shrink: 0;
    text-align: center;
    background-color: white;
    
}
.card img {
    height: 70vh;
    border-radius: 10px;
}
.card p {
    background-color: black;
}
h3 {
    font-size: 50px;
    text-align: center;
    justify-content: center;
}
h2 {
    font-size: 50px;
}
.scroll-images h3 {
    color: black;
    align-self: center;
}
.contact {
    
    padding: 50px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;

}
.contact img {
    width: 120px;
    height: auto;
}
.contact p {
    text-align: center;
    margin: 0;
}
.propos p {
    margin-top: 10px;
    font-size: 1rem;
    color: white;
}
.propos {
    text-align: center;
    background: black;
    padding: 5%;
}