:root {
  --black: #5b3a53 ;
  --dark:  #a63356 ;
  --med:  #ef5077 ;
  --pink: #FD94BD;
  --gray: #a58292;
  --light:  #fdc6d3  ;
  --lighter: #FFDBEB;
  --white:  #FFF3F4 ;
  --blackrgb: 91, 58, 83, ;
  --darkrgb:  166, 51, 86, ;
  --medrgb:  239, 80, 119, ;
  --lightrgb:  255, 219, 235,  ;
  --whitergb:  255, 232, 225,;
  --cursive: 'nyquil' ;
  --secondaryfont: 'serif, inherit'
}

@font-face {
font-family:'Latin Modern Mono';
src: url('/_parts/fonts/LMM-reg.otf'); }
@font-face {
font-family:'Latin Modern Mono';
font-weight:bold;
src: url('/_parts/fonts/LMM-b.otf'); }
@font-face {
font-family:'Latin Modern Mono';
font-style:italic;
src: url('/_parts/fonts/LMM-i.otf'); }
@font-face {
font-family:'Latin Modern Mono';
font-weight:bold;font-style:italic;
src: url('/_parts/fonts/LMM-bi.otf'); }
@font-face {
font-family:'nyquil';
src: url('/_parts/fonts/NyQuil.ttf'); }
@font-face {
font-family:'connie';
src: url('/_parts/fonts/Connie-LGWE.ttf'); }

/*@font-face {*/
/*font-family: 'Mademoiselle';*/
/*src: url('/_parts/fonts/Mademoiselle.otf'); }*/
/*@font-face {*/
/*font-family:'EmojiFont';*/
/*src: url('/_parts/fonts/EmojiFont.ttf'); }*/
/*@font-face {*/
/*font-family:'Faith Collapsing';*/
/*src: url('/_parts/fonts/FaithCollapsing.ttf'); }*/



* {
  box-sizing: border-box;
  scrollbar-color: var(--med) transparent;
  max-width:100vw;
      cursor:url('/_images/pixels/ghostcursor.png'), auto !important;
}
a:hover, details summary:hover, .hover:hover, a > *:hover, #navimg img:hover {
      cursor:url('/_images/pixels/ghostcursor1.png'), auto !important;
}
body:hover {
    cursor:url('/_images/pixels/ghostcursor.png'), auto !important;
}
body::-webkit-scrollbar-track {
  background-color:var(--light)
}

body::-webkit-scrollbar-thumb {
background-color:var(--med);
outline:1px solid var(--dark)
}

/*url(/_images/backgrounds/lace.png) left repeat-y,*/

body {
  background:url(/_images/backgrounds/dots.gif), url(/_images/backgrounds/typewriter.png) center / contain, var(--light);

  background-attachment: fixed;
  font-family: 'Latin Modern Mono', monospace;
  letter-spacing:-0.3px;
  font-size:15px;
  line-height:1.1em;
  color:black;
  max-width:100vw;
  overflow-x:hidden;
    z-index:0
}
#container {
  width:70%;
  min-width:750px;
  max-width:950px;
  margin:0 auto;
  padding-top:10px;
  position:relative;
    z-index:0
}
main {
  min-height:100vh;
  max-width:100%;
  margin:0 auto;
  position:relative;
  z-index:0

}
img.roof {
  margin:0 auto;
  margin-bottom:-5px;
  max-height:450px;
  width:100%;
}
.house {
  background:url(/_images/home/house/lace.png) top / 80px repeat-x,url(/_images/backgrounds/dots.gif) center / 5px,url(/_images/home/bgflower.png), var(--light);
  color:black;
height:auto;
min-height:200px;
width:88.7%;
margin:0 5.5%;
display:inline-block;
border-radius:0px 0px 5px 5px;
border-bottom:20px var(--med) solid;
border-left:10px #201a0b solid;
border-right:10px #201a0b solid;
padding:25px 3%;
padding-top:40px;
z-index:-5;
position:relative
}


.flex {
  display:flex;
  flex-flow:row wrap;
  max-width:100%;
  justify-content: center;
  align-items: center;
  align-content: center
}
.med, .small, .extra.small, .big {
  position:relative;
  max-width:100%;
}
.min {
  max-width:fit-content;
  width:fit-content;
  padding:10px 20px;
  position:relative;
}
.flex .med {
  flex:2 1 50%
}
.flex .small {
  flex:1 1 45%;
  min-width:200px;
  max-width:100%;
  align-self:center;
}
.flex .extra.small {
  flex:1 3 30%;
  margin:0px;
  padding:10px;
  min-width:150px
}



.flex .big {
  flex:3 0 100%;
}

.flex .bottom {
  align-self:flex-end !important;
  justify-self:flex-end !important;
}
.flex img {
  object-fit:contain;
}

article.note {
  background-color:var(--light);
  width:130px;
  max-width:130px;
  max-height:140px;
  padding:2px;
  text-align:center;
  position:absolute;
bottom:-85px;
right:0;
margin:-30px;
  border-image-outset:0;
  font-size:.9em;
  line-height:1em;
  z-index:1;
  color:black
}
article.pink, #updates article:first-of-type {
  background-color:var(--lighter);
  color:black
}
article.pink a, #updates article:first-of-type a {
  text-decoration-color:var(--white)
}
article.pink b, #updates article:first-of-type b {
  color:var(--black)
}
.center {
  text-align:center
}

article {
  background:url(/_images/backgrounds/dots.png), var(--white);
  color:var(--black);
  border:1px var(--med) solid;
  border-radius:4px;
  padding:10px 20px;
  margin:30px 10px;
  max-width:350px;
  position:relative;
  z-index:10
}

.cursive {
  font-family: var(--cursive);
  font-size:19px;
}
.cursive img {
  max-height:15px
}
.secondary {
  font-family:var(--secondaryfont)
}

hr {
  border:none;
  margin:10px auto;
  height:18px;
  width:226px;
  max-width:100%;
  background-image:url(/_images/site/hr-pinkheart.png);
  background-size:contain;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  mix-blend-mode:multiply;
  display:block;
}
h1 {
  font-family:'connie';
  color:var(--med);
  margin:20px;
}

.titleimg {
  position:absolute;
  z-index:-18;
  height:400px;
  max-height:510px;
  max-width:500px;
  width:400px;
  top:-50px;
  left:-40px;
  transform:rotate(-13deg)
}
.titleimg.doily {
  z-index:-18
}
.titleimg.title {
  z-index:1000
}
.titleimg img {
  position:relative;
  height:100%;
  width:100%;
object-fit:contain
}
.titleimg h1 {
  position:relative;
  line-height:1.3em;
  letter-spacing: .05em;
  margin: 0 auto;
  text-transform:uppercase;
  background: url(/_images/backgrounds/typewriter.png)
		top;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  color:var(--med);
  text-align:center;
  filter:
          drop-shadow(.5px .5px 0 var(--black))
          drop-shadow(-.5px -.5px 0 var(--black))
          drop-shadow(.5px -.5px 0 var(--black))
          drop-shadow(-.5px .5px 0 var(--black))

                  drop-shadow(-1px -1px 0 var(--white))
                  drop-shadow(1px -1px 0 var(--white))
                  drop-shadow(-1px 1px 0 var(--white))
                  drop-shadow(1px 1px 0 var(--white))
                  drop-shadow(-1px -1px 0 var(--white))
                  drop-shadow(1px -1px 0 var(--white))
                  drop-shadow(-1px 1px 0 var(--white))
                  drop-shadow(1px 1px 0 var(--white))
          ;
    left: 15%;
    font-size:36px;
    position:absolute;
    text-align:center;
    top: 28%;
    width: 70%;
    transition:filter .9s ease-out;
}
.titleimg h1:hover {
  transition:filter .9s ease-in;
  filter:
          drop-shadow(1px 1px 0 var(--black))
          drop-shadow(-1px -1px 0 var(--black))
          drop-shadow(1px -1px 0 var(--black))
          drop-shadow(-1px 1px 0 var(--black))

                  drop-shadow(-1px -1px 0 var(--white))
                  drop-shadow(1px -1px 0 var(--white))
                  drop-shadow(-1px 1px 0 var(--white))
                  drop-shadow(1px 1px 0 var(--white))
                  drop-shadow(-1px -1px 0 var(--white))
                  drop-shadow(1px -1px 0 var(--white))
                  drop-shadow(-1px 1px 0 var(--white))
                  drop-shadow(1px 1px 0 var(--white))
          ;
}

a {
  color:var(--med);
  text-decoration:underline wavy var(--light);
  text-decoration-thickness:1.5px;
  padding:1px 3px;
  margin:0px -3px;
}
.smallunderline a {
  text-decoration-thickness:1px;
}
.intro a img {
  display:inline-block;
  height:1em
}
a:hover {
background:transparent;
color:var(--dark);
text-decoration-color:var(--med);
}

b {
  color:var(--med);
  font-size:1.1em;
}

i {
  color:var(--dark)
}

u {
  color:var(--dark);
  font-style:italic;
  text-decoration:underline dashed var(--med);
  text-decoration-skip: none;

}


img {
  max-width:100%;
  position:relative;
}

.shadow {
    filter: drop-shadow(0px 0px 5px rgba(var(--darkrgb) 0.5));
}

.stickers {
  position:absolute;
  max-width:20%;
  height:95%;
  max-height:95%;
  text-align:center;
  display:flex;
  flex-flow:column;
  justify-content: space-between;
  align-items: center;
  align-content: space-between;

}
.stickers.left {
    left:-8%;
    top:140px;
}
.stickers.right {
    right:-8%;
}
.stickers img {
  max-height:200px;
    object-fit: contain;
    position:relative;
      filter: drop-shadow(-2px 5px 5px rgba(var(--darkrgb) 0.7));
    z-index:1;

   }
.stickers img.big {
  max-height:350px;
  margin:-5px;
  max-width:250px;
}
.stickers img.small {
  max-height:160px;
  margin:-40px -50px
}

img.behind, .behind {
  z-index:-10 !important
}
.lefter {
  left:-50px;
}
.leftest {
  left:-100px;
  top:10px
}
.righter {
  right:-30px;
}
.rightest {
  right:-75px;
  bottom:-20px
}

.sticker {
    position:absolute;
}
.sticker.top {
  height:150px;
  width:auto;
  top:-150px;
  right:0px;
  z-index:-1
}
.sticker.rightside {
  height:170px;
  right:-50px;
  bottom:-75px;
  z-index:1
}
img.rightside.bigger {
  height:auto;width:300px;right:-230px;bottom:-20px;
}
img.rightside.big {
  height:400px;width:auto;right:-230px;bottom:-20px;
}

.sticker.leftside {
  height:180px;
  left:-50px;
  bottom:17px;
  z-index:100
}

.sticker.bottom {
  bottom:-10px
}

img.leftside.bigger {
  height:auto;width:300px;left:-130px;bottom:20px;max-width:20vw
}
.sticker.tilted, img.tilted {
  transform:rotate(-10deg)
}
.sticker.small {
  height:120px;
  transform:rotate(8deg)
}

img.tape {
  position:absolute;
  max-height:60px;top:-43px;right:0px;z-index:1;
  filter: drop-shadow(0px 2px 1px rgba(var(--darkrgb) 0.5));
}
img.tape.bottom {
top:95%;z-index:34}
img.tape.small {
  max-height:40px;
  top:-30px;
  left:10px
}
img.tape.leftside {
  left:0px;
}
img.tape.center {
  left: 50%;
  transform: translate(-50%);
}
img.flip {
  transform:rotate(180deg);
}
img.center.flip {
    transform: translate(-50%) rotate(180deg);
}

.hovertilt:hover {
  transform:rotate(-2deg)
}
.hovertiltimg:hover > img {
  transform:rotate(-2deg)
}
.hoverglow img {
  transition:.3s
}
.hoverspin:hover {
  transform:rotate(360deg);
  transition:.7s ease
}
.hoverswing {
    animation-name: swing;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    transform-origin:top center;
}
@keyframes swing {
           20% { transform: rotate(10deg); }
           40% { transform: rotate(-11deg); }
           60% { transform: rotate(5deg); }
           80% { transform: rotate(-6deg); }
           100% { transform: rotate(0deg); }
        }

.slace {
  border-color:transparent;
  border-width: 10px;
border-style: solid;
border-image: url('/_images/home/small-lace-pink.png') 7  round;
border-image-outset:1;
}

.lacehr {
  display:inline-block;
height:50px;width:100%;background:url(/_images/home/widelace.png);background-size:contain;background-repeat:repeat-x
}

article.intro {
  font-size:1.1em;
  margin-bottom:70px !important;
  margin-top:30px !important
}

.buttons img {
  margin:5px;
}
.buttons a:hover {
  filter: drop-shadow(0px 0px 5px rgba(var(--darkrgb) 0.5));
}


/* nav */

#navimg img:hover{
  transform:rotate(6deg)
}

#navimg img:hover, .hoverglow img:hover {
  transition:.2s;
  filter: drop-shadow(0px 0px 5px var(--med));
}
article#homenav {
  flex:1 0 180px;
  padding:5px 10px;
  padding-bottom:0px;
  border:2px var(--med) dashed;
  background:url(/_images/backgrounds/paper/grid.png), var(--light);
}
#homenav h1 {
  position:absolute;
  font-size:35px;
  line-height:1em;
    top:-55px;
  left:-20px;
  /* letter-spacing:.25em */
  width:100%;
  text-align:justify;
  text-align-last:justify;
  text-justify:inter-character
}
#navimg {
  flex:1 10 50px;
  align-self:baseline;
  padding-top:40px
}
#navimg > img {
  max-width:100px
}
#navimg img#navall {
  display:none
}

#navimg {
  text-align:center;
}
#navimg img {
  max-width:90px;
  height:120px;
  object-fit:contain;
  vertical-align:middle;
  margin: 10px auto;
  filter: drop-shadow(0px 0px 2px var(--white));
  position:relative;
}
#nav > div:not(#nav > div.navme, details.return #nav > div) {
  display:none
}
#nav {
  max-height:370px;
  overflow-y:scroll
}

#nav a {
  display:block;
  width:100%;
  max-width:100%;
  word-wrap:break-word;
  break-inside: avoid;
  background:var(--light);
  color:var(--dark);
  text-decoration:none;
  padding:5px;
  text-align:center;
  margin:8px auto
}
#nav a:hover {
  color:var(--lighter);
  background:var(--gray);
  font-style:italic
}
.navcontent img, img.navplaceholderimg {
  max-width:60px;
  display:block;
  margin:15px auto;
}

#nav h4 {
  display:block;
  color:var(--dark);
  font-family:var(--cursive);
  font-size:1.5em;
  text-align:center;
  margin:10px auto;
}
.new::before {
  content:url(/_images/home/mini/sparkles.gif);
  max-height:1em;
  margin-right:.5em;
  vertical-align: middle
}

#s-m-t-tooltip{
	/* basic */

	z-index:10;
	margin:20px -10px 0px 20px;

	padding:4px 10px;
	background:var(--dark);
		border-radius:8px;
	  outline:1px dashed var(--white);
	  outline-offset:4px;
	color:var(--white);
	font-style:italic;
	font-size:.9em;
	box-shadow:3px 3px var(--black);
	max-width:300px;
}

#statuscafe-username a {
  display:none
}
#statuscafe-username, .statuscafe-more {
  display:inline;
  position:absolute;
  background:var(--light);
  color:var(--dark);
  padding:2px 10px;
  font-family: var(--cursive);
}
#statuscafe-username {
  left:0;
  top:5px;
  border-radius:0px 4px 4px 0px;
  max-width:200px;
}
#statuscafe-username::before {
  content:'status '
}
.statuscafe-more {
  right:0;
  bottom:5px;
  border-radius:4px 0px 0px 4px;
    width:150px
}
.navcontainer {

}
.navcontainer.flex {
  flex-flow:row;
  flex:2 1 380px;
  position:relative;
  z-index:20
}
.topflex {
  padding:20px 15%;align-content:space-between;justify-content:space-between;align-items:space-between
}

article.status {
  margin:0px;
  margin-left:-10px;
  max-width:300px !important;
  padding:10px;
  border:2px double white;
  outline:8px dotted white;
  outline-offset:-4px;
  background:url(/_images/backgrounds/cloth/flowerspink.png) top center / 150px
}
article.statusinside {
  margin:0;
  padding:15px;
  min-width:150px;
  color:var(--dark);
  line-height:1em;
  border:dashed var(--med) 1px;
  background:rgba(var(--whitergb) .9);
  position:relative;
}
article.statusinside::after {
  content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: inherit;
    border-top:inherit;
    border-right:inherit;
    border-radius: 2px;
    border-bottom-left-radius: 50%;
    rotate: -135deg;
    position: absolute;
    top: calc(50% - 10px);
    left: -10px;
}
.homesweethome {
  text-align:right;
  z-index:2
}
.homesweethome img {
  margin:20px -20px;
  margin-left:auto !important;
  display:block;

}
.currently {
  line-height:1.5em;
  flex:1 4 200px;
  max-width:350px;
  margin-left:20px;
position:relative;
margin-bottom:40px
}
.currently::before {
  content:" ";
  display:block;
  height:100%;
  width:2px;
  position:absolute;
  top:20px;
  left:1px;
  z-index:-9;
  border-left:var(--med) 30px solid;
  outline:1px solid var(--light);
  outline-offset:-20px
}
.currently .cursive {
  color:var(--med);
  font-size:2em;
  line-height:.2em;
  margin-bottom:-.7em;
  z-index:2;
  position:relative;
  display:block;
}

.currently .cursive img {
  filter:drop-shadow(0px 0px 3px var(--white))
}
.currently u {
  margin-left:40px;
}
.currently span, .nowplaying {
  background:var(--white);
  display:table;
  border:1px var(--lighter) solid;
  border-radius:5px;
  line-height:1em;
  padding:2px 5px;
  width:auto;
  margin:5px;
  z-index:10
}
.currently span:nth-of-type(even), .nowplaying {
  background:var(--lighter);
  border:1px var(--white) solid
}
.currently span:hover {
  background:var(--pink)
}
.currently i {
  font-family: var(--secondaryfont);
  margin:0 .5em
}
.nowplaying i {
  font-family:var(--cursive);
  margin:0 .5em }
.currently span img, .nowplaying img {
  max-height:1em;
  vertical-align:middle;
}
.nowplaying {
  text-transform:lowercase;
  position:absolute;
  bottom:125px;
  right:-20px;
  max-width:300px;
  background:var(--light);
  border-color: var(--pink);
  box-shadow:2px 2px var(--pink)
}
.nowplaying > *, .nowplaying a{
  display:inline;
  text-decoration-color:var(--black);
  text-underline-offset:5px;
}

#updates article {
  margin:5px
}
#updates article h2 {
  display:inline;
  font-size:1.3em;
  padding:0 .5em;
  font-weight:normal;
  font-family:var(--cursive);
  background:var(--pink);
  color:var(--white)
}

#updates.index ul li:first { display:block;}
#updates.index ul { margin:0px auto;padding:0px }
#updates li { list-style:none }
#updates.index details {
  list-style: none;
  display:none;
}
footer {
  font-size:1.3em;
  padding:0.3em 1em;
  font-weight:normal;
  font-family:var(--cursive);
  background:var(--white);
  color:var(--med);
  display:table;
  text-align:center;
  margin:10px auto
}

#introclick {
  color:black;
  text-align:justify;
  font-family:var(--cursive);
  font-size:18px;
  z-index:50
}


/* media queries */

@media screen and (max-width:750px ) {
  #container {
    max-width:100%;
    min-width:100%;
    width:100%;
  }
  .house.flex, .topflex {
    flex-flow:column
  }
  .topflex {
    margin-bottom:-150px
  }

}
@media screen and (max-width:480px ) {
  .stickers img {
    z-index:-100
  }
}