body {
    background-image:url("https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExaHF5YzJneno1YmY0bzk5bGI0ZmlkNWZpemN6aHNpdWU5Mnk3ZGM0ZiZlcD12MV9naWZzX3NlYXJjaCZjdD1n/aTGwuEFyg6d8c/giphy.gif");
    font-family: "Arial";
}


iframe {
   width:50%;
  height: 500px;
  display: block;
  margin: auto;
}

h1 {
color:white;
padding: 0px 20px 20px 20px;
width: 60%;
margin-left: 20%;
margin-right: 20%;
 text-align: center
}
  
a {
  color:white;
  text-align: center
}


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

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 50%;
  padding: 0 5px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 40%;
}
.column iframe {
   margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

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

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