body #chapter-12 {
  overflow: hidden;
}
body .trifold_letter {
  position: relative;
  margin: 0 auto;
  font-size: 0;
  font-family: Times New Roman;
  width: 600px;
  height: 240px;
  max-width: 80%;
  min-width: 50%;
  transition: 2s;
  transition-delay: 2s;
}
body .trifold_letter:hover {
  height: 600px;
  transition: 2s;
}
#workskin THIS IS THE COVER,
body .letter_cover {
  position: absolute;
  top: -20px;
  left: -20px;
  color: #383C45;
  background: linear-gradient(344deg, rgba(255,254,242,1) 0%, rgba(248,246,224,1) 6%, rgba(244,241,215,1) 37%, rgba(238,235,203,1) 51%, rgba(247,245,222,1) 92%, rgba(255,254,242,1) 100%);
  box-shadow: -2px 1px 5px 1px #00000010, 1px -2px 5px 1px #00000010;
  border: solid #383C4550 1px;
  width: 110%;
  min-height: 240px;
  max-height: 240px;
  transition: 2s;
  transition-delay: 2s;
  z-index: 8;
}
body .letter_cover:hover {
  cursor: wait;
}
body .trifold_letter:hover .letter_cover {
  top: -100px;
  left: 0px;
  background: linear-gradient(344deg, rgba(254,252,231,1) 0%, rgba(251,249,226,1) 6%, rgba(244,241,215,1) 37%, rgba(236,232,195,1) 51%, rgba(249,246,213,1) 92%, rgba(255,253,225,1) 100%);
  transform: rotate(15deg);
  transition: 2s;
  z-index: 0;
}
body .letter_cover_text {
  position: relative;
  margin: 0 auto;
  top: 50px;
  max-width: 33%;
  min-width: 30%;
  font-size: 20px;
  overflow: visible;
}
body .letter_cover_text_top {
  position: absolute;
  top: 10px;
  left: 20px;
  max-width: 33%;
  min-width: 30%;
  font-size: 15px;
  overflow: visible;
}
body .letter_cover_stamp {
  position: absolute;
  top: 20px;
  right: 20px;
  height: 75px;
  width: 80px;
  min-width: 10%;
  max-width: 30%;
  background: #f5f5f5;
  background-image: URL(https://i.pinimg.com/1200x/0f/02/fe/0f02fef4935997d991b2fb9efa751272.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 3px;
  box-shadow: 1px .5px 0px 0px #00000020, 1px .5px 0px 0px white inset;
}
#workskin THIS IS THE LETTER TOP,
body .letter_top {
  position: absolute;
  top: 0;
  left: 0;
  color: #383C45;
  background: linear-gradient(176deg, rgba(255,251,240,1) 0%, rgba(245,235,207,1) 81%, rgba(255,248,228,1) 100%);
  height: 200px;
  max-width: 100%;
  border-left: solid #383C4550 1px;
  border-right: solid #383C4550 1px;
  border-top: solid #383C4550 1px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  box-shadow: -5px -3px 10px 1px #00000010;
  transition: 2s;
  transition-delay: 2s;
  z-index: 7;
}
body .letter_top_text {
  position: relative;
  margin: 0 auto;
  top: 20px;
  height: 170px;
  max-width: 90%;
  font-size: 18px;
  overflow: hidden;
}
body .trifold_letter:hover .letter_top {
  left: -20px;
  transform: skew(5deg);
  transition: 2s;

}
#workskin THIS IS THE LETTER MID,
body .letter_mid {
  position: absolute;
  top: 0;
  left: 0;
  color: #383C45;
  background: linear-gradient(169deg, rgba(214,205,179,1) 0%, rgba(233,224,197,1) 52%, rgba(255,248,229,1) 100%);
  height: 200px;
  max-width: 100%;
  box-shadow: -5px -3px 10px 1px #00000010;
  border-left: solid #383C4550 1px;
  border-right: solid #383C4550 1px;
  transition: 2s;
  transition-delay: 2s;
  z-index: 6;
}
body .letter_mid_text {
  position: relative;
  margin: 0 auto;
  top: -20px;
  max-width: 90%;
  height: 210px;
  font-size: 18px;
  overflow: hidden;
}
body .trifold_letter:hover .letter_mid {
  top: 200px;
  left: -20px;
  transform: skew(-5deg);
  transition: 2s;

}
#workskin THIS IS THE LETTER BOT,
body .letter_bot {
  position: absolute;
  top: 0px;
  left: .1px;
  color: #383C45;
  background: linear-gradient(353deg, rgba(255,251,240,1) 0%, rgba(242,231,201,1) 79%, rgba(255,248,228,1) 100%);
  height: 200px;
  max-width: 100%;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left: solid #383C4550 1px;
  border-right: solid #383C4550 1px;
  border-bottom: solid #383C4550 1px;
  box-shadow: -5px -3px 10px 1px #00000010;
  transition: 2s;
  transition-delay: 2s;
  z-index: 5;
}
body .letter_bot_text {
  position: relative;
  top: -20px;
  margin: 0 auto;
  max-width: 90%;
  height: 160px;
  font-size: 18px;
  overflow: hidden;
}
body .trifold_letter:hover .letter_bot {
  top: 400px;
  left: -20px;
  transition: 2s;
  transform: skew(5deg);
}
#workskin THIS IS THE LETTER SCROLL BAR,
body .letter_bot_text::-webkit-scrollbar,
body .letter_mid_text::-webkit-scrollbar,
body .letter_top_text::-webkit-scrollbar,
body .letter_bot_text2::-webkit-scrollbar,
body .letter_mid_text2::-webkit-scrollbar,
body .letter_top_text2::-webkit-scrollbar {
  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
}
body .letter_bot_text::-webkit-scrollbar:vertical,
body .letter_mid_text::-webkit-scrollbar:vertical,
body .letter_top_text::-webkit-scrollbar:vertical,
body .letter_bot_text2::-webkit-scrollbar:vertical,
body .letter_mid_text2::-webkit-scrollbar:vertical,
body .letter_top_text2::-webkit-scrollbar:vertical {
  width: 8px;
}
body .letter_bot_text::-webkit-scrollbar-thumb,
body .letter_mid_text::-webkit-scrollbar-thumb,
body .letter_top_text::-webkit-scrollbar-thumb,
body .letter_bot_text2::-webkit-scrollbar-thumb,
body .letter_mid_text2::-webkit-scrollbar-thumb,
body .letter_top_text2::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(134,156,149,0) 0%, rgba(187,207,200,1) 48%, rgba(134,156,149,0) 100%);
  border-radius: 8px;
  border: 2px solid #ffffff25;
}
body .letter_bot_text::-webkit-scrollbar-thumb:hover,
body .letter_mid_text::-webkit-scrollbar-thumb:hover,
body .letter_top_text::-webkit-scrollbar-thumb:hover,
body .letter_bot_text2::-webkit-scrollbar-thumb:hover,
body .letter_mid_text2::-webkit-scrollbar-thumb:hover,
body .letter_top_text2::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(134,156,149,0) 0%, rgba(140,154,149,1) 48%, rgba(134,156,149,0) 100%);
  border-radius: 8px;
  border: 2px solid #ffffff25;
}
body .letter_bot_text::-webkit-scrollbar-track,
body .letter_mid_text::-webkit-scrollbar-track,
body .letter_top_text::-webkit-scrollbar-track,
body .letter_bot_text2::-webkit-scrollbar-track,
body .letter_mid_text2::-webkit-scrollbar-track,
body .letter_top_text2::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #ffffff25;
}