@font-face {
     font-family: "mom";
     src: url("../_fonts/mom.ttf?#iefix") format("truetype");
}
 @font-face {
     font-family: "WaterResistant";
     src: url("../_fonts/WaterResistant.ttf?#iefix") format("truetype");
}
 :root {
     --header-image: url('https://sadhost.neocities.org/images/layouts/wp.jpeg');
     --body-bg-image: url('https://hillhouse.neocities.org/_images/bg/halloweenbg.png');
     /*--squiggle:url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .5s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");*/
     /*--staticsq:url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift 1000s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23fff1f3' stroke-width='1' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");*/
     --cursor:url("../_images/ghostcursor.png");
     --cursor1:url("../_images/ghostcursor1.png");
    /* colors */
     --textpink: #84313f;
     --bgpink: #fcbfd6;
     --medpink: #fb9ac5;
     --blue: #4540ff;
     --white: #ffe7ee;
}


 body {
     font-family: 'Jetbrains Mono';
     font-size:13px;
     margin: 50px 50px 0px 50px;
     background-size: 100px;
     background-color:var(--medpink);
     color: var(--textpink);
     background-image: var(--body-bg-image);
     background-blend-mode:soft-light;
     text-align:center;
}


body{ cursor:var(--cursor), auto !important;}

 a, a:hover, summary:hover, #nav li:hover {
     cursor:var(--cursor1), auto !important;
}

img {
  max-width:100%;

  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}
 .article, .top{
     background-color: var(--bgpink);
     border-radius:15px;
     padding:10px 10px 10px 10px;
     position:relative;
     border:2px var(--white) solid;
     overflow:hidden;
     margin-bottom:6px;
}

 #main .article {
 padding:10px 30px;}


.article > .article {
  padding:10px 30px;
  border-style:dotted;
}

.article > details summary a {
padding:5px;margin:10px}

.bar {
  background-color:var(--white);
  width:50%;height:20px;box-sizing: border-box;margin:auto;border-radius:15px;border:1px var(--lightpink) solid"
}

.progress {
background-color:var(--blue);height:100%;padding:auto;color:var(--white);margin:0;font-size:.8em;border-radius:15px;line-height:20px;text-align:center;
}

 * {
     box-sizing: border-box;
         -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;
}
 #container {
     max-width: 1000px;
     margin: 0 auto;
}
 #flex {
     display: flex;
}
 #aside {
     width: 250px;
     order: 1;
     margin-right:20px;
}

 #pixnav {
     width: 150px;
     order: 1;
     margin-right:20px;
}
 #nav {
     order:3;
     width:150px;
     margin-left:20px;
     text-align:center;
}


 #nav ul {
     padding:0;
     margin:0;
}
#nav li {
  list-style:none;     padding:0;
       margin:0;
}
 #nav li a {
     width:120px;
     list-style:none;
          border-radius:5px;
     padding:2px 5px;
     border:1px var(--bgpink) solid;
     overflow:hidden;
     margin-bottom:1px;
     letter-spacing:2px;

     list-style:none;
     background-color:var(--white);
     display:inline-block;
     font-weight:bold;
     text-transform:lowercase;
     font-size:.8em;
}
 #nav li a:not(.subli) {
   color:var(--textpink);
}
 #nav li a:hover {
   background-color:var(--medpink);
   background-image:none;
   color:var(--bgpink);
 }


#nav li::before {
    list-style:none;
    content:url(/_images/ghost.png) !important;
  vertical-align:middle;
  display:block;
  position:relative;
  float:left;
  color:var(--white);

  margin-top:2px;
}

#nav li.new a::after {
content:url(/_images/new.gif) !important;
display:inline-block;
margin-left:1em;
}

#nav li.subli a {
color:var(--medpink) !important
}

#nav li.subli a:hover {
color:var(--bgpink) !important;
}
 #main {
     flex: 1;
     order: 2;
}
 .top {
     max-width:900px;
     min-width:100%;
     letter-spacing:.7em;
     text-transform:uppercase;
     font-size:10px;
     margin:0;
     overflow:hidden;
     overflow-wrap:break-word;
     text-align-last:left;
     font-weight:bold;
}
 .topimg {
     background:url(../_images/house.png);
    image-rendering:crisp-edges;
    margin:-10px 50px;
     overflow:hidden;
    height:87px;
}
 #footer {
     width: 100%;     min-height: 40px;
margin: 0 auto;padding:0;
     text-align: center;
          position:relative;
     overflow:hidden;
     line-height:20px;
}

.sidebyside {
display:flex;
}

.sidebyside > .article {
width:50%;
margin:10px;
border:none;}



 .header {
   color:var(--white);
  background-color:#000;
     background:url(data:image/webp;base64,UklGRjAAAABXRUJQVlA4TCQAAAAvA8AAAIVS27ahb3uzOUmSJoqqrOq6P47of8DQdcprYdP8/VY=);
    filter:contrast(10);
    image-rendering:crisp-edges;
    mix-blend-mode:overlay;
    margin-bottom:30px;
    font-family:'WaterResistant';
    font-size:20px;
    word-spacing:6px;
 padding:10px 50px 10px 50px;
    border-bottom:3px var(--white) dotted;
     border-top:3px var(--white) dotted;
     text-shadow:5px 5px 15px #000, -5px -5px 15px #000;

}


  .home .header {
    font-family:'mom';
    font-size:15px;
  }

.home .header:before, .home .header:after {
  content:none;
   var(--white)-space: pre;
  }

 strong, b {
     color: #000;
     font-family: monospace;
}


body#homepage {
background-image:url(https://hillhouse.neocities.org/_images/bg/flowerbg.png) !important;
background-size:auto;
background-color:var(--medpink);
max-width:100%;
overflow:hidden;}



.door {
  position:absolute;
  max-height:562px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;text-align: center;
}

.enter {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -220%);
  width:200px;
  font-size:3em;filter:blur(1px);

}

  .enterdither {
    background:url(data:image/webp;base64,UklGRjAAAABXRUJQVlA4TCQAAAAvA8AAAIVS27ahb3uzOUmSJoqqrOq6P47of8DQdcprYdP8/VY=);
    filter:contrast(20);image-rendering:crisp-edges;mix-blend-mode:overlay;

  }

 /* .door {
     position: absolute;
     text-align: center;
     width:100%;
}
 .enter {
     position: absolute;
     top: 60%;
     left: 50%;
     transform: translate(-50%, -60%);
     width:200px;
     font-size:3em;
} */
 .enter:hover {
     font-style:italic;text-shadow:white -1px -1px 15px,black 40px -1px 15px, black -1px -40px 15px, black 0px 40px 15px, black -40px 1px 15px,white 1px 1px 15px;
}


h1 {
       font-family:'WaterResistant';
     padding:5px;
     text-align:center;
     text-align-last:center;
     font-size:1.5em;
     background-color:var(--white);
     border-bottom:3px #360d1d dotted;
     border-top:3px #360d1d dotted;

}

 h2, #aside summary {
     background-color:var(--white);
     width:100%;
     padding:5px;
     text-align:center;
     text-align-last:center;
     font-size:1.3em;
     text-transform:uppercase;
     border-bottom:3px #360d1d dotted;
     border-top:3px #360d1d dotted;
     font-family:'WaterResistant';
}
 h2 {
     color:#360d1d;
}
 #aside h2, #aside summary {
     width:250px;
     margin-left:-10px;
          margin-top:-5px;
     overflow:hidden;
}

#nav h2 {
  width:150px;
     margin-left:-10px;
     margin-top:-5px;
     overflow:hidden;
}

h3 {
padding:4px 8px;
background-color:var(--white);
font-size:10px;
font-weight:bold;
letter-spacing:3px;
display:inline-block;
margin-bottom:5px;}

 hr {
     border:none;
     border-top:10px dotted var(--white) ;
     margin:20px;
}
 #nav a {
     background-color:transparent;
     background-image:none;
}
 a {
     text-decoration:none;
}


.poetry {
  background-color:var(--white);display:inline-block;margin-left:2px;color:black;margin-bottom:5px;
  box-shadow: 5px 5px 5px -3px rgba(171,150,150,0.8);
  padding:1px;
}

#statuscafe {
  background-color:var(--white);border-radius:10px;
  outline:2px dotted var(--medpink);outline-offset:-5px;
}
#statuscafe-username {
margin:0;padding:.5em;width:100%;color:var(--white);font-weight:bold;font-size:.8em;

    background-color:var(--medpink);;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom:1;
}

#statuscafe-username a {
color:var(--white);}
#statuscafe-content {
    margin: 0;
    padding:1em;
    font-size:.9em;
}



.abadge {
  display:inline-block !important;
  font-size:9px !important;
text-transform:uppercase;
color:var(--white) !important;
  padding:10px 0px !important;
  width:88px !important;
  height:31px !important;
  background-color:var(--medpink) !important;
  margin-bottom:5px !important;  font-weight:bold !important;

}

.abadge:hover {
  color:var(--medpink) !important;
}


a:not(#nav li a, .aimg, #statuscafe a) {
     background-color:var(--white);
     display:inline;
     padding:1px 1px 1px 1px;
     line-height:1.5em;
     font-size:.9em;
     color:var(--blue);
}
a:hover:not(#nav li a, .aimg, #statuscafe a) {
     background-color:transparent;
     background-image: var(--squiggle);
     background-position: 0 50%;
     background-size: auto 10px;
     background-repeat: repeat-x;
     text-decoration: none;
}


 .callout {
     background-color: var(--white);
     border: 2px dashed var(--medpink);
     padding: 10px;
     margin:5px 10px 5px 10px;
     color:#000;
     border-radius:5px;
overflow-x:hidden;
overflow-y:scroll;
     max-height:300px;
     background-image: var(--staticsq);
     background-position: 0 50%;
     background-size: auto 10px;
     background-repeat: repeat;
     text-decoration: none;
     font-size:.8em;

}
 .guestbook {
     background-image: var(--staticsq);
     background-position: 0 50%;
     background-size: auto 10px;
     background-repeat: repeat;
     text-decoration: none;
     border-radius:15px;
     max-height:300px;
     overflow:scroll;
     margin-bottom:20px;
}
 summary {
     color:#ff85bb;
     font-weight:bold;
     list-style:none;p
}

 summary:hover {
     color:var(--blue);
     font-style:italic;
}
 summary:after {
     font-family:monospace;
     content:"›";
}
 #nav summary {
     line-height:1em;
     font-size:.9em;
     padding:6px;
     background-color:var(--white);
     width:150px;
     padding:5px;
     text-align:center;
     text-transform:lowercase;
     font-weight:0;
     border-bottom:3px var(--medpink) dotted;
     border-top:3px #360d1d dotted;
     margin-bottom:4px;
}


.banners img {
width:100%;height:auto;}

.right {
width:50%;
  margin:auto;
  float:right;
}

.left {
  width:50%;
  margin:auto;
  float:left
}

.center {
    width:50%;
  margin:auto;
  float:center
}
 #aside ul, #main ul {
     padding:0;
     margin:0;
     list-style:none;
}
 #aside li:before, #main li:before {
     content:"\2661";
     color:var(--blue);
     padding-right:5px;
}

li {
     padding-bottom:10px;
}

.yw-content strong {
color:var(--medpink) !important;}

.yw-widget-full a {
background-color:transparent !important;
background-image:none !important;
color:var(--bgpink) !important;}



 @media only screen and (max-width: 800px) {
     #flex {
         flex-wrap: wrap;
    }
     #main, .top, #aside, #footer, #nav, #pixnav {
         width:100%;
         margin:auto;
         margin-bottom:20px;
         text-align:center;
    }
.sidebyside {
display:flex;
flex-direction:column;
}

.sidebyside > .article {
width:100%;
}
     #main {
         order: 2;
    }
     #aside {
         order: 3;
    }
     #nav {
        order: 1
    }
     #nav li {
         width:100%
    }

     #aside h2, #aside summary, #nav summary {
         width:100%;
         margin-left:0;
         margin:0 auto;
         margin-bottom:10px;
    }

/* #main .header {*/
/*   font-family:monospace;*/
/*   text-align:center;*/
/*   font-size:15px;*/
/*background-image:none;*/
/*}*/

 .header:before, .header:after {

padding-left:5px;
padding-right:5px;
}
}