@font-face {
    font-family: "caviar";
    src: url("./caviar.ttf");
}
@font-face {
    font-family: "caviar gras";
    src: url("./caviarB.ttf");
}

* {
  margin : 0;
  padding : 0;
  box-sizing : border-box;
  font-family : "caviar";
}
      
       
      #message-header {
        height: 10vh;
        background-color: #e4e4e4;
      }

      #logo {
        aspect-ratio: 1;
        max-height: 80%;
      }

      .img-logo {
        max-height: 70%;
      }

      #maison {
        height: 10vh;
        aspect-ratio: 1;
        max-height: 90%;
      }

      .img-maison {
        max-height: 70%;
        margin-left: 290%;
       }

      #Rectangleo {
        aspect-ratio: 1;
        max-height: 90%;
        position: absolute;
        height: 100px;
        width: 400vh;
        left: 0%;
        top: 150px;
        background: #fd7e14; 
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25)inset;
        border-radius: 20px;
      }

      .fléche {
        aspect-ratio: 1;
        margin-top: auto;
        top: auto;
      }
      .clé {
        height: 10vh;
        aspect-ratio: 1;
        max-height: 90%;
      }

      .img-clé {
        max-height: 70%;
        margin-left: 290%;
       }

      .rec-ora {
        background-color: #fd7e14;
      }

      #Rectangleb {
        aspect-ratio: 1;
        max-height: 90%;
        position: absolute;
        height: 60px;
        width: 400vh;
        left: 0px;
        top: 270px;
        background: #FFFFFF;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25) inset;
        border-radius: 20px 20px 20px 0px;
      }
  

      #Rectanglema {
        aspect-ratio: 1;
        max-height: 90%;
        position: absolute;
        width: 400vh;
        height: 70px;
        left: 0px;
        top: 350px;
        background: linear-gradient(180deg, #DB488D 0%, #E5884A 100%);
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25) inset;
        border-radius: 20px 20px 0px 20px;
      }
  

      .rec-mau {
        background: linear-gradient(180deg, #DB488D 0%, #E5884A 100%);
      }


      #Rectangleb2 {
        aspect-ratio: 1;
        max-height: 90%;
        position: absolute;
        width: 400vh;
        height: 70px;
        left: 0px;
        top: 430px;       
        background: #FFFFFF;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25)inset;
        border-radius: 20px 20px 20px 0px;
      }
  

     
      .message {
        min-height: 10vh;
        border-radius: 15px;
        box-shadow: 2px 2px 5px 0;
      
      }

      .input{
        top: 115%;
        width: 60%;
        position: absolute;
        left: 20%;
      }


  .col-size {
    width: 15vw;
    aspect-ratio: 5/3;
    background-color: #fff;
    box-shadow: inset rgb(93, 93, 93) 0 3px 5px 0, rgb(93, 93, 93) 0px 5px 7px 0;
    border-radius: 10px ;

  }

  .pdp-profil {
    width:35vw;
    aspect-ratio: 1;
    background-image: url('../asset/pdp/pdp-thomas.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #fff;
    box-shadow: inset rgb(93, 93, 93) 0 3px 5px 0, rgb(93, 93, 93) 0px 5px 7px 0;
    border-radius: 10px ;

  }

  .espace-emoji {
    
    aspect-ratio: 1;
    background-color: #fff;
    box-shadow: inset rgb(93, 93, 93) 0 3px 5px 0, rgb(93, 93, 93) 0px 5px 7px 0;
    border-radius: 10px ;
    background-image: url('../asset/emoji/emoji-langue.png');
    background-size: cover;
    background-repeat: no-repeat;
  }

  
  .barre-emoji {
    
    aspect-ratio: 6/1;
    background-color: #fff;
    box-shadow: inset rgb(93, 93, 93) 0 3px 5px 0, rgb(93, 93, 93) 0px 5px 7px 0;
    border-radius: 10px ;

  }

  .caree-connexion {
    
    aspect-ratio: 5/3;
    background-color: #fff;
    box-shadow: inset rgb(93, 93, 93) 0 3px 5px 0, rgb(93, 93, 93) 0px 5px 7px 0;
    border-radius: 10px ;

  }

  .caree-reseaux {
    width: 30w;
    aspect-ratio: 5/3;
    background-color: #fff;
    box-shadow: inset rgb(93, 93, 93) 0 3px 5px 0, rgb(93, 93, 93) 0px 5px 7px 0;
    border-radius: 10px ;

  }


  .lineaire-simple {
    background: linear-gradient(#E5884A, #DB488D);
  }

  body {
    min-height: 100vh;
  }

  #langue {
    opacity: 50%;
  }

  .logo-adjust {
    
    aspect-ratio: 1;
  }

 .text-connect{
    text-decoration: none;
    color: black;
  }

  .topnav {
    background-color: #333;
    overflow: hidden;
}

.navbar-expand-lg {
  background-color: #E5884A;
}

.caree-photo{
  aspect-ratio: 1;
  background-color: #fff;
  box-shadow: inset rgb(93, 93, 93) 0 3px 5px 0, rgb(93, 93, 93) 0px 5px 7px 0;
  border-radius: 10px ;

}

.lineaire-create {
  background: linear-gradient(#f3c1a0, #f79dc7);
}

.caree-titre{
  aspect-ratio: 6/1;
  background-color: #fff;
  box-shadow: inset rgb(93, 93, 93) 0 3px 5px 0, rgb(93, 93, 93) 0px 5px 7px 0;
  border-radius: 10px ;

}

.caree-text{
  width: 30w;
  aspect-ratio: 5/3;
  background-color: #fff;
  box-shadow: inset rgb(93, 93, 93) 0 3px 5px 0, rgb(93, 93, 93) 0px 5px 7px 0;
  border-radius: 10px ;
}

     
      
    

      




.scroll-container {
  overflow: auto;
  -webkit-scroll-snap-type: y mandatory;
      -ms-scroll-snap-type: y mandatory;
          scroll-snap-type: y mandatory;
}

article {
    border: 1px dashed #666;
    padding: 20px;
  }