* {
  box-sizing: border-box;

  margin: 0;

  padding: 0;

  border: none;
}

h1 {
  font-family: "Poppins";

  font-weight: 400;

  font-size: 24px;
}

p {
  font-family: "Poppins";

  font-size: 18px;

  font-weight: 400;
}

body {
  background-color: #f3eddd;
}

.modalHeaderTitle ul {
  list-style: none;

  padding-left: 0;

  font-family: "Poppins";

  font-size: 16px;

  font-weight: 400;
}

​

/* header */

.headerContainer {
  display: flex;

  text-align: center;

  justify-content: center;
}

.headerImg {
  margin: auto;

  width: 90%;

  text-align: centre;

  display: block;

  border-style: solid;

  border-color: black;

  border-width: 2px;
}

.headerContainer::after {
  content: "";

  clear: both;

  display: block;
}

.headerTitle {
  font-family: "Abril Fatface";

  font-size: 70px;

  color: black;

  text-align: left;

  text-indent: 80px;

  padding-top: 50px;
}

.photoRow {
  display: flex;

  justify-content: space-evenly;

  flex-direction: row;

  padding-top: 20px;

  padding-bottom: 20px;

  padding-left: 0px;

  padding-right: 0px;

  flex-wrap: wrap;

  background-color: #ad623d;
}

.modalButton {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background: #f3eddd;

  border-width: 3px;

  overflow: hidden;

  padding: 10px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.photoImage {
  height: 230px;

  width: 230px;

  object-fit: cover;
}

.modalButton:hover {
  transform: scale(1.1);

  box-shadow: 0 4px 8px 0 rgba(76, 74, 74, 0.1);
}

.photoName {
  color: black;

  background-color: #f3eddd;

  width: 100%;

  height: 100%;
}

.photoName h3 {
  padding-top: 2px;

  font-family: "Bakbak One";

  font-weight: 400;

  font-size: 20px;

  color: #292c2f;
}

.photoName p {
  padding-top: 2px;

  color: #292c2f;

  font-family: "Poppins";

  font-weight: 400;
}

.modalContainer {
  display: none;

  position: fixed;

  z-index: 1;

  left: 0;

  top: 0;

  height: 100%;

  width: 100%;

  overflow: auto;

  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #f3eddd;

  margin: 20% auto;

  padding: 20px;

  width: 50%;

  border-style: solid;

  border-color: black;

  border-width: 2px;

  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px, 20px, 0 rgba(0, 0, 0, 0.17);

  text-align: left;
}

.modalHeader {
  display: flex;

  flex-direction: row;

  border-color: black;
}

.modalHeaderImg {
  height: 300px;

  width: 300px;

  padding: 0px;

  margin-right: 20px;

  margin-bottom: 20px;

  object-fit: cover;

  border-style: solid;

  border-color: black;

  border-width: 2px;

  vertical-align: bottom;
}

.modalHeaderTitle h1 {
  font-family: "Bakbak One";

  font-size: 40px;

  font-weight: 400;
}

.closeBtn {
  color: #ccc;

  position: absolute;

  right: 5px;

  top: 0;

  font-size: 50px;
}

.closeBtn:hover,
.closeBtn:focus {
  color: black;

  text-decoration: none;

  cursor: pointer;
}