/* 
**   MYSTERY JOURNAL 
*/
@import url("fonts.css");

.notSelectable {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mystery-journal-parent {
  position: absolute;
  top: -2%;
  bottom: -2%;
  left: 0px;
  width: 100%;
  height: 104%;
  z-index: 2;
  background-image: url("../images/MysteryJournal_bookbg.webp");
  background-repeat: no-repeat;
  background-size: 100% 108%;
  margin: 0px;
  padding: 0px;
  visibility: hidden;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mystery-journal-cover {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  background-image: url("../images/MysteryJournal_bookcover.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0px;
  padding: 0px;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#mystery-journal-page-main-menu-pages {
  position: absolute;
  top: 3%;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-image: url("../images/MysteryJournal_pages_mainmenu3.webp");
  background-repeat: no-repeat;
  background-size: 100% 90%;
  margin: 0px;
  padding: 0px;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#mystery-journal-title {
  position: absolute;
  top: 7%;
  left: 50%;
  width: 90%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-family: AveriaSerifLibre-Italic;
  font-size: clamp(44px, 8vw, 128px);
  /* font-style: italic; */
  text-align: center;
  pointer-events: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


#mystery-journal-subtitle {
  position: absolute;
  top: 14%;
  left: 50%;
  width: 90%;
  -ms-tansform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-family: AvenirLTStd-Roman;
  text-align: center;
  justify-content: left;
  font-size: clamp(15px, 3vw, 32px);
  pointer-events: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mystery-journal-character-row {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: clamp(340px, 82vw, 540px);
  height: auto;
  aspect-ratio: 1018/378;
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 2;
}

#mystery-journal-character-row-1 {
  top: 29%;
  background-image: url("../images/MysteryJournal_Ghost_Timothy.webp");
}

#mystery-journal-character-row-2 {
  top: 48%;
  background-image: url("../images/MysteryJournal_Ghost_Mary_hidden.webp");
}

#mystery-journal-character-row-3 {
  top: 67%;
  background-image: url("../images/MysteryJournal_Ghost_Bridget_hidden.webp");
}

.character-row-name {
  position: absolute;
  top: 30%;
  left: 66%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 20%;
  width: 60%;
  aspect-ratio: 16/9;
  font-family: AvenirLTStd-Roman;
  font-weight: bolder;
  font-size: clamp(18px, 4.4vw, 32px);
  text-align: center;
  pointer-events: none;
  color: white;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.character-row-story-completion {
  position: absolute;
  top: 74%;
  left: 66%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 40%;
  width: auto;
  aspect-ratio: 16/9;
  font-family: AvenirLTStd-Roman;
  font-size: clamp(16px, 3vw, 24px);
  text-wrap: nowrap;
  text-align: center;
  pointer-events: none;
  color: white;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.character-row-checkmark {
  position: absolute;
  top: 76%;
  left: 55%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 9%;
  height: auto;
  aspect-ratio: 128/128;
  background-image: url("../images/Icon_checkmark.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  pointer-events: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  visibility: hidden;
}

.character-row-progress {
  position: absolute;
  top: 90%;
  left: 66%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 40%;
  width: auto;
  aspect-ratio: 16/9;
  font-family: AvenirLTStd-Roman;
  font-weight: bolder;
  font-size: clamp(16px, 3vw, 24px);
  text-align: center;
  text-wrap: nowrap;
  pointer-events: none;
  color: white;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#mystery-journal-main-back-button {
  position: absolute;
  top: 82.4vh;
  left: 50vw;
  width: 80px;
  height: 80px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-image: url("../images/Button_Circle_Purple.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: transparent;
  background-position: center;
  background-attachment: fixed;
  outline: none;
  border: none;
  border-color: transparent;
  color: white;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#mystery-journal-character-info-pages {
  position: absolute;
  top: 3%;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-image: url("../images/MysteryJournal_pages_ghostdata3.webp");
  background-repeat: no-repeat;
  background-size: 100% 90%;
  margin: 0px;
  padding: 0px;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#mystery-journal-character-back-button {
  position: absolute;
  top: 82.4vh;
  left: 50%;
  width: 80px;
  height: 80px;
  z-index: 4;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-image: url("../images/Button_Circle_Purple.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: transparent;
  background-position: center;
  background-attachment: fixed;
  outline: none;
  border: none;
  border-color: transparent;
  color: white;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mystery-journal-character-back-button-icon {
  position: absolute;
  top: 12%;
  left: 23.5%;
  width: 50%;
  height: 46%;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mystery-journal-character-back-button-text {
  position: absolute;
  top: 80%;
  left: 50%;
  width: 50%;
  height: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  font-family: AvenirLTStd-Book;
  font-size: 14px;
  text-align: center;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.character-info-portrait-icon {
  position: absolute;
  top: 15.6%;
  left: 50%;
  width: clamp(170px, 32vw, 240px);
  height: auto;
  aspect-ratio: 1;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-image: url("../images/Bookcircleempty.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#character-info-progress-checkmark {
  visibility: hidden;
  position: absolute;
  top: 26%;
  right: 16%;
  width: 54px;
  height: 54px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-image: url("../images/Icon_checkmark.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#character-info-progress {
  position: absolute;
  top: 26%;
  right: clamp(4%, 64px, 6%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  font-family: AvenirLTStd-Roman;
  font-weight: bolder;
  font-size: 30px;
  text-align: right;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#character-info-about-text {
  position: absolute;
  top: 31.3%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-family: AveriaSerifLibre-Italic;
  font-size: 32px;
  text-align: center;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#character-info-about-image {
  position: absolute;
  top: 31.3%;
  left: 50%;
  width: 86%;
  height: auto;
  aspect-ratio: 767/28;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 5;
  background-image: url('../images/Divider_nocircle_Brown.webp');
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: transparent;
  background-position: center;
  background-attachment: fixed;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#character-info-name-title {
  position: absolute;
  top: 34.6%;
  left: 5%;
  font-size: clamp(16px, 4vw, 24px);
}

#character-info-age-title {
  position: absolute;
  top: 38.6%;
  left: 5%;
  font-size: clamp(16px, 4vw, 24px);
}

.character-info-bullet {
  position: absolute;
  left: 8%;
  width: 24px;
  height: auto;
  aspect-ratio: 32/32;
  z-index: 3;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-image: url('../images/MysteryJournal_bullet.webp');
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: transparent;
  background-position: center;
  background-attachment: fixed;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.character-info-titles {
  position: absolute;
  left: 5%;
  font-size: clamp(16px, 4vw, 24px);
  font-family: AveriaSerifLibre-Bold;
}

.character-info-text {
  position: absolute;
  top: 0%;
  left: clamp(40px, 112%, 196px);
  font-size: clamp(16px, 4vw, 24px);
  font-family: AveriaSerifLibre-Bold;
  text-align: left;
  text-wrap: nowrap;
}

.character-info-text-no-subject-line {
  position: absolute;
  top: 5%;
  left: 0%;
  font-size: clamp(16px, 4vw, 24px);
  font-family: AveriaSerifLibre-Bold;
  text-align: left;
  text-wrap: nowrap;
}

#character-info-died-title {
  top: 42.3%;
}

#character-info-cause-title {
  top: 46.1%;
}

#character-info-hobby-title {
  top: 49.9%;
}

#character-info-home-title {
  top: 53.6%;
}

#character-info-family-1-title {
  top: 57.3%;
}

#character-info-family-2-title {
  top: 61.0%;
}

#character-info-family-3-title {
  top: 64.7%;
}

#character-info-family-4-title {
  top: 68.4%;
}

#character-info-family-5-title {
  top: 72.1%;
}

.character-info-line {
  position: absolute;
  left: 48%;
  width: 90%;
  aspect-ratio: 1054/3;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-image: url('../images/MysteryJournal_pageline.webp');
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: transparent;
  background-position: center;
  background-attachment: fixed;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 3;
}

#character-info-line-01 {
  top: 67.4%;
}

#character-info-line-02 {
  top: 71.1%;
}

#character-info-line-03 {
  top: 74.8%;
}

#character-info-clue-title {
  position: absolute;
  top: 65.4%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-family: AveriaSerifLibre-Italic;
  font-size: 30px;
  text-align: center;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#character-info-clue-image {
  visibility: hidden;
  position: absolute;
  bottom: 0%;
  left: clamp(-120px, -16vw, -64px);
  width: clamp(64px, 24vw, 148px);
  height: auto;
  aspect-ratio: 1024/1024;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transform: rotate(0.05turn);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}