@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Platypi:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Scribble&display=swap');
@font-face { 
    font-family: Textedeux;
    src: url("../Assets/font/Homoneta-Italic.woff"), format('woff');
  }

  @font-face { 
    font-family: Texte;
    src: url("../Assets/font/Homoneta-Regular.otf"), format('otf');
  }


:root {
    /* Typo pour le texte courant */
    --font-primary: 'Texte', sans-serif;
    /* Typo pour les titres */
    --font-secondary: "Texte", serif;
    /* Typo pour autres */
    --font-third: "Texte", sans-serif;
}

body {
    font-family: var(--font-secondary);
    font-size: 2.8vw;
}

section.section-3 {
    font-family: Texte; 
    font-style: italic;
    text-decoration: none ;
    font-size: 5vw;
    color: black;
    line-height: 1;
}

section.section-2 {
    top: 10vh;
}

section.section-4 {
    top: 18vh;
}
/* text handling */
.heading {
    position: relative;
    left: 13vw;
    font-family: var(--font-third);
    font-size: 9vw;
    font-style: normal;
    font-weight: normal;
    line-height: 0.8;
    pointer-events: none;
    animation: float 20s ease-in-out infinite;
    margin: 10px;
    color: black;
}

.subtitle {
    position: relative;
    left: 13.7vw;
    font-family: var(--font-third);
    font-style: normal;
    font-weight: normal;
    font-size: 5vw;
    pointer-events: none;
    line-height: 1;
    z-index: 10;
    margin: 10px;

}

.text {
    position: relative;
    top: 20vh;
    left: 13vw;
    max-width: 70%;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    z-index: 0;
    animation: float 5s ease-in-out infinite;
}

.text.active {
    /* transition: transform 1s ease-in-out;  */
    animation-play-state: paused
}


#s4 {
    transform: translate(15%, 100%);
}

#s1 {
    animation: none;
}

footer {
    color: black;
    font-family: var(--font-third);
    filter: none;
}

@keyframes float {
    0% {
        transform: translate(0, 0);
        rotate: -0.5deg;
    }

    25% {
        transform: translate(1px, -6px);
        rotate: 0deg
    }

    50% {
        transform: translate(-1px, 6px);
        rotate: 0.5deg
    }

    75% {
        transform: translate(1px, -6px);
    }

    100% {
        transform: translate(0, 0);
        rotate: -0.5deg
    }

    
}
@media screen and (max-width: 480px) {
    .heading {
        top: 7vh;
        left: 6vw;
        font-size: 15vw ;
        line-height: 1;
    }
    .text {
        font-size: 7vw;
    }
    .subtitle {
        top: 7.2vh;
        left: 6vw;
        font-size: 9vw ;
        margin: 0;
        line-height: 0.1;
        /* margin-top: -2; */
    }

    section.section-3 {
        font-family: Texte; 
        font-style: italic;
        text-decoration: none;
        font-size: 9vw;
        color: black;
        line-height: 1;
    }

}