/* crt effect */
      .crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 5;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

@keyframes flicker {
  0% {
  opacity: 0.00001;
  }
  5% {
  opacity: 0.00009;
  }
  10% {
  opacity: 0.00004;
  }
  15% {
  opacity: 0.00006;
  }
  20% {
  opacity: 0.00008;
  }
  25% {
  opacity: 0.0006;
  }
  30% {
  opacity: 0.10008;
  }
  35% {
  opacity: 0.10004;
  }
}

.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
    
    
/* basic */
html {
    background: url("images/patch/bggg.jpg");
    background-size: 6px;
    overflow: hidden;
    font-family: 'regular';
    letter-spacing: 0.6px;
    cursor: url("patchicur.png"), auto;
}
@font-face {
  font-family: 'regular';
  src: url("font/Forum-Regular.ttf");
}
 .bg {
    display: none;
    position: fixed;
    top: -5%;
    left: -2%;
    bottom: -5%;
    right: -2%;
    z-index: -2;
    background-size: 10%;
    opacity: 0.7;
    margin: 20px; 
    background-image: url("");
     box-shadow: inset 0 0 65px 40px rgba(17, 11, 23, 0.9), inset 0 0 65px 40px rgba(0, 0, 0, 0.9);
     filter: saturate(150%);
    }
body {
    padding: 0;
    margin: 0;
}
    
.content {
    width: 710px;
    height: 875px;
    margin: 0;
    
    overflow-y: scroll;
    
    z-index: 1;
    position: relative;

    background-color: rgb(183, 162, 184);
    border: 6px #ffe6fb double;
    border-radius: 5px;
    scrollbar-color: #5a5361 #ffe6fb;
    scrollbar-width: thin;
    } 
    #lace {
        position: absolute;
        top: -1px;
        
        background-image: url(images/webmaster/border.png); background-repeat: repeat-x;
        background-position: center;
        
        width: 100%;
        height: 30px;
        z-index: 1;
    }  
::selection {
  background-color: #bfadcc;
    color: #dbdbdb;
    text-shadow: none;
}
.filter {
    filter: sepia(5%)
        grayscale(25%) 
        hue-rotate(-10deg)
        brightness(100%)
        contrast(92%);
}
    
#patch {
  position: absolute;
  bottom: 18px;
  left: 40%;
    
  height: 200px;

}    
    
#book {
    position: absolute;
    left: 48%;
   bottom: 0px;
  }
#book img {
    height: 60px;
    filter: grayscale(50%);
}
    #book li {
        margin: 12px;
        position: relative;
        list-style: none;
        text-shadow: 0 0 5px #d7b0d9;
        color: white;
        
        text-decoration: line-through;
    }
    #book a {
        color: white;
        text-decoration: none;
        text-shadow: 0 0 5px #d7b0d9;
        
        text-decoration: line-through;
    }
    #book li:hover {
        letter-spacing: 3px;
    }
    .title, .num {
        color: #c4b7c3 !important;
    }
    #book .title:hover {
        letter-spacing: 0.6px;
    }
    .outer::before {
        content: '';
        display: block;
        border-bottom: 1px #c4b7c3 dotted;
        width: 40px;
        
        position: absolute;
        left: -45px;
        bottom: 8px;
    }
        .inner::before {
            content: '';
            display: block;
            border-bottom: 1px #c4b7c3 dotted;
            border-left: 1px #c4b7c3 dotted;
            width: 40px;
            height: 28px;
        
            position: absolute;
            left: -45px;
            bottom: 8px;
        }
    #book ul::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 27px;

        height: 250px;
        border-left: 1px dotted #c4b7c3;
    }
    
#navi {
        display: none;
    }
#book:hover #navi {display: block;}
    
    h3 {
        font-family: 'regular';
        margin-left: 25px;
        margin-bottom: -2px;
        color: white;
        text-shadow: -1px -1px 0 #914e78, 0px -1px 0 black, 1px -1px 0 #914e78, -1px 0px 0 black, 1px 0px 0 #914e78, -1px 1px 0 #914e78, 0px 1px 0 black, 1px 2px 0 #914e78;
    }
    
h2 {
    font-family: Times;
    font-style: italic;
    font-weight: normal;
    font-size: 20px;
    color: white;
    text-shadow: -2px -2px 0 #914e78, 0px -2px 0 black, 2px -2px 0 #914e78, -2px 0px 0 black, 2px 0px 0 #914e78, -2px 2px 0 #914e78, 0px 2px 0 black, 2px 2px 0 #914e78;
    text-align: center;
    margin: 5px;
    }
h6 {
    color: #914e78;
    font-weight: normal;
    margin: 0 0 5px 0;
    text-align: center;
    font-size: 11px;
}
    
#datapatch {
    height: 530px;
    width: 100%;
    display: grid;
    grid-template-columns: 300px 1fr;
    margin: 0;
    padding: 30px 0 20px 0;
    background-image: url("images/patch/69f7f41bebfb22fd2efdc416e4cd83790f91766d.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    filter: sepia(5%)
        grayscale(25%) 
        hue-rotate(-10deg)
        brightness(110%)
        contrast(92%);
    z-index: 9;
    position: relative;
    background-color: rgba(183, 162, 184, 0.3);
}
.intro {
    background-image: url("images/patch/bg(1).jpg");
    padding: 0;
    height: 570px;
    margin: 0px 10px 0px 4px;
    text-align: left;
    position: relative;
    border: 3px #ffe6fb double;
}
.intro p {
    color: white;
    text-shadow: -1px -1px 0 #5f5769, 0px -1px 0 #5f5769, 1px -1px 0 #5f5769, -1px 0px 0 #5f5769, 1px 0px 0 #5f5769, -1px 1px 0 #5f5769, 0px 1px 0 #5f5769, 1px 1px 0 #5f5769;
        font-size: 15px;
}
.intro h1 {
    font-family: Times; font-style: italic; font-weight: normal;
    font-size: 27px;
    color: white;
    text-shadow: -2px -2px 0 #914e78, 0px -2px 0 black, 2px -2px 0 #914e78, -2px 0px 0 black, 2px 0px 0 #914e78, -2px 2px 0 #914e78, 0px 2px 0 black, 2px 2px 0 #914e78;
    
    position: relative;
}
.intro h1 span {
    position: absolute;
    top: 0;
    left: 0;
}
.jp {
    opacity: 0;
    font-size: 20px;
    line-height: 40px;
}
.intro h1:hover .en {
    opacity: 0;
}
.intro h1:hover .jp {
    opacity: 1;
}
.alias {
    margin-top: 69px;
}
.data {
    height: 180px;
    width: 370px;
    background-image: url(images/webmaster/intro.png);
    background-repeat: repeat;
    background-size: 60%;
    padding: 0 10px 0 10px;
    margin: 40px 0 0 0;
    border: 4px #73767a groove;
    outline: 1px black solid;
    border-radius: 10px; box-shadow: 3px 3px #625b6b;
    overflow-y: scroll;
    scrollbar-color: #bfabd6 #494d4b;
    scrollbar-width: thin;
}
.data p {
    border-bottom: 1px white dotted;
    text-shadow: -1px -1px 0 black, 0px -1px 0 black, 1px -1px 0 black, -1px 0px 0 black, 1px 0px 0 black, -1px 1px 0 black, 0px 1px 0 black, 1px 1px 0 black;
}
    #closeup {
       display: block;
    position: absolute;
    height: 570px;
    width: 500px;
        
    opacity: 0.3; 
        
    margin-left: 70px;
        
    background-image: url(images/patch/sprite.png);
    background-size: 500px;
    background-position: bottom;
    background-repeat: no-repeat;
    }
    
.top {
    position: relative;
    background-image: url(images/patch/lib1.jpg);
    background-size: contain;
    background-position: bottom;
    height: 60px;
    width: 100%;
    display: block;
    
    border-bottom: 1px #5f5769 ridge;
    filter: grayscale(20%);
    }
    .top div {
        height: 100%;
        width: 100%;
        background-color: rgba(183, 162, 184, 0.7);
    }

    
    
    .text {
        display: grid;
        grid-template-columns: 55% 1fr;
        column-gap: 20px;
        padding: 15px;
        margin-bottom: -10px;
    }  
    .text p {
        margin-left: 10px;
        color: white;
        text-shadow: -1px -1px 0 #5f5769, 0px -1px 0 #5f5769, 1px -1px 0 #5f5769, -1px 0px 0 #5f5769, 1px 0px 0 #5f5769, -1px 1px 0 #5f5769, 0px 1px 0 #5f5769, 1px 1px 0 #5f5769;
        font-size: 15px;
    }
    .text img {
        height: 160px;
        margin: 5px;
        border-width: 7px;
    border-style: solid;
    border-image: url(images/borderimg.png) 6 fill round;
        filter: sepia(5%)
        grayscale(25%) 
        hue-rotate(-10deg)
        brightness(110%)
        contrast(92%);
    }
    #coffee {
        position: relative;
    }
    #coffee:after {
        content: '';
        display: block;
        position: absolute;
        
        bottom: -2px;
        right: 25px;
        height: 60px;
        width: 35px;
        
        background-image: url(images/pixels/coffee.gif);
        background-repeat: no-repeat;
        background-size: contain;
        
    }
    
.magic {
    position: absolute;
    left: 0px;
    bottom: -100px;
        mix-blend-mode: screen;
        height: 320px;
        opacity: 0.5;
    z-index: -1;
        
-webkit-animation: spin 30s linear infinite;
  -moz-animation: spin 30s linear infinite;
  -o-animation: spin 30s linear infinite;
  animation: spin 30s linear infinite;
    }  

.magic2 {
    position: absolute;
    right: 210px;
    top: 80px;
        mix-blend-mode: screen;
        height: 150px;
        opacity: 0.5;
    z-index: 10;
        
-webkit-animation: spin 30s linear infinite;
  -moz-animation: spin 30s linear infinite;
  -o-animation: spin 30s linear infinite;
  animation: spin 30s linear infinite;
    }   
    

 @-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@-moz-keyframes spin {
  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@-o-keyframes spin {
  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
} 

.lace1 {
    background: url("images/pixels/lacewhite.png") repeat-x;
    background-size: 310px;
    height: 30px;
    z-index: 6;
    position: relative;
}
.lace2 {
    height: 23px;
    background-image: url(images/patch/ribbon.png);
    background-size: contain;
    background-repeat: repeat-x;
    margin-top: -6px;
    z-index: 7;
    position: relative;
}

.checklistarea {
    height: 350px;
    margin: -5px 0 0 0;
    
    display: grid;
    grid-template-columns: 450px 1fr;
    
    padding: 8px 0 0px 0;
    z-index: 5;
    position: relative;
    
    background-image: url(images/patch/sheet.png);
    background-color: #ebddeb;
    background-size: cover;
}
.checklistarea table {
    width: 240px;
    max-height: 215px;
    margin: 20px 0px 6px 0px;
    padding: 0;
    border-collapse: collapse;
    
    border: 6px #9a9da1 ridge;
    outline: 1px #554f59 solid;
}
.checklistarea table td, .checklistarea table th {
    display: block;
    margin: 0;
    outline: 1px #554f59 solid;
}
table th {
    background-image: linear-gradient(#bfb7c4, #9d97a1);
}
table td {
    background-image: linear-gradient(#e0dae3, #c5bdc9);
}
table span {
    text-decoration: underline dotted;
    color: #383838;
}
#decotable {
    height: 45px;
    width: 230px;
    
    background-image: url("images/tumblr_inline_n258pmUe5i1qhwjx8.png");
    background-size: 400px;
    border: 5px #9a9da1 ridge;
    outline: 1px #554f59 solid;
}
#decotable img {
    float: right;
    margin: 5px 10px 5px 5px;
}
#decotable p {
    font-size: 11px;
    color: white;
    display: inline-block;
    margin-left: 20%;
    text-shadow: -1px -1px 0 #5f5769, 0px -1px 0 #5f5769, 1px -1px 0 #5f5769, -1px 0px 0 #5f5769, 1px 0px 0 #5f5769, -1px 1px 0 #5f5769, 0px 1px 0 #5f5769, 1px 1px 0 #5f5769;
    
    animation: bounce 0.6s steps(2) infinite alternate;
}
@keyframes bounce {
        from { transform: translateY(0); }

        to { transform: translateY(4px); }
    }

    @media (prefers-reduced-motion: reduce) {
        .animatedBg { animation: none; }
    }

#laying {
    height: 290px;
    margin: 8px;
    border-width: 7px;
    border-style: solid;
    border-image: url(images/borderimg.png) 6 fill round;
}
    
    
/* collection */
    
    #collection p, #collection figure {
        text-align: center;
    }

   figure img {
    max-width: 350px;
    height: 100%;
       border: 2px #645a69 groove;
}
figcaption {
    font-size: 12px;
}
.grid img {
    max-width: 250px;
    height: 100%;
    margin-right: 5px;
}
    
/* page stuff */

.page {
    display: none;
}
.page.active {
    display: block;
}

/* Tooltip */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted #fff5ff;
    line-height: 1em;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  color: #fff;
  text-align: left;
  background-image: linear-gradient(rgba(64, 66, 66, 0.9), rgba(64, 66, 66, 1));
  outline: 1.5px solid black;
  padding: 4px 7px 4px 7px;
  border-radius: 4px;
     line-height: 1.3em;
    text-shadow: -1px -1px 0 black, 0px -1px 0 black, 1px -1px 0 black, -1px 0px 0 black, 1px 0px 0 black, -1px 1px 0 black, 0px 1px 0 black, 1px 1px 0 black;
    border: 2px #73767a groove;

  position: absolute;
  top: 35px;
  left: 50px;
  margin-left: -30px;

  opacity: 0;
  transition: opacity 0.3s;
  z-index: 9999; 
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}