@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100;0,9..144,200;0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;0,9..144,900;1,9..144,100;1,9..144,200;1,9..144,300;1,9..144,400;1,9..144,500;1,9..144,600;1,9..144,700;1,9..144,800;1,9..144,900&display=swap');

:root{
    --orange: #AC500E;
    --background-color: rgb(15, 15, 15);
    --texte-color: white; 
    --font-fraunces: "fraunces";
}

.text {
    font-size: 3rem
}


body{
    background-color: var(--background-color);
    color: var(--texte-color);
    text-align: left;
    font-family: var(--font-fraunces);
    margin: 1rem;
    padding: 0;
}

.animation-texte{
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.txt{
    white-space: nowrap;
    font-size: 2rem;
    animation: scroll 90s linear infinite;
    margin-inline: 0.5rem;
}

@keyframes scroll {
    0%{
        transform: translateX(0%);
    }

    100%{
        transform: translateX(-100%);
    }
}

h1{
    text-align: center;
    font-size: 6rem;
    border-bottom: 0.2rem double var(--texte-color);
    border-top: 0.2rem double var(--texte-color);
    padding:5rem 0rem;
    text-shadow: 0.2rem 0.2rem  var(--orange);
    font-weight: 400;
    font-style: italic;
    margin: 1rem 0;
    
}

h2{
    font-size: 2rem;
    font-weight: 400;
    

}

h3{
    color: var(--orange);
    font-size: 2rem;
    text-align: center;
    
}

.range{
    text-align: center;
    margin: 8rem 0;
}

p{
    font-size: 1rem;
    line-height: 1.5rem;

}

label {
    font:
      1rem 'Fraunces',
  }
  
  input {
    margin: 0.4rem;
  }

.line{
    border-top: 0.1rem solid var(--texte-color);
    margin: 4rem;
}

.shéma-typo{
    text-align: center;
    margin: 4rem 0 4rem 0;
}

img{
    max-width: 80%;
    margin: 4rem 0;
}



.bouton{
    color: var(--texte-color);
    font-weight: 400;
    text-decoration: none;
    text-align: center;
    border: var(--texte-color) 1px solid;
    background-color:var(--orange);
    border-radius: 2rem;
    padding: 0.5rem 3rem;
    font-size: 1.25rem;


}

.bouton-download{
    text-align: center;
    margin: 8rem 0 3rem 0;
}

.bouton:hover{
    background-color:#78390B ;
    box-shadow: 0.25rem 0.25rem #DEDEDE;
    border: 1px #DEDEDE solid; 
}

.style{
    text-align: center;
}

.block-img-softness{
    text-align: center;
    margin: 4rem;
    
}

.block-img{

    margin: 2rem;
    border-radius: 2rem;
    border:var(--texte-color) 2px solid;
}

.block-img:hover{
    box-shadow: 0.25rem 0.25rem #DEDEDE;
    border: 2px #DEDEDE solid;
}

.image-project{
    text-align: center;
}

hr{
    color: var(--texte-color);
    margin: 3rem;
}

.style-orange{
    color: var(--orange);
}

.hover{
    text-align: center;
    font-size: 4rem;
    margin: 5rem 1rem ;
    
}

.hover:hover{
    font-style: italic;
}

.last{
    text-align: center;
    margin: 3rem;
}

.soulignement{
    text-decoration: underline;
    font-weight: 700;
}

ul{
    padding: 0;
    list-style: none;
    text-align: center;
    line-height: 2rem;
    font-size: 2rem;
    
}

li{
    margin: 1rem;
}

.fraunces-italic{
    font-style: italic;
}

.Fraunces-100{
    font-weight: 100;
}
.Fraunces-200{
    font-weight: 200;
}
.Fraunces-300{
    font-weight: 300;
}
.Fraunces-400{
    font-weight: 400;
}
.Fraunces-500{
    font-weight: 500;
}
.Fraunces-600{
    font-weight: 600;
}
.Fraunces-700{
    font-weight: 700;
}
.Fraunces-800{
    font-weight: 800;
}
.Fraunces-900{
    font-weight: 900;
}

@media screen and (min-width: 744px){
    
    h1{
        margin: 1rem 0;
        font-size: 8rem;
        padding: 4rem;
    }

    h2{
        font-size: 3rem;
    }

    h3{
        font-size: 3rem;
    }

    p{
        font-size: 1.25rem;
    }

    .hover{
        font-size: 6rem;
    }

    .bouton{
        font-size: 2rem;
    }

    .bouton-download{
        margin: 10rem 0 5rem 0;
    }

    .content-block-style{
        display: grid;
        grid-template-columns: 1fr 1fr;
        
    }
    
    img{
        max-width: 77%;
    }
   
    
}

@media screen and (min-width: 1440px){
   
    p{
        font-size: 1.5rem;
    }

    .bouton-download{
        margin: 12rem 0 6rem 0;
    }


    .bouton{
        
       
        font-size: 2,75rem;
    
    
    }

    .hover{
        margin: 8rem 4rem;
    }


    ul{
        line-height: 3rem;
        font-size: 3.5rem;
        
    }

    img{
        max-width: 74%;
    }
}