.card {
  background-color: rebeccapurple;
  color: white;
  text-align: justify;
  text-justify: inter-word;
  padding: 1rem;
  min-height:350px;
  border-style:inset;
  border-width:4px;
  border-color:silver;
  border-radius:10px;
  margin:5px;

}


 .card:hover {
  box-shadow: 10px 10px 20px rgba(165, 155, 155, 0.5);
  transition-delay: 0.3s;
 }

   .card:nth-child(1) {
     --background-color: #5f5a6496;
  background-color: var(--background-color);
  color: contrast-color(var(--background-color));

 
        }

    .card:nth-child(2) {
  --background-color: #513c56;
  background-color: var(--background-color);
  color: contrast-color(var(--background-color));
   
        }
        
  .card:nth-child(3) {
   --background-color: #543c71;
  background-color: var(--background-color);
  color: contrast-color(var(--background-color));
        }

  .card:nth-child(4) {
   --background-color: #534b57;
  background-color: var(--background-color);
  color: contrast-color(var(--background-color));
        }

 .card:nth-child(5) {
   --background-color: #184b72;
  background-color: var(--background-color);
  color: contrast-color(var(--background-color));
        }

 .card:nth-child(6) {
   --background-color: #65355fc4;
  background-color: var(--background-color);
  color: contrast-color(var(--background-color));
        }

@keyframes reveal {
  from {
    filter: blur(8px);
  }
  to {
    filter: blur(0);
  }
}
.cards {
 /* border-style:inset;
  border-width:2px;
  border-color:silver;
  border-radius:10px;*/
  /*background-color: #fff;*/
  background-color: transparent;
  max-width: 1350px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  animation: reveal 1.2s ease forwards;
}