body {
    background-color: #B4C9D9 ;
    background-image: url('https://images.unsplash.com/photo-1705081242921-7ac750a0f8f6?q=80&w=1354&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    background-repeat: no-repeat;
    background-size: cover;
    color: #600B3B;
    border: 1em solid #526675;
    padding: 2em ;
    margin: 1em;
      font-family: "Pompiere", sans-serif;
      font-size: 1.5em;
}

main {
    background-color: #B4C9D9cc;
    width: 80%;
    margin: auto;
}

}

img {
    border: .3em solid #0b0b4a;
    border-radius: 2em;
}
h1 {
      font-family: "Snowburst One", system-ui;
      font-size: 2.5em;
      background-image: linear-gradient(to bottom right, #8195bf, #d9b4c0, #c0d9b4, #b4c0d9);
      text-shadow: 3px 3px 2px white;

}

a{
    color:#660058 ;
}

.container {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-wrap: wrap;

}

.box {
  /* PLAY WITH THE FLEX-BASIS TO SET THE SIZE OF THE BOXES - DON'T GO OVER 45% */
  flex-basis: 35%;
  margin: .5em;
  border-radius: 10px;
  padding: 1em;
}

/* SETTING THE IMAGE WIDTH HERE INSTEAD OF IN HTML. REMOVE WIDTH="XXX%" FROM THE HTML IMAGE TAGS */
.box img {
  max-width: 90%;
  display: block;
  margin: auto;
}

/* WIGGLE */
/* Create the animation... */
@keyframes wiggling {
   0%,
   7% {
      transform: rotateZ(0);
   }
   15% {
      transform: rotateZ(-15deg);
   }
   20% {
      transform: rotateZ(10deg);
   }
   25% {
      transform: rotateZ(-10deg);
   }
   30% {
      transform: rotateZ(6deg);
   }
   35% {
      transform: rotateZ(-4deg);
   }
   40%,
   100% {
      transform: rotateZ(0);
   }
}

/* ...and then apply it: */
.wiggle {
   animation-duration: 2s;
   display: inline-block;
   animation-name: wiggling;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
}
/* SLIDE IN FROM LEFT ONCE */
/* Create the animation... */
@keyframes slide-in {
   from {
      transform: translateX(-100%);
   }
   to {
      transform: translateX(0%);
   }
}

/* ...and then apply it: */
.slide_left {
   animation-name: slide-in;
   animation-duration: 1500ms;
   display: inline-block;
}