body{
    background-color: #E9D0AF;
    color: #463001;
      font-family: "Modak", system-ui;
      font-size: 1.5em;
      border: 1em ridge #c99359;
}


a {
    color: #520040;
}

.tiny {
    font-size: .5em;
}

h1 {
      font-family: "Dancing Script", cursive;
text-align: center;
 background-image: linear-gradient(to bottom right, white, brown);
}


img {
    border: 0.5em ridge #e0b382;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background-image: url('https://images.unsplash.com/photo-1533460004989-cef01064af7e?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
}

.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: 100%;
  display: block;
  margin: auto;
}