/*-=-=-=-=-=-=-=-=-[ BLOG.HTML - BACKDROP ]-=-=-=-=-=-=-=-=-*/

html,
body {
    overflow-x: hidden;
    /* Disable horizontal scrolling */
    margin: 0;
    /* Reset any default margins */
    padding: 0;
    /* Reset any default padding */
}

body {
    overflow-x: hidden;
    /* Prevent horizontal scrolling */
    background-size: cover;
    /* Ensures the background covers the viewport */
    background-position: center;
    /* Center the background image */
}

.backdrop {
    background-image: url(images/window_d_desat.png);
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center;
    image-rendering: pixelated;
}

/*-=-=-=-=-=-=-=-[ BLOG.HTML - ANIMATORS ]-=-=-=-=-=-=-=-*/

#opener {
    background-image: url(images/nb1d.png);

    background-size: cover;
    width: 1000px;
    height: 1000px;
    image-rendering: pixelated;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#pageturner {

    pointer-events: none;
    background-size: cover;
    width: 1064px;
    height: 810px;
    image-rendering: pixelated;
    position: absolute;
    top: 46%;
    left: 52%;
    transform: translate(-50%, -50%);
    z-index: 1;
    

}

/*-=-=-=-=-=-=-=-[ BLOG.HTML - MAIN CONTENT ]-=-=-=-=-=-=-=-*/

.spread {
    display: none;
}


.rightpage {
    position: absolute;
    width: 378px;
    height: 622px;
    right: 116px;
    top: 112px;
}

.rightpage p, .leftpage p {
    margin: 0, 1px, 1px, 21px;
    line-height: 25px;
}

.leftpage .disclaimer {
    text-align: center;
    border-top: double;
    border-bottom: double;
    margin: 5px 0;
    border-width: 7px;
    padding-top:3px;
}

.leftpage {
    position: absolute;
    width: 390px;
    height: 637px;
}

.notebookcontainer {
    margin: 106px auto;
    width: 782px;
    height: 626px;
    font-family: "toshibat300", sans-serif;
    font-size: 26px;
    
}



.notebook {
    display: none;
    background-image: url(images/notebook.png);
    background-size: cover;
    width: 1000px;
    height: 810px;
    image-rendering: pixelated;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.rcornerdetector {
    position: absolute;
    width: 177px;
    height: 136px;
    right: 96px;
    bottom: 73px;
    z-index: 2;

}

.rightpagecorner {
    position: absolute;
    right: 39px;
    bottom: 69px;
    background-image: url(assets/gifs/pageright.gif);

    width: 402px;
    height: 148px;
    z-index: -1;
    display: none;
}

.lcornerDetector {
    position: absolute;
    width: 177px;
    height: 136px;
    left: 92px;
    bottom: 64px;
    z-index: 3;
    
    display:block;
}

.leftpagecorner {
    position: absolute;
    left: 20px;
    bottom: 60px;
    background-image: url(assets/gifs/pageleft.gif);
    transform: rotate(-2deg);

    width: 402px;
    height: 148px;
    z-index: -1;
    display:none;
    
}

/*-=-=-=-=-=-=-=-[ BLOG.HTML - PAGEBYPAGE} ]-=-=-=-=-=-=-=-*/

.date {
    font-family: "pxplusregular", sans-serif;
    font-size: 14px;
    margin-top: 9px;
    margin-bottom: 6px !important;
    margin-right: 20px;
    text-align: right;
    
    
}

.header {
    position: relative;
    max-width: 100%;
    max-height: 118px;
    border: dashed;
    border-width: 2px;
    box-sizing: border-box;
}

.header {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.center-block {
    font-family: "vt323regular", sans-serif;
    margin: 10px auto;
    background-color: rgba(236, 232, 228, 0.75);
    backdrop-filter: contrast(120%);
    max-width: 700px;
    border-style: double;
    box-shadow: 0 0 11px 2px rgba(0, 0, 0, 0.45);
}


.statuspanel {
    width:370px;
    height:125px;
    font-size:22px;
    border-style: solid;
    border-width: 2px;
    border-top: none;
    border-right:none;
    padding:5px;
    font-family:"pxplusregular";
    
    
}


.statuspanel p {
    font-size:17px;
    line-height: 17px; 
    display:inline;
}

.statuses {
    display:inline;
}

.statuspanel .specific {
    font-size:16px;
    
}
.statuspanel img {
    height:13px;
    vertical-align:middle;
    margin-bottom:2px;
    
}

.state{
    border:ridge;
    border-width:2px;
}
.state.tired{
    background-color: rgba(0, 44, 90, 0.21)
}
.state.content{
    background-color:rgba(255, 239, 3, 0.34);
}

.strikethrough {
    text-decoration: line-through;
    text-decoration-thickness: 4px;
}

.strikeout {
    line-height: 1em;
    position: relative;
}

.strikeout::after {
    border-bottom: 0.6em solid black;
    content: "";
    left: 0;
    margin-top: calc(0.125em / 1 * -2.25);
    position: absolute;
    right: 0;
    top: 50%;
}



/*-=-=-=-=-=-=-=-[ "BORROWED" SCANLINE CODE ]-=-=-=-=-=-=-=-*/

/*
      @keyframes ScanlineAnimationLeft {
  	  0% {transform: translateX(0) translateY(0);}100% {transform:translateY(-78px);}
  	  }
      body::before {
          content: "";
          display: block;
          position: fixed;
          left: 0;
          top: 0;
          width: calc(100% + 32px);
          height: calc(100% + 32px);
          background-image: url(assets/images/airplane.png);
          background-position-x: 0;
          background-position-y: 0;
          background-repeat: repeat;
          z-index: 10000000;
          animation: ScanlineAnimationLeft 2s linear infinite;
          animation-name: ScanlineAnimationLeft;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
          pointer-events: none;
          opacity: 1;
      }
      */