/* body */

body{
background: url('/media/backgrounds/checkbg.png') 0px 0px / 80px;
font-family: pc-9800;
}

::selection {text-shadow: 0 0 2px #edaecb;color:#edaecb}
::-moz-selection {text-shadow: 0 0 2px #edaecb;color:#edaecb}

::-webkit-scrollbar {
width: 6px;
height: 6px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #fff7fa;
-webkit-border-radius: 0ex;
border: 1px dotted #edaecb;
}

/* fonts */

@font-face{
src: url(/fonts/Spirit.ttf);
font-family: 'spirits';
}

@font-face {
src: url(/fonts/pc-9800.ttf);
font-family: 'pc-9800';
}

@font-face {
src: url(/fonts/dingbats.otf);
font-family: 'puf';
}

@font-face {
src: url(/fonts/JF-Dot-Shinonome14.ttf);
font-family: 'jdot';
}

/* links */

a:link {
color: white;
background-color: transparent;
text-decoration: none;
}

a:visited {
color: white;
background-color: transparent;
text-decoration: none;
}

a:hover {
color: white;
background-color: transparent;
text-decoration: dotted underline;
font-style: italic;
}

a:active {
color: white;
background-color: transparent;
text-decoration: none;
}

/* zoom effect */

.zoom {
transition: transform .2s; /* Animation */
}

.zoom:hover {
-ms-transform: scale(1.15); /* IE 9 */
-webkit-transform: scale(1.15); /* Safari 3-8 */
transform: scale(1.15);
}

/* tooltip */

#s-m-t-tooltip {
max-width: 280px;
border-radius: 0px;
margin: 10px;
background-color: white;
border: 7px solid;
border-image: url(/media/borders/pink.png) 5 fill round;
border-image-outset: 2px;
outline: 1px dashed #e1b3c7;
outline-offset: -6px;
border-radius: 4px;
font-family: tahoma;
font-size: 7px;
letter-spacing: 2px;
color: #848484;
position: relative;
z-index: 100000 !important;
pointer-events: none;
padding: 5px;
text-align: center;
}

/* context menu */
* {
margin: 0;
padding: 0;
}

ul {
list-style: none;
}

#context_menu {
background: #FEF8FC;
border: 1px dotted #AAAAAA;
letter-spacing: 1px;
width: 70px;
font-family: Verdana;
font-size: 8px;
position: absolute;
display: none;
z-index: 100000;
}

#context_menu ul li {
padding: 4px;
cursor: url('/media/cursor/hand.gif'), pointer;
z-index: 100000;

}

#context_menu ul li:hover {
background: #FEF8FC;
color: #848484;
z-index: 100000;

}

/* my emojis */

.emoji{
margin-top: 5px;
height: 12px;
width: auto;
overflow-clip-margin: content-box;
overflow: clip;
}

/* pngs */

.chiikawa{
height: 68px;
width: auto;
position: absolute; top: 365px; left: 520px;
z-index: 1000;
filter: drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 0.5px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(1px 1px 0px #0000002d);
}

.dogs{
height: 35px;
width: auto;
position: absolute; top: 65px; right: 55px;
z-index: 1000;
filter: drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 0.5px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(1px 1px 0px #0000002d);
transform: rotate(5deg);
}

.pin{
height: 35px;
width: auto;
position: absolute; top: 15px; left: 280px;
z-index: 1000;
filter: drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 0.5px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(1px 1px 0px #0000002d);
}

.melo-wrap {
position: absolute;
top: 435px;
left: -100px;
width: 170px;
height: auto;
z-index: 10;
}

.melo-wrap::after {
content: "";
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 20px;
background: radial-gradient(
ellipse,
rgba(0, 0, 0, 0.25) 0%,
rgba(0, 0, 0, 0.18) 40%,
rgba(0, 0, 0, 0) 80%
);
filter: blur(6px);
z-index: -1;
pointer-events: none;
}

.png {
width: 170px;
display: block;
transition: .4s;
}

.png:hover {
transform: rotate(-8deg);
}

/* book covers */

#cover {
width: 55px;
float: left;
margin-right: 8px;
margin-bottom: 1px;
}

/* bubble */

#bubble{
width: 200px;
height: 130px;
background: url('/media/graphics/bubble.png') 0px 0px / cover no-repeat;
background-size:60%;
position: absolute; top: 45px; left: -200px;
background-position: center center;
filter: drop-shadow(2px 2px #a3736790);
align-content: center;
justify-content: center;
z-index: 1000;
transition: .4s;
}

#bubble p {
color: #8d7c76;
filter: drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 0.5px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(1px 1px 0px #0000002d);
font-size: 15px;
margin: auto;
font-family: 'spirits';
z-index:1000;
}

#bubble:hover{
transform: rotate(-8deg)
}

/* stars for reviews */

#star{
font-size: 15px;
font-family: puf;
margin-bottom: 5px;
}

/* journal */

.out-journal{
width: 700px;
margin: 0 auto;
margin-top: 60px;
position: relative;
}

.journal{
width: 700px;
margin: 0 auto;
background: url('/media/backgrounds/patterned.png');
border-radius: 10px;
padding: 41px 21px 21px 21px;
box-shadow: -5px -5px 4px inset #00000033, 3px 3px 3px inset #ffffff55;
position: relative;
}

/* for the charms */

.circle{
position: absolute;
top: 0px; right: 0px;
z-index: 10;
pointer-events: none;
}

.circle2{
position: absolute;
top: 0px; left: 3px;
z-index: 10;
pointer-events: none;
}

/* charms */

.pianochan{
width: 164px;
height: 299px;
position: absolute;
top: 20px; right: -90px;
z-index: 30;
transition: .4s;
}

.pianochan:hover{
transform: rotate(1deg)
}

.keychain{
width: 79;
height: 315px;
position: absolute;
top: 20px; left: -55px;
z-index: 30;
transition: .4s;
transform: rotate(4deg)
}

/* left tab */

.tab{
height: 5px;
width: 100px;
background: url('/media/backgrounds/patterned.png');
border-radius: 20% 20% 0px 0px;
box-shadow: 5px 5px 4px inset #00000033, -3px 3px 3px inset #ffffff55;
height: 90px;
position: absolute;
top: 345px; left: -48px;
transform:rotate(-90deg);
overflow: hidden;
transition: .4s;
}

.tab:hover{
top: 345px; left: -60px;
transform:rotate(-90deg);
}

.tab p{
font-family: spirit;
font-size: 17px;
padding: 10px;
letter-spacing: 1px;
text-shadow: -1px 0 #8d7c76, 0 1px #8d7c76, 1px 0 #8d7c76, 0 -1px #8d7c76, 0 0;
color: white;
font-weight: 600;
top:5px;
left: 12px;
transform:rotate(0deg);
position: relative;
z-index: 9999;
}

/* buttons */

.but{
width: 65px;
background: url('/media/backgrounds/patterned.png');
border-radius: 40% 40% 0px 0px;
box-shadow: 5px 5px 4px inset #00000033, -3px 3px 3px inset #ffffff55;
height: 90px;
position: absolute;
top: 355px; right: -78px;
transform:rotate(90deg);
overflow: hidden;
transition: .4s;
}

.but p{
font-family: spirit;
font-size: 17px;
padding: 10px;
letter-spacing: 1px;
text-shadow: -1px 0 #8d7c76, 0 1px #8d7c76, 1px 0 #8d7c76, 0 -1px #8d7c76, 0 0;
color: white;
font-weight: 600;
top:33px;
transform:rotate(-90deg);
position: relative;
z-index: 9999;
}

.but:hover{
top: 340px; right: -92px;
width: 65px;
height: 120px;
}

.but2{
width: 65px;
background: url('/media/backgrounds/patterned.png');
border-radius: 40% 40% 0px 0px;
box-shadow: 5px 5px 4px inset #00000033, -3px 3px 3px inset #ffffff55;
height: 90px;
position: absolute;
top: 435px; right: -78px;
transform:rotate(90deg);
overflow: hidden;
transition: .4s;
}

.but2:hover{
top: 420px; right: -92px;
width: 65px;
height: 120px;
}

.but2 p{
font-family: spirit;
font-size: 17px;
padding: 10px;
letter-spacing: 1px;
text-shadow: -1px 0 #8d7c76, 0 1px #8d7c76, 1px 0 #8d7c76, 0 -1px #8d7c76, 0 0;
color: white;
font-weight: 600;
top:33px;
transform:rotate(-90deg);
position: relative;
z-index: 9999;
}


/* INSIDE the journal */

.text-area{
position: absolute;
top: 0px; left: 58px;
z-index: 40;
}

.text-area h2{
font-family: 'spirit';
display: inline;
font-size: 43px;
font-weight: 600;
color: white;
text-shadow: -1px 0 #8d7c76, 0 1px #8d7c76, 1px 0 #8d7c76, 0 -1px #8d7c76, 0 0;
}

.background{
width: ;
display: flex;
margin: 0 auto;
justify-content: center;
position: relative;
}

.background > div{
width: 48%;
background: url('/media/backgrounds/paperplain.png');
height: 500px;
position: relative;
border: 3px solid white;
box-shadow: 0px 0px 4px inset #00000055, 0px 0px 2px #00000022;
border-image-source: url('/media/borders/babado.png');
border-image-outset: 5px;
border-image-slice: 20;
border-image-width: 6px;
border-image-repeat: round;
position: relative;
}

.hr, .hr-lower{
width: 100%;
height: 30px;
background: url('/images/backgrounds/pattern.jpg');
background-size: 65%;
position: absolute;
left: 0px;
z-index: 10;
mix-blend-mode: multiply;
}

.hr-lower{
bottom: 0px !important;
}

/* spirals in the middle */

.spirals{
height: 480px;
width: 24px;
position: absolute;
top: 10px; right: -19px;
background: url('/media/graphics/spirals.png') 0px 0px / cover;
image-rendering: pixelated;
z-index: 1000;
}

.spirals-bg{
height: 480px;
width: 20px;
position: absolute;
top: 10px; right: -20px;
background: url('/media/backgrounds/paperplain.png') 0px 0px / cover;
}

/* aerith + zhixi */

.bg{
width: 100%;
height: 100%;
background: url('/media/graphics/aerith.png') no-repeat;
background-size: contain;
position: relative;
}

.bubble-title {
position: absolute;
top: 74.2%;
left: 12%; 
font-family: spirits;
font-size: 15px;
color: black;
}

.bubble-text {
position: absolute;
top: 80%; 
left: 12%;
width: 80%;
font-family: pc-9800;
font-size: 12px;
color: black;
line-height: 1.3;
}

.bubble-text span {
font-family: spirits;
font-size: 12px;
}

.credits {
position: absolute;
top: 2%; 
width: 80%;
font-family: pc-9800;
font-size: 10px;
color: black;
line-height: 1.3;
z-index:1000;
}

.credits a {
font-family: pc-9800;
font-size: 10px;
color: black;
line-height: 1.3;
z-index: 10000;
}

.bg2{
width: 100%;
height: 100%;
background: url('/media/graphics/zhixis.png') no-repeat;
position: absolute;
}

/* journal logs */

.log{
width: 90%;
height: 480px;
margin: 0 auto;
position: relative;
margin-top: 15px;
overflow-y: scroll;
}

.log::-webkit-scrollbar {
display: none;
}

.log > div{
width: auto;
background: url('/media/graphics/dots.png') 0px 0px / 10px;
margin: 10px;
padding: 5px;
border-radius: 10px;
background: radial-gradient(white,#FFEEF5);
border: 3px solid #FFF;
box-shadow: 0px 0px 3px inset #fff, 0px 0px 3px inset #fff, 0px 0px 3px inset #fff, 0px 0px 3px inset #FFDAE8, 0px 1px 3px #00000055;
position: relative;
overflow: hidden;
}

.date{
background: none;
border-bottom: 1px dashed hotpink;
padding: 2px;
width: 95%;
}

.log-date{
font-family: jdot;
color: #8d7c76;
font-size: 11px;
font-weight: bold;
letter-spacing: 2px;
display: inline;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white, 0 0;
}

.mood{
color: #8d7c76;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white, 0 0;
font-family: spirits;
font-size: 14px;
}

.log-yaps{
font-family: pc-9800;
font-size: 13px;
padding: 10px;
letter-spacing: 1px;
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0;
color: #786760;
}

.log-yaps a{
font-family: spirits;
color: hotpink;
}

/* side bows */

.bows{
position: absolute;
width: 11px;
min-height: 9000px;
background: url('/media/graphics/bows.png') 0px 0px / contain;
top: 0px; right: 0px;
mix-blend-mode: multiply;
opacity: .4;
}

/* spinning heart */

.date img{
margin-left: 5px;
margin-right: 2px;
height: 14px;
margin-bottom: -1px;
}

/* footer */

.bottom-area, .footer{
background: none !important;
border: none !important;
box-shadow: none !important;
font-family: arial;
font-size: 12px;
font-weight: 600;
color: #8d7c76;
}

.bottom-area a, .footer a{
color: #FF91BD;
text-shadow: none;
}

.footer{
width: 700px;
margin: 0 auto;
text-align: center;
font-family: arial;
font-weight: 600;
font-size: 13px;
padding: 10px;
}