body {
  font-family: "Montserrat-Regular", sans-serif;
  background-color: #222;
  background-image: url("../img/page-bg.png");
  background-repeat: repeat;
}

#person-info-container {
  display: none;
  z-index: 10003;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

#person-info-container .person-info {
  position: relative;
  width: 60%;
  /*height: 80%;*/
  margin: 5% auto;
  background-color: #fff;
  box-shadow: 1px 1px 2px 0 #000;
}

#person-info-container .person-photo {
  position: absolute;
  height: 100%;
  width: 30%;
  left: 0;
  top: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("../img/person-placeholder.png");
}

#person-info-container .person-name {
  font-family: "Montserrat-Black", sans-serif;
  font-size: 200%;
  margin-top: 0;
}

#person-info-container .person-description {
  width: 60%;
  padding: 3em 2% 2% 34%;
}

#person-info-container .close-button {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #000;
  cursor: pointer;
  font-size: 2em;
}

#person-info-container .close-button:after {
  content: '✖';
}

.person-link {
  text-decoration: none;
  color: inherit;
  border-bottom-style: dashed;
  border-bottom-width: 1px;
}

#content {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

#contents-icon-container {
  z-index: 10002;
  position: fixed;
  right: 15px;
  top: 15px;
  padding: 15px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 2px 2px 0 0;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

#contents-icon-container:hover {
  padding: 20px;
}

#contents-icon {
  width: 20px;
  height: 20px;
  background-image: url("../img/menu-button.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

#parts-list-container {
  display: none;
  z-index: 10000;
}

#parts-list {
  text-align: center;
}

#parts-list > li {
  position: relative;
  display: inline-block;
  border-width: 10px;
  border-style: solid;
  border-color: #fff;
  border-radius: 10px;
  margin: 16px 8px 0 8px;
  width: 22%;
  height: 0;
  padding: 0 15px 40% 15px;
  overflow: hidden;
}

#parts-list > li a {
  display: inline-block;
  position: absolute;
  width: 100%;
  bottom: 15px;
  left: 0;
  color: #fff;
  font-family: "Montserrat-Black", sans-serif;
  cursor: pointer;
  font-size: 3vmin;
  transition: all 0.3s ease-out;
  text-shadow: 2px 2px 1px #000;
}

#parts-list > li:hover a {
  font-size: 6vmin;
  background-color: rgba(0,0,0,0.5);
  padding-top: 150%;
  bottom: 0;
  padding-bottom: 15px;
}

#parts-list .to-part {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;

}

#parts-list > li:hover > .to-part {
  animation: partlinkbgincrease 60s;
}

#parts-list .to-part.one {
  background-image: url("../img/to-part1-square.jpg");
}

#parts-list .to-part.two {
  background-image: url("../img/to-part2-square.jpg");
}

#parts-list .to-part.three {
  background-image: url("../img/to-part3-square.jpg");
}

#parts-list .to-part.four {
  background-image: url("../img/to-part4-square.jpg");
}

#parts-list .to-part.five {
  background-image: url("../img/to-part5-square.jpg");
}

.part-block-container {
  background-color: rgba(255,255,255,0.85);
  width: 80%;
  margin: 3vh auto;
  border-radius: 10px;
}

#part0.part-block-container {
  margin: 10vh auto;
  height: 80vh;
}

.part-block-content {
  width: 90%;
  margin: 0 auto;
  padding: 5vh 0;
}

.part-block-content p {
  font-size: 3vmin;
}

.poem {
  width: 30%;
  margin-left: 70%;
  font-style: italic;
}

.poem.author {
  font-weight: bold;
}

#part0 h1,
#part0 h2 {
  text-align: center;
  margin: 0 auto;
}

#part0 h1 {
  font-size: 5vmin;
  font-family: "Montserrat-Black", sans-serif;
}

#part0 .author {
  font-family: "Montserrat-Black", sans-serif;
  text-align: center;
}

.part-container,
.part-container > .part-background {
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
}

.part-container {
  position: absolute;
}

.part-container > .part-background {
  position: fixed;
  z-index: -1;
  filter: blur(3px);
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}

/*#part1 > .part-background {
  background-image: url("../img/part1-bg.jpg");
}

#part2 > .part-background {
  background-image: url("../img/part2-bg.jpg");
}

#part3 > .part-background {
  background-image: url("../img/part3-bg.jpg");
}*/

@keyframes partlinkbgincrease {
  0% {
    transform: scale(1) rotate(0);
  }

  50% {
    transform: scale(2) rotate(0);
  }

  100% {
    transform: scale(1) rotate(0);
  }
}