body {
        background-color: #FBB24B;
        color: #19199A;
         font-family: "Delius Swash Caps", cursive;
          font-size: 1.4em;
           text-align: center;
border: 0.3em dashed purple;  
padding: 0.5em;
margin: 1em;
    }
    
    a {
        color: #650627;
    }
    
    .tiny{
        font-size: .75em;
    }
    
    h1 {
         font-family: "Finger Paint", sans-serif;
         font-size: 2.7em;
        text-align: center;
    cursor: zoom-in;

       
        background-image: url('https://images.unsplash.com/photo-1515963665762-77ef90e624fa?q=80&w=1471&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
        text-shadow: 4px 4px 4px black;
              
    }  
    
    img {
     border:0.5em double lightblue;
      border-image: linear-gradient(125deg, red 0%, yellow 25%, green 50%, blue 75%, purple 100%) 1;
    border-width: 8px; 
    }
    
    .container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  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;
  padding: 1em;
  text-align: center;
}

/* 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;
}