@font-face {
  font-family: 'Coolvetica';       /* Nom que tu choisis pour l'utiliser dans CSS */
  src: url('/fonts/AlteHaasGroteskRegular.ttf') format('truetype'); /* Chemin vers le fichier et type */
  font-weight: bold;          
  font-style: normal;           
}



body {
  min-height: 100vh;
  padding-bottom: 30vh;
}


.titre{
    font-family: 'Coolvetica', sans-serif;
    font-size: 4rem;
}

.descriptions {
    font-family: 'Coolvetica', sans-serif;
    font-weight: bold;
    font-size: 1rem;
}

.petit{
    font-family: 'Coolvetica', sans-serif;
    font-size: 0.75rem;
    color: black;
}


.moyen{
  font-family: 'Coolvetica', sans-serif;
  position: fixed;
  font-size: 0.75rem;
  top: 1rem;
  left: 1rem;
  color: black;
  text-decoration: none;
  z-index: 1000;
}


.whatamess1 {
    position: absolute;   
    top: 30%;           
    left: 17%;        
    text-align: left; 
    width : 300px
}

.whatamess1 img {
    width: 100%;
    max-width: 300px; 
}


.whatamess1 p {
    margin-top: 0.625rem;      
    color: #333;        
    font-size: 0.75rem;   
    word-wrap: break-word;  
    width: 100%;           
    box-sizing: border-box;
    font-family: 'Coolvetica', sans-serif; 
}



.whatamess2 {
    position: absolute;   
    top: 20%;           
    right: 12%;        
    text-align: left;      
}

.whatamess2 video {
    width: 100%;
    max-width: 700px;                                     
}



.skybox1 {
    position: absolute;  
    top: 110%;            
    left: 17%;           
    text-align: left;   
}

.skybox1 img {
    width: 100%;
    max-width: 300px;
}

.skybox1 p {
    margin-top:  0.625rem;    
    color: #333;      
    font-size: 0.75rem;   
    font-family: 'Coolvetica', sans-serif;
}


.skybox2 {
    position: absolute;  
    top: 100%;            
    right: 12%;       
    text-align: left;       
}

.skybox2  video {
    width: 100%;
    max-width: 700px;                 
}