body {
  font-family: "Montserrat-Regular", sans-serif;
}

#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;
}

.bgvid { 
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url('../video/part0_video_bg_poster.png') no-repeat;
  background-size: cover;
}

.bgvid-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  min-height: 100%;
  background-color: rgba(0,0,0,0.5);
}

#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: 5px;
  border-style: solid;
  border-color: #fff;
  border-radius: 10px;
  margin: 16px 8px 0 8px;
  width: 22%;
  height: 0;
  padding: 0 15px 22% 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: 100%;
  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 {
  background-color: rgba(255,255,255,0.6);
  margin: 10vh auto;
  height: 80vh;
}

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

.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-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");
}

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

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

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

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

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