#container{
  margin-top: 3vh;
  display: flex;
  flex-direction: row; /*affichage des div en rangés                    */
  flex-wrap: wrap;    /*permet le retour à la ligne si manque de place */
}

.box{
    display: flex;            /*permet d'utiliser justify-content et align-items */
    justify-content: center; /*aligmenent horizontale centré                    */
    align-items: center;    /*aligmenent verticale centré                      */
    margin: 1.5px;
    width: 230px;
    height: 153px;

    transition: 0.5s; /* regle les effets de transition à 0.2s */
    border: solid 2px rgb(74, 199, 147);
    box-shadow: 5px 5px 2px 0px rgba(70, 70, 70, 0.75);
}
.rectangle{
    display: flex;            /*permet d'utiliser justify-content et align-items */
    justify-content: center; /*aligmenent horizontale centré                    */
    align-items: top;    /*aligmenent verticale haut                      */
    margin: 1.5px;
    width: 230px;
    height: 153px;
}

.dragged{
    opacity: 1;
    border: solid 2px gray;
}

 .dropHover{
  transform: scale(1.3); /* applique un effet zoom de x1.3 */
  border: solid 5px orange;
}

.shake{
  animation: 0.5s shake; /*création personalisée d'une animation nommée shake */
}

@keyframes shake{                  /*detail du contenu de l'animation */
20% {transform: translateX(2px);} /*translateX() permet une translation horizontale, ici 2px à 20% de la durée*/
40% {transform: translateX(-4px);}
60% {transform: translateX(4px);}
80% {transform: translateX(-2px);}
}

.text8 {font-family: Verdana; font-size: 12px; font-weight: bold; color: 666666}
.text9 {font-family: Verdana; font-size: 14px; color: 666666}