/* ------------------------ */
   /* Utility classes                  */
   /* _______________ */

.flex {
   display: flex;
   flex-direction: inline;
   gap:1rem;
}
   /* Make images easier to work with */
   img,
   picture {
    max-width: 100%;
    display: block;   
   }

/*  set up the body */
body {
   margin: 40px 1em;
      color: brown;
   background-color: rgb(var(--clr-green));
   line-height: 1.5;
   min-height: 100vh;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   background-color:burlywood;
   color: rgb(85, 54, 54);
}
.image-shadow{
  margin: .3rem 2rem 3rem 2rem;
  border-radius: 20px 20px;
  box-shadow: 10px 10px 16px rgb(9, 8, 8);

}
.image-button {
display: inline;
  margin: .5rem 2rem .5rem 2rem;
  border-radius: 10px 10px;
  box-shadow: 10px 10px 16px rgb(9, 8, 8);
  transition-duration: 300ms;
  transition-property: transform;
  max-width: 150px;

}