/* basic page style */
body {
  font-family: Arial;
  margin: 0;
}

/* flexbox top bar */

.topbar {
  display: flex;                 /* flexbox */
  justify-content: space-between;
  padding: 10px;                 /* padding demo */
  border-bottom: 2px solid black;/* border demo */
}

/* float fish cards */

.row {
  margin: 10px;      /* margin demo */
  padding: 10px;     /* padding demo */
  border: 2px solid black;
}

/* each fish box */
.col {
  float: left;       /* float */
  width: 45%;        /* two per row */
  margin-right: 5%;
}

/* fish images */
.col img {
  width: 100%;
  border: 1px solid black;
}

/* clear floats */
.clear {
  clear: both;
}

/* float DEMO */

.float-demo {
  margin: 10px;
  padding: 10px;
  border: 2px solid black;
}

/* float DEMO */

/* wrapper floats (so text wraps around the whole block) */
.float-media {
  float: left;              /* float left */
  position: relative;       /* for absolute title */
  margin-right: 10px;
}

/* bigger image */
/* FLOAT DEMO */

.float-demo {
  margin: 10px;
  padding: 10px;
  border: 2px solid black;
}

/* image on left */
.float-img {
  float: left;        /* float left */
  width: 220px;       /* bigger image */
  margin: 10px;       /* space around image */
  border: 2px solid black;
}

/* clear float */
.clear {
  clear: both;
}

/* title on top of the image */
.img-title {
  position: absolute;       /* sit on image */
  top: 6px;
  left: 6px;

  background: white;        /* simple background */
  border: 1px solid black;
  padding: 4px 6px;
  font-weight: bold;
  font-size: 16px;
}

/* position DEMO */

.pos-box {
  position: relative;   /* relative parent */
  margin: 10px;
  padding: 10px;
  border: 2px solid black;
}

/* absolute label */
.tag {
  position: absolute;   /* absolute */
  top: 5px;
  right: 5px;
  border: 1px solid black;
  padding: 5px;
}