:root {
  --black: #5b3a53 ;
  --dark:  #a63356 ;
  --med:  #ef5077 ;
  --pink: #FD94BD;
  --gray: #a58292;
  --light:  #FDCCD7  ;
  --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: 'Mademoiselle' ;
  --secondaryfont: 'serif, inherit';
  --basefont: 'Latin Modern Mono', monospace;
}

@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:'Mademoiselle';
src: url('/_parts/fonts/Mademoiselle.otf'); }
@font-face {
font-family:'ChicagoFLF';
src: url('/_parts/fonts/ChicagoFLF.ttf'); }
@font-face {
font-family:'EmojiFont';
src: url('/_parts/fonts/EmojiFont.ttf'); }
@font-face {
font-family:'Faith Collapsing';
src: url('/_parts/fonts/FaithCollapsing.ttf'); }
@font-face {
font-family:'Old Cupboard';
src: url('/_parts/fonts/OldCupboard.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:'jacquard';
    src: url('/_parts/fonts/Jacquard24-Regular.ttf'); }


* {
  box-sizing: border-box;
  scrollbar-color: var(--med) transparent;
  max-width:100vw;
      cursor:url('https://hillhouse.neocities.org/_images/pixels/ghostcursor.png'), auto !important;
}
a:hover, details summary:hover {
      cursor:url('https://hillhouse.neocities.org/_images/pixels/ghostcursor1.png'), auto !important;
}
body:hover {
    cursor:url('https://hillhouse.neocities.org/_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.png), url(../_images/backgrounds/cloth/floralembroidery-light2.png), var(--light);
  background-attachment: fixed;
  font-family: 'Latin Modern Mono', monospace;
  letter-spacing:-0.3px;
  font-size:15px;
  line-height:1.2em;
  color:var(--black);
  max-width:100vw;
  overflow-x:hidden
}
  
.bg-typewriter {
    background:url(../_images/backgrounds/dots.png) repeat fixed, url(../_images/backgrounds/typewriter.png) repeat-x fixed !important;
}
.bg-grid {
    background:url(../_images/backgrounds/paper/grid.png) repeat !important;
}

.bg-pinkwall {
    background:url(../_images/backgrounds/dots.png) repeat fixed, url(../_images/backgrounds/paper/pinkwall.png) repeat !important;
}

.bg-fabric {
  background:url(../_images/backgrounds/dots.gif), url(../_images/backgrounds/cloth/pinkfloral.png) fixed top left !important;
  background-size:auto, 150px
}
.bg-scroll {
  background-attachment:scroll;
  background-repeat:repeat
}
.bg-white article, article.bg-white {
  background:var(--white);
  border-color:var(--light)
}
.bg-white a {
  text-decoration-color:var(--med)
}
.bg-white a:hover {
  background:var(--light)
}

.bg-dark article:not(article.bg-dark article), article.bg-dark {
  background:var(--black);
  color:var(--white);
  border-color:var(--dark)
}

.bg-plain {
  background-image:url('/_images/backgrounds/paper/blank.png') !important;
  background-position: top;
}

.bg-lined {
  background-image:url('/_images/backgrounds/paper/lined.png') !important;
  background-position:center;
}
.bg-flowerdeco {
  background-image:url('/_images/backgrounds/paper/flowerdeco.png') !important;
}

.bg-field {
  background-image:url('/_images/backgrounds/paper/field.png') !important;
}

.bg-handmade {
  background-image:url('/_images/backgrounds/paper/handmade-white.png') !important;
}
.bg-recycled {
  background-image:url('/_images/backgrounds/paper/recycled-pink.png') !important;
}

.bg-pumpkin {
  background-image:url('/_images/backgrounds/paper/pumpkin.png') !important;
}
.bg-fleckedpink {
    background-image:url('/_images/backgrounds/paper/flecked-lightpink.png') !important;
    background-repeat:repeat}
.bg-floraldark {
    background-image:url('/_images/backgrounds/cloth/floralembroidery-dark.png') !important;
    background-repeat:repeat;
    }

.bg-floraldark details.return summary, .bg-dark details.return summary {
  filter: drop-shadow(0px 0px 10px var(--light));
}

article.paper, .paper article {
  border:none;
  outline:none;
  box-shadow:none;
  background-color:transparent;
  background-size:cover;
  background-repeat:repeat-y;
  margin-bottom:-50px;
  padding:100px;

  
}
.shadow {
  filter: drop-shadow(1px 3px 5px rgba(var(--blackrgb) 0.3)); }
article.paper.bg-paper {
 background: url(../_images/backgrounds/paper/lined.png) fixed top left; 
 background-repeat:repeat;
}


article.paper {
  border-radius:0;
  padding:50px;
  min-height:auto;
  margin:20px
}

.paper.small {
  flex:1 4 30%
}

.paper.photo {
  padding:0px !important;
  min-height:auto !important;
  min-width:350px;
  background-image:none !important;
}
.paper.photo a {
  background:var(--white);
  float:right
}
.paper.photo img, .paper.polaroid img {
  width:100%;
max-width:100% !important;
object-fit:contain
}
.paper.photo.smallphoto {
flex:1 4 20%;
min-width:150px;
margin:0;
padding:0
}
img.smallphoto {
  min-width:150px;
  max-width:100%;
  margin:10px 0px;
  max-height:350px;
  min-height:200px !important;
  object-fit:contain
}

.papers .paper:nth-of-type(odd) {
  background-image:url('/_images/backgrounds/paper/flecked-lightpink.png');
  background-position: top;
}

.papers .paper:nth-of-type(even){
  background-image:url('/_images/backgrounds/paper/lined.png');
  background-position:center;
}
.papers .paper:nth-of-type(3n) {
  background-image:url('/_images/backgrounds/paper/flowerdeco.png');
}

.papers .paper:nth-of-type(5n){
  background-image:url('/_images/backgrounds/paper/grid.png');
    top:10px;
    transform:rotate(1deg)
}
.papers .paper:nth-of-type(6n) {
  background-image:url('/_images/backgrounds/paper/recycled-white.png');
}
.papers .paper:nth-of-type(7n) {
  background-image:url('/_images/backgrounds/paper/handmade-purple.png');
    top:-10px
}
.papers .paper:nth-of-type(8n) {
  background-position:bottom;
  background-image:url('/_images/backgrounds/paper/recycled-lightorange.png')
}
.papers .paper:nth-of-type(9n) {
  background-image:url('/_images/backgrounds/typewriter.png')
}

.papers .paper:nth-of-type(odd) {
  transform:rotate(.5deg);
}
.papers .paper.taped:first-of-type {
  transform:rotate(2deg);
}
.papers .paper:nth-of-type(3n) {
  transform:rotate(1deg);
}
.papers .paper:nth-of-type(5n) {
  transform:rotate(-2deg);
}

.paper.polaroid {
  max-width:400px;
  background:var(--white);
  padding:30px;
  font-family:'Mademoiselle';
  font-size:1.1em;
  text-align:center;
  transform:rotate(0deg) !important
}


.taped::before {
  background-image:url('/_images/stickers/tape/hillhousepink.png');
  background-repeat:no-repeat;
  display:block;
  content:" ";
  position:absolute;
  height:50px;
  width:150px;
background-size:contain;
  top:-20px;
  left:40%
}
.extra.small.taped::before {
  top:-30px;
  left:-30px;
  transform:rotate(-25deg)
}


.taped:nth-of-type(4n)::before, article.taped ~ div article.taped:nth-of-type(6n)::before, .small:nth-of-type(odd) .taped:nth-of-type(even)::before {
        background-image:url('/_images/stickers/tape/hauntedhouse.png');left:20px }

.taped:nth-of-type(8n)::before, .taped:nth-of-type(6n)::before {
      background-image:url('/_images/stickers/tape/scallop.png'); left:30%}

.taped:nth-of-type(odd)::before {
          background-image:url('/_images/stickers/tape/hearts.png');
        right:20px }

        .taped:nth-of-type(3n)::before {
    background-image:url('/_images/stickers/tape/tapestry.png'); left:10%  }
    
  .taped:nth-of-type(5n)::before {
      background-image:url('/_images/stickers/tape/cherryblossoms.png'); left:60%}

.taped:nth-of-type(7n)::before, .small:nth-of-type(even) .taped:nth-of-type(odd)::before, article.taped ~ div article.taped:first-of-type::before {
      background-image:url('/_images/stickers/tape/daisiespink.png'); left:30%}

article.taped ~ div article.taped:nth-of-type(4n)::before {
   background-image:url('/_images/stickers/tape/batspink.png'); left:70%
   }

aside.left article.paper {
  padding:30px }
article.paper:nth-of-type(even) {
  transform:rotate(-1deg);
  margin-left:5px;
}
article.paper:nth-of-type(3n) {
  transform:rotate(1.5deg);
  margin-left:-10px
}
article.paper.small, article.paper.extra.small {
  padding:30px;
}
article.repeat {
  background-repeat:repeat;
  background-size:contain;
   max-height:2000px
}
.scroll {
max-height:500px;
overflow:scroll}

#container {
  padding:50px
}

.cutout {
  position:fixed;
  top:max(calc(100% - 500px), 100px);
  right:1%;
  z-index:-1
}
.cutout img {
  max-height:500px;
  transform: rotate(5deg);
}
#navimg img:hover, .return a img:hover{
  transform:rotate(6deg)
}
.tilt:hover {
  transform:rotate(5deg)
}
#navimg img:hover {
  transition:.2s;
  filter: drop-shadow(0px 0px 5px var(--med));
}
.cutout img {
  filter: drop-shadow(1px -1px 1px var(--dark));
}

#main {
  display:flex;
  flex-flow: row wrap;
  max-width:90%;
  margin:0 auto;
  justify-content:center;
  align-items: flex-start;
  gap:20px
}

aside, main {
  display:flex;
  flex-flow:row wrap;
  align-items: flex-start;
  gap:20px
}

aside.left {
  flex:1 2 10%;
  gap:0px;
  flex-flow:row ;
  align-items: flex-start;
}
.wrap {
  flex-flow:row wrap !important
}
aside.right {
  flex:1 2 10%;

  justify-content: center;
}

#main.leftfixed aside.left {
position:fixed !important;
left:30px;
top:10px;
max-width:150px;
}


#main.leftfixed main {
 margin-left:200px 
}

main {
  flex:4 1 40%;
  min-width:300px;
}
#homenav {
  flex:1 4 20%;
  margin:0px;
  padding:20px;
  padding-bottom:0px;
}
#navimg {
  flex:1 10 50px;
}
.small {
  flex:1 2 40%
}
.extra.small {
  flex:1 3 20%
}

.extra.extra.small {
  flex:1 4 10% }
.big {
  flex:2 1 100%
}
.small > article {
  margin-bottom:20px
}

article.short {
  max-height:250px;
  overflow-y:scroll }
#navimg > img {
  max-width:100px
}
#navimg img#navall {
  display:none
}

.topbar {
  width:100%;
  height:40px;
  margin:50px auto;
  margin-top:-50px;
  top:0;
  display:flex;
  flex:row no-wrap;
  gap:30px;
  font-size:20px;
  line-height:20px;
  justify-content: flex-start;
  align-items:stretch;
  position:relative;
  z-index:-2

}
.topbar div {
  background:var(--med);
  color:var(--light);
    padding:10px;
    border-radius:25px;
    position:relative;

}
.topbar .home a {
font-family:'Alit Halloween';
color:var(--white);
text-decoration:none;
padding:0px 5px;
font-size:30px;
}
.topbar a:hover {
  background:none;
  font-style:normal;
  color:var(--light)
}
.topbar .title {
  flex:1 1 auto;
  padding-left:50px;
}
.title::before {
  content:"R";
  margin-right:20px;
  font-family:'EmojiFont';
}
.title > marquee::after {
  content:"z";
  font-family:'EmojiFont';
  margin-left:10px;
}
.title > marquee {
  display:inline;
  position:absolute;
top:25%;
padding:0;
font-size:.8em;
text-transform:uppercase
}

details.return:not(aside.left details.return) {
  width:150px;
  display:block;
  position:absolute;
  left:20px;top:20px;
    z-index:100000;
}
aside.left details.return {
  position:relative !important;
  flex:1 1 150px;
  text-align:center;
      z-index:100000;
      padding:0px !important;
      margin:0 auto !important;}
details.return #nav {
  max-height:350px;
  overflow-y:scroll;
  text-align:center;
}
details.return summary {
  padding:10px;display:block;width:150px;height:100px;
  background-image:url(https://hillhouse.neocities.org/_images/stickers/key.png);
  background-size:contain;
  background-repeat:no-repeat
}
details.return summary:hover {
  transform:rotate(12deg);
  box-shadow:none;
}
details.return article {
  padding:10px;
  margin:25px auto !important;
      z-index:100000;
}

details.returnfixed {
  position:fixed;
      z-index:100000;
  left:50px;
  top:50px;
}
#navimg {
  text-align:center;
}
#navimg img {
  max-width:90px;
  max-height:120px;
  object-fit:contain;
  vertical-align:middle;
  margin: 10px auto;
  filter: drop-shadow(0px 0px 2px var(--white));
  position:relative;
}
.alignbottom img, .alignbottom {
  vertical-align:bottom !important }

aside article.pagenav a {
  display:inline-block;
  width:auto;
  margin:5px;
  background:var(--white);
  color:var(--dark);
  font-size:1.1em;
  padding:5px;
  text-decoration-color:var(--med);
}
aside article.pagenav a:hover {
  background:var(--light);
  text-decoration-color:var(--white)
}
aside article.pagenav {
  background:rgba(var(--whitergb) 0.6);
  text-align:center
}
article.pagenav a.showall {
  background:var(--med);
  color:var(--white)
}

aside article.pagenav.pagenav-small {
  padding:10px }
aside article.pagenav.pagenav-small a {
  display:inline-block;
  padding:2px;
text-decoration-color:var(--light);
color:var(--black);
  break-inside: avoid;}

#nav > div:not(#nav > div.navme, details.return #nav > div) {
  display:none
}
details.return #nav > div, details.return #nav > a {
  display:inline
}

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

#nav h4 {
  display:block;
  text-align:center;
  margin:0 auto;
}


article {

  background:url(/_images/backgrounds/dots.png), var(--light);
  color:var(--black);
  border:4px var(--white) solid;
  border-radius:10px;
  padding:20px 30px;
  margin:30px 10px;
  position:relative;
  /* z-index:10; */
  max-width:100%;
  min-width:200px;
  outline:1.5px dashed var(--med);
  outline-offset:4px;
  flex:1 1 auto;
}

.status {
  display:flex;
  flex-flow:column ;
  justify-content: space-between;
}
.status article {
  padding:15px 20px;
  text-align:center;
}

article article {
  margin:10px auto;
  width:90%;
  min-width:100px;
  max-width:350px;
  padding:15px;
  background:var(--white);
    box-shadow:12px 12px var(--light), 14px 14px var(--white), 10px 14px var(--white), 14px 10px var(--white);
    margin-bottom:20px;
}

a {
  color:var(--dark);
  font-weight:bold;
  text-decoration:underline wavy var(--pink);

}

a:hover {
  border-radius:5px;
}
.imgs.buttons a img { transition: .2s; }
.abadge:hover, .imgs.buttons a img:hover { border-radius:8px; transition: .2s;outline:2px var(--white) solid}

a:not(.imgs a) {
    padding:0px 3px
}
a:not(.imgs a):hover {
    background:var(--med);
    color:var(--white);
    text-decoration:none
}

a[href^="http"]:not(.imgs a, #nav a)::after, a[href^="https://"]:not(.imgs a, #nav a)::after {
  content:"\2924";
padding:0;
margin-left:2px;
display: inline-block;
font-style: normal;
font-weight:bold;
color:var(--dark);
font-family:'Apple Symbols'
}

b {
  color:var(--dark);
}
i {
  font-style:italic;
}

s {
  color:var(--dark)
}

code,textarea {
  background:var(--dark);
  color:var(--light);
  display:block;
  font-size:10px;
  width:100%;
  min-height:100px;
overflow:scroll;
margin:10px;
text-align:left;
border:1px var(--med) solid
}

u {
  background: linear-gradient(180deg, rgba(255,255,255,0) 60%, var(--white) 60%);
  text-decoration: none
}
ol, ul {
  padding-left:15px;
}
ol li, ul li {
  padding-left:12px;
  margin-bottom:10px;
}
ul {
  list-style: "i";
}
ol li::marker {
  font-family:'Mademoiselle';
  font-weight:bold;
  color:var(--dark);
  font-size:.8em
}
ul li::marker {
  font-family:'EmojiFont';
  font-weight:bold;
  color:var(--dark);
}

ul.checklist {
list-style:"☐";
}

ul.checklist li.ch {
list-style:"☑";
color:var(--med);

}
ul.checklist li {
  font-style:normal;
  padding:5px;margin:0
}
ul.checklist li.ch { text-decoration: line-through }

blockquote {
  font-style:italic;
  padding:10px 20px;
  margin-left:20px;
  margin-right:10px;
  background:var(--white);
  color:var(--dark);
  outline:var(--white) dashed 2px;
  outline-offset:5px;
  position:relative;
  text-align:left;
}
blockquote::before {
  content:'‟';
  color:var(--med);
  font-family:serif;
  font-size:80px;
  line-height:20px;
  position:absolute;
  left:-40px;
  top:20px;
  font-style:normal}

article.bg-white blockquote, .bg-white article blockquote {
  background:var(--light);
  color:var(--black);
  outline-color:var(--light)}
/* 
details summary:not(details.return summary, details.h2 summary) {
  display:inline-block;
  border:var(--med) 1px dashed;
  color:var(--dark);
  padding:2px 5px;

} */

details summary:not(details.return summary) { 
  font-family:var(--cursive);
  margin:20px auto;
  font-size:2em;
  font-weight:normal;
  display:block;
  max-width:100%;
  /* width: max-content; */
  background:var(--light);
  color:var(--black);
  padding:5px 10px;
  /* border-radius:5px; */
  border:1px var(--white) dashed;
  outline:1px var(--med) dotted;
}
details.h2[open] {
  border:none;
  padding:0px;
  max-width:100%;
  text-align:center;}

details summary:hover, details[open] summary:not(details.return[open] summary) {
  font-style:italic;
  border-radius:5px;
  box-shadow:2px 2px var(--med);
}
details[open]:not(details.return[open], details.h2[open]) {
  /*border-left:var(--med) dashed 2px;*/
  /*border-right:var(--med) dashed 2px;*/
  /*padding:0 10px;*/
  margin-bottom:20px;
  max-width:100%;
}

hr {
  border:none;
  /*border-top:var(--med) dashed 2px;*/
  margin:30px 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:'jacquard';
  margin:0;
  padding:0;
  font-weight:normal;
  font-size:4.5em;
  color:var(--dark);
  mix-blend-mode:multiply;
  line-height:.7em;
  padding:5px;
  z-index:1
}

article > h1:first-child {
  position:absolute;
  top:-35px;
  left:-20px;
}
h1::after {
  content:"";
  display:block;
  width:70%;
  margin-left:auto;
  margin-right:-15px;
  border-bottom:2px dotted var(--med);
  mix-blend-mode:multiply;

}

h2 {
  font-family:var(--cursive);
  font-size:1.8em;
  margin:10px auto;
  font-weight:normal;
  display:block;

  background:var(--med);
  color:var(--white);
  padding:5px 15px;
  border-radius:5px;
  max-width:100%;
}
h2 a {
  color:inherit }
  
  h2 a:hover {
    color:inherit;
    background:transparent;
    font-style:italic }

h3 {
  font-style:italic;
  border-radius:5px;
  box-shadow:5px 5px var(--med);
  display:table;
  margin:25px auto;
  margin-top:5px;
  border:var(--med) 1px dashed;
  color:var(--dark);
  padding:5px 10px;
  background:var(--light)
}

h4 {
  color:var(--med);
  font-family:'Mademoiselle';
  font-size:1.2em;
  font-weight:normal;
  display:inline
}

h5 {
  background:var(--white);
color:var(--med);
display:inline-block;
padding:2px 10px;
margin:0;
transform:skew(-5deg) rotate(-2deg)
}

img {
  max-width:100%;
}
.pixel img {
  margin:5px;
  min-width:auto
}

.badges img { max-width:80px;max-height:15px }
.blinkies img { width:150px;height:20px;margin:0;padding:0 }
.badges { line-height:20px }
.blinkies { line-height:25px }
.buttons:not(.links.buttons) { line-height:35px }
.buttons img { max-width:88px;max-height:31px }
.stamps img { width:99px;height:56px; }

 .abadge {
  display:inline-block ;
  font-size:10px ;
  font-weight:bold;
text-transform:uppercase;
word-break: break-all;
color:var(--white) ;
line-height:3em;
width:88px;
  height:31px ;
  margin:0px;
  text-align:center;
  vertical-align:middle;
  padding:1px;
  background-color:var(--dark);
  transition: .2s;
  overflow:hidden
}

#statuscafe-username a {
  display:none
}
#statuscafe-username {
  display:inline
}
.pixel img {
  image-rendering:pixelated;
  vertical-align:middle;
}
.hover img:hover {
  transform:scale(200%);
  z-index:1
}

img.sticker {
    position:absolute;
}
img.sticker.top {
  height:150px;
  width:auto;
  top:-150px;
  right:0px;
  z-index:-1
}
img.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;
}

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

img.sticker.bottom {
  bottom:-10px
}

img.leftside.bigger {
  height:auto;width:300px;left:-130px;bottom:20px;max-width:20vw
}
img.sticker.tilted {
  transform:rotate(-10deg)
}
img.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);
}

.flex {
  display:flex;
  flex-flow:row wrap;
  max-width:100%;

}

.flex .small {
  flex:1 1 45%;
  min-width:200px;
  max-width:100%;;
  /*margin:0 auto*/
}

.flex .extra.small {
  flex:1 3 20%;
  margin:10px
}
article.no-shadow {
  box-shadow:none;
  width:100%;
  max-width:100%
}
.no-shadow article {
  box-shadow:none;
}

.behind {
  z-index:-4 !important
}
.above {
  z-index:100 !important
}
.rotate {
    transform:rotate(-10deg);
}
article.laceright {
  background-image:url('/_images/backgrounds/lace.png');
  background-repeat:repeat-y;background-position:right;padding-right:50px
}
article.laceleft {
  background-image:url('/_images/backgrounds/lace.png');background-repeat:repeat-y;padding-left:50px
}

.now p {
  background:var(--white);
  padding:2px 5px;
}
.now p:nth-child(odd) {
  text-align:right
}
.now p img {
  float:left }
  .now p:nth-child(even) img {
    float:right }
.now > .now.pastsongs {
display:none
}
.now.pastsongs a {
  display:block;
  width:100%;
}

#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;
}
#updates li b {
  background:var(--white);
  color:var(--med);
  padding:0px 5px
}
.columns {
  columns: 2;
  gap:10px;
  max-width:100%
}
.columns article, .columns li {
  break-inside:avoid
}

.center {
  text-align: center;
  margin:0 auto
}


.new::before {
  position:relative;
  display:inline-block;
  margin-right:10px;
  content:"new!";
  font-family:'Mademoiselle';
  font-weight:bold;
  font-size:10px;
    width:33px;
    line-height:12px;
    height:12px;
    vertical-align:middle;
    border-radius:20px;
    color:var(--med);
    background:var(--white);
    outline:var(--med) 1px solid;
    outline-offset:1px;
    border:1px var(--med) dotted;
    text-align:center
}
#nav .new::before {
  outline:var(--light) 1px solid;
}


@media screen and (max-width:1000px ) {
  .columns {
    columns: 1
  }
  
}

@media screen and (max-width: 800px) {
  article.short {
  max-height:100%;}
  article.paper, .paper article {
  background-size:contain;
  background-repeat:repeat;
}
  #container {
    padding:80px
  }
  aside.left {
    flex:1 1 100%;
    flex-flow:row wrap-reverse
  }
  aside.left > #nav, aside.left > #navimg {
    flex:1 1 100%
  }
      #main.leftfixed aside.left {
position:relative !important;
left:0px;
top:0px;
    flex:1 1 100%;
    flex-flow:row wrap-reverse;
    max-width:100%
}


#main.leftfixed main {
 margin-left:0px; 
}
  #nav .navcontent {
    columns:2
  }
  aside.left {
    order:1
  }
  main {
    order:2
  }
  aside.right {
    order:3
  }
  .cutout {
    position:relative;
    order:5;
    width:100%;
    text-align:center;
    margin:-10px
  }
  

 }
 @media screen and (max-width: 450px) {
   body {
  
  max-width:100vw !important;
   }
   body, .bg-typewriter {
      background-attachment:unset !important;
  background-repeat:repeat !important;
  background-size:auto !important
 }
 aside.left, aside.right {
   flex:1 1 100%;
   width:100%;
   height:auto}
   
   * {
     max-width:100vw;
     word-wrap: break-word;

     }
     img.sticker {
      max-width:15vw;
      object-fit:contain;
      }
      a img.sticker {
        position:relative ;
        margin:0 auto;
        max-width:40vw;
        top:0;bottom:0;left:0;right:0
        }
   
   h1 {
     font-size:2.5em;
     position:relative !important;
     margin:10px auto;
     margin-bottom:-10px;
}
blockquote {
  margin:0 auto }
aside, main, #main, #container {
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  padding:5px;
}
#nav, #navimg {
  width:100%
}
#navimg img:not(#navimg img#navall),
.topbar {
  display:none
}
#navimg img#navall {
  display:block;
}

#nav .navcontent {
  columns:1;
  padding-top:20px;
  border-top:2px dotted var(--white);
  margin-top:20px;
}
.navcontent img {
  display:none;
}
}

#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;
}