body {
  background-image: url("https://imagizer.imageshack.com/img922/2915/62GaHl.gif");
  background-repeat: repeat
  
}
.box04{
  
  width: 750px;
  height: 570px;
background:url(images/pinkstripe.gif);
border-radius:01px;
box-shadow:0 1px 5px #ccc;
box-sizing:border-box;
margin:1em 0;
margin-top: 20px;
   margin-left: auto;
   margin-right: auto;
   position: relative;
   padding: 10px;


}
.box-inner{
background:#fff;
border:1px solid #ccc;
border-radius:5px;

}
.main{
  
 background-color:white;
 width:700px;
 height:500px;
  margin:auto;
 
   position: relative;
   padding: 10px;
   margin-top:10px;
   box-shadow: 0 6px 6px hsl(0deg 0% 0% / 0.3);
}

h1{
    font-family: "Slackey", sans-serif;
  font-size:30pt;
}

p{
  font-size:12pt;
  font-family: "Boogaloo", sans-serif;
}
.topbar{
  width:700px;
  height:150px;
  background-color:#E0A4BA;
  color:white;
  padding:10px;
  box-sizing:border-box;
  line-height:0.4;
}

.orange {
border-width:8px;
border-style:solid;
border-image: url("images/orangelace.png") 6 fill round;
}

.lace {
border-width:8px;
border-style:solid;
border-image: url("images/pinklace.gif") 25 fill round;
}



.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;


}

/* Create four equal columns that sits next to each other */
.column {
  
  flex: 25%;
  max-width: 23%;
  padding: 0 4px;
  object-fit: contain;
}

.column img {
  object-fit: contain;
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
  max-height: 33%;
  border-width:5px;
  border-style:solid;
  border-image: url("images/orangelace.png") 6 fill round;
  }

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}