@import url("heading.css");
@import url("animations.css");
@import url("menu.css");
@import url("copyright.css");

/* General stuff */
body {
  background-color: white;
  text-align: center;
  font-family: 'Assistant', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: black;
  margin: 0;
  padding: 0;
}

/* The gallery is a flex box, with 4 columns */
div.gallery {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;   /* gap at either side of the gallery */
}

/* Create four equal columns that sit next to each other */
div.column {
  flex: 24%;        /* for some reason 25% makes the last column not fit */
  max-width: 25%;
  padding: 0 4px;   /* gap between columns */
}

div.column img {
  margin-top: 8px;  /* vertical gap between pictures */
  vertical-align: middle;
  width: 100%;      /* make the picture fill the 'cell' */
}

/* Smaller screens, make a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  div.column {
    flex: 45%;    /* again, for some reason at 50% it still doesn't fit */
    max-width: 50%;
  }
}

/* Even smaller screens, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  div.column {
    flex: 100%;
    max-width: 100%;
  }
}