/* General styles */
html {
  overflow-x:hidden;
scroll-behavior: auto !important;
}

html, body { overscroll-behavior-y: none; }

body {
 background-color:#000000;
 padding: 20px 20px;
 line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x:hidden;
}


/* Page styling */
.journal-page {
    max-width: 600px;
    width:85vw;
    font-size: 16px;
    background-color: #f5f5f5;
    padding: 70px 30px;
  z-index:1005;
  box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.7);
  visibility:hidden;
  font-family:  "1913_Typewriter", "Special Elite", courier !important;
 font-style: normal;
 font-stretch: normal;
 font-weight: 400;

  position:relative;
}

.journal-page p { padding-bottom:20px; }

p:empty {
 height:20px;
}

.starter-page-divider {
    margin-top:80%; /* Default gap before shrinking */
}

.standard-page-divider {
    margin-top: 40%; /* Default gap before shrinking */
}

.follow-on-page-divider {
    margin-top: -20px;
}

/* Extra padding at the start and end */
.start-padding {
    height: 70vh;
}

 .end-padding {
    height: 80vh;
}

.text {
    display: block;
    margin-bottom: 0em; /* or height: 20px; */
 
text-rendering: optimizeSpeed;
    -webkit-font-smoothing: auto; /* or remove entirely */
    -moz-osx-font-smoothing: auto; /* or remove entirely */
    font-smooth: auto; /* safe no-op */

    
}

.text a { color:#000000;

  text-decoration-style: dashed;
}


.bg, .main_bg {
  background-position:center;
  background-size:cover;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
 opacity:0;
 z-index:1;
}



#bg-holder, #main-bg {
  position:fixed;
  left:0;
  top:0;
 width: 100vw; height: 100vh; overflow: hidden;

}

#main-bg {
 opacity:0;
 visibility:hidden; 
 z-index:1;
}

#bg-holder {
  z-index:2;
}

.tear::after {
  content: "";
  position: absolute;
  top: 100%;
  height: 20px;
  width: 100%;
  left: 0;
  background: url(/xch/images/xch_backgrounds/rip.svg) bottom;
  background-size:100%;
 }
 
.diary-date { position:absolute; right:20px; top:20px; width:80%; text-align:right; }

.poster {
 touch-action: pan-y; 
 cursor: pointer; 
  position:relative;
  background-color: #fff;
  box-shadow: 1px 3px 0px rgba(0,0,0,0.2);
  box-sizing: border-box;
  width:100%;
  height:100%;
  display: inline-block;
  img {
  display: block;
  position: relative;
  width: 100%;
  z-index: 1;
  }
  &:before,
  &:after {
  content: '';
  left: 0;
  position: absolute;
  width: 100%;
  }
  &:before {
  
  }
  &:after {
  background-image: linear-gradient(to right, rgba(255,255,255,0.1) 0.5%, rgba(0,0,0,0.15) 1.2%, transparent 1.2%), linear-gradient(to bottom, rgba(255,255,255,0.1) 0.5%, rgba(0,0,0,0.15) 1.2%, transparent 1.2%), linear-gradient(to bottom, rgba(255,255,255,0.1) 0.5%, rgba(0,0,0,0.15) 1.2%, transparent 1.2%), linear-gradient(265deg, rgba(0,0,0,0.2), transparent 10%), linear-gradient(5deg, rgba(0,0,0,0.2), transparent 15%), linear-gradient(-5deg, rgba(0,0,0,0.1), transparent 10%), linear-gradient(5deg, rgba(0,0,0,0.1), transparent 10%), linear-gradient(-265deg, rgba(0,0,0,0.2), transparent 10%), linear-gradient(-5deg, rgba(0,0,0,0.2), transparent 15%), linear-gradient(266deg, rgba(0,0,0,0.2), transparent 10%);
  background-position: right top, left center, left bottom, left top, left top, right top, left center, right center, right center, left bottom;    
  background-repeat: no-repeat;
  background-size: 50% 100%, 100% 33.3333%, 100% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%;
  height: 100%;
  top: 0;
  z-index: 2;
  }
}

.poster_fade {
  transform: rotate(-0deg);
    -webkit-filter: saturate(70%) contrast(85%);
	filter: saturate(70%) contrast(85%);
}

.poster-holder {
  position:fixed;
  cursor:pointer;
}

.poster-imagex {
 -webkit-filter: grayscale(100%);
-moz-filter:    grayscale(100%);
-ms-filter:     grayscale(100%);
-o-filter:      grayscale(100%);
}


.poster-image {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.poster-image.is-loaded {
  opacity: 1;
}



.journal-bg {  background-position:center; background-size:cover; }

.text { opacity:1;}


.text, .diary-date { font-size:16px; line-height:16px; }

#feedback {
  position:fixed;
  left:40px;
  bottom:40px;
  padding:10px;
  background-color:#ff0000;
  color:#fff;
  font-weight:bold;
  font-family:helvetica;
  z-index:10000000000000000000000000;
display:none;
}


.heart {
    color:#990000;
}

.text {
    /* container */
}


.text-block {
    margin-bottom: 1em;
    line-height: 1.5;
}

.followon.anim-text {
    display: inline;
    margin-top: 1em;
}

.charsClass {
    display: inline-block;
    will-change: opacity, transform; 
}


/* DEBUG: When using  */


.text.debug-anim {
    outline: 2px dashed red;
    padding: 1em;
}

.text.debug-anim .followon.anim-text {
    outline: 2px solid green;
    background: rgba(0, 255, 0, 0.05);
}


#tinted_journal_bg { position:fixed; left:0; top:0; width:100vw; height:100vh; background-color:#000000; opacity:0.5; z-index:999; pointer-events:none; }



@media (max-width: 768px) {
 #vignette { display:none; } 
 
.text, .diary-date { font-size:14px; line-height:14px; } 

.journal-page {

padding: 50px 20px;
}

}



#bg-holder.dim .poster-holder {
  filter: grayscale(80%) brightness(0.7) contrast(1.1);
  transition: filter 0.3s ease;
}

#bg-holder.dim .poster-holder.active  {
  filter: none;
}

.poster-holder {
  cursor: pointer !important; /* always show a pointer hand */
}


.diary-date a {
  text-decoration:none;
  color:#000000;
}