html,body,div,span,iframe,h1,h2,h3,h4,p,pre,del,em,img,b,i,dl,dt,dd,ol,ul,li,form,table,tbody,tr,th,td,article,aside,footer,header,nav,section{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;box-sizing:border-box}
article,aside,footer,header,nav,section{display:block}
body{line-height:1;overflow-wrap:break-word;word-wrap:break-word}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;vertical-align:middle;box-sizing:border-box}
a{margin:0;padding:0;text-decoration:none;outline:none;font-size:100%;vertical-align:baseline;background:transparent}
a img{border-style:none}
ul,li{list-style-type:none}

article,aside,footer,header,nav,section{display:block}

a img{border-style:none}

ul,li{list-style-type:none}

.cf:before,.cf:after{content:" ";display:table}
.cf:after{clear:both}

html{font-size:62.5%}

.nav-btn{
display:inline-block;
padding:6px 12px;
color:#fff;
text-decoration:none;
transition:transform .1s ease,box-shadow .1s ease
}

.nav-btn:active{transform:translateY(2px)}

@font-face{
font-family:"newspaper";
src:url("news.ttf") format("truetype")
}

@font-face{
font-family:"impactlabel";
src:url("Impact Label Reversed.ttf") format("truetype")
}

body{
overflow-x: hidden;
cursor:url(cursor.png),pointer;
padding:50px 0;
font-family:'newspaper',monospace;
background:url(bq1.png);
color:#fff;
font-size:10px;
letter-spacing:.1em;
line-height:1.5;
min-height:100vh;
display:flex;
justify-content:center;
align-items:flex-start; 
}

a{color:inherit}

a:not(.bg-none):hover{color:#600003}

#wrapper{
background:#000;
padding-top:1px;
padding-left:20px;
padding-right:20px;
padding-bottom:20px;
margin:50 auto;
width:1000px;
min-height:500px;
height:auto;
max-width:100%;
display:block;
overflow:visible;
box-shadow:
0 0 100px rgba(0,0,0,.8),
0 0 150px rgba(96,0,3,.25)
}

#main{
display:grid;
grid-template-columns:150px 1fr 150px;
gap:20px;
width:100%;
}

#menu{
width:150px;
font-family:'impactlabel',serif;
font-size:18px;
letter-spacing:-2px;
border-right:dotted;
border-color:#600003;
padding-right:15px;
flex-shrink:0
}

#contents{
height:auto;
overflow-y:auto
}

.laceframe{
position:relative;
background:transparent;
border:22px solid transparent;
border-image-source:url("laceborder.png");
border-image-slice:22;
border-image-repeat:repeat;
overflow:hidden;
}

.laceframe::before{
  content:"";
  position:absolute;

  top:0;
  left:0;
  width:100%;
  height:160px; 

  background:
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.9)),
    url("banner.png") center / cover no-repeat;

  z-index:-10;
}


.laceframe.side{
width:150px;
padding:20px;
background-color:black;
color:white;
flex-shrink:0
}

.frame-container{
  width:1000px;
  max-width:100%;
  position:relative;
}

.top-banner{
  width:100%;
  height:100px;

  background:url("image/banner.png");
  background-size: cover;

  display:block;
  position:relative;
  z-index:-1;
  margin-bottom:-25px;
  margin-left:auto;
  margin-right:auto;
}
nav ul{
margin:0;
padding:0
}

nav li{display:block}

nav li a{
color:#fff;
line-height:2em;
padding:5px 10px;
display:block
}

nav li a:hover{color:#600003}

#open{display:none}

#pagetop{
background:rgba(206,0,0,.8);
color:#000;
display:inline-block;
padding:2px;
position:absolute;
text-align:center;
top:10px;
left:0;
z-index:10
}

#pagetop:hover{background:rgba(206,0,0,.8)}

.cornerenn{
position:fixed;
bottom:-5px;
right:0;
z-index:9999 /*change for honora/behindlace*/
}

.cornerenn img{
width:550px;
height:auto;
filter:drop-shadow(0 0 0 black) drop-shadow(0 0 3px black)
}

.honoraside{
position:absolute;
bottom:200px;
right:81%;
z-index:-1 /*change for honora/behindlace*/
}

.honoraside img{
width:150px;
height:auto;
filter:drop-shadow(0 0 0 black) drop-shadow(0 0 3px black)
}

.dori-side{
position:absolute;
bottom:290px;
right:81%;
z-index:-1 /*change for honora/behindlace*/
}

.dori-side img{
width:150px;
height:auto;
filter:drop-shadow(0 0 0 black) drop-shadow(0 0 3px black)
}
.right-bit{
  width:150px;
  padding:15px;
  box-sizing:border-box;
  flex-shrink:0;
  position:relative;

  border-left:dotted;
  border-color:#600003;

}

.right-bit-title {
  font-size: 0.85em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #b00000;
  margin-bottom: 10px;
  text-align: right;

  border-bottom: 1px solid #600003;
  padding-bottom: 6px;
}

.right-bit-content {
  font-size: 0.8em;
  line-height: 1.3;
  color: #cfcfcf;
  text-align: right;
}

.right-bit-content p {
  margin: 0 0 10px 0;
}

.red {
  color: #ab1300;
}

/* speech bub status shit*/
.speech{
position:absolute;
bottom:100%;
left:60%;
transform:translateX(-50%);
background:black;
color:white;
border:1px solid red;
padding:8px 10px;
font-size:12px;
font-family:monospace;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:opacity .2s ease
}

/* bubble tail */
.speech::after{
content:"";
position:absolute;
top:100%;
left:10px;
transform:translateX(-50%);
border-width:6px;
border-style:solid;
border-color:red transparent transparent transparent
}

.cornerenn:hover .speech{
opacity:1;
animation:pop .2s ease-out
}

@keyframes pop{
from{transform:translateX(-50%) scale(.95)}
to{transform:translateX(-50%) scale(1)}
}

.corner-mascot2{
position:absolute;
top:80px;
left:68%;
transform:translateX(-70%);
z-index:9999
}

.corner-mascot2 img{
width:600px;
height:auto
}

.you-r-here{
position:fixed;
image-rendering:pixelated;
top:178px;
left:7%;
transform:translateX(-70%);
z-index:9999
}

.you-r-here img{
width:70px;
height:auto
}

/*cornermascot2 unused. go back here to add another floatie*/

.marquee{
position:relative;
overflow:hidden;
white-space:nowrap;
width:100%
}

.marquee span{
display:inline-block;
font-size:10px;
font-family:'impactlabel',serif;
color:red;
padding-left:100%;
animation:marquee 50s linear infinite
}

.marquee img{
height:20px;
width:auto;
object-fit:contain;
vertical-align:middle
}

.marquee:hover span{animation-play-state:paused}

@keyframes marquee{
0%{transform:translateX(0)}
100%{transform:translateX(-100%)}
}

h1{font-size:1.4em;padding:.3em}

h2{
border-bottom:3px solid #ccc;
font-size:1.4em;
margin:15px 0
}

h2:first-letter{
color:#ce0000;
font-size:1.5em
}

h3{
background:url(gifs/cross.gif) no-repeat 0 50%;
border-bottom:2px dashed #600003;
font-size:1.5em;
letter-spacing:2px;
margin:15px 0;
padding-left:20px
}

h4{color:#ab1300;display:inline}


dt{
font-weight:700;
float:left;
margin:0 0 5px;
width:160px
}

dd{margin:0 0 5px 170px}

em{font-style:normal;font-weight:700}

input,textarea{
background:#fff;
border:1px dotted;
color:#999;
margin:3px 0;
width:250px
}

textarea{height:50px}

hr{
border:0;
border-top:1px solid #ccc;
display:block;
margin:1em 0;
height:1px
}

.marker{
background:#ce0000;
background:linear-gradient(rgba(206,0,0,0) 50%,#ce0000 0%)
}

.dcline{
border-left:5px solid #ce0000;
margin:5px 0;
padding:3px
}

.textbox{
border:1px dotted;
margin:10px 0;
padding:3px;
text-align:center
}

.title{
font-size:1.5em;
font-weight:700;
margin:2em 0;
text-align:right
}

.txt{
border-left:1px dotted;
margin:1em;
padding:0 0 0 1em
}

.frame{
background:#000;
border:1px solid;
box-shadow:4px 4px 5px #ccc;
padding:6px
}

@media screen and (max-width:600px){
body{font-size:1.4em}
#wrapper{width:100%}
img{height:auto;max-width:100%}
dt{float:none;width:auto}
dd{margin-left:20px}

#menu{
margin-bottom:52px;
border:0;
padding:0;
position:relative
}

nav{
background:#600003;
border:1px solid #fff;
position:absolute;
width:100%;
left:0
}

nav ul{display:none;width:100%}

nav li{width:50%}

nav li a{
border-bottom:1px dotted #fff;
border-left:1px dotted #fff;
display:block;
margin:0 0 -1px -1px;
padding:10px
}

nav li a:hover{
background:#ce0000;
color:#fff
}

#open{
background:#ce0000;
border:1px solid #fff;
color:#000;
display:block;
text-align:center;
height:32px;
line-height:32px;
width:100%
}

#open:after{
background:url(image/nav-icon.png) no-repeat 10px 50%;
content:"";
display:inline-block;
position:absolute;
right:0;
top:0;
height:32px;
width:100%
}
}

@media screen and (max-width:480px){
nav li{width:100%}
}

/* fuckinuhscrollbar*/
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:#600003}
::-webkit-scrollbar-thumb:hover{background:#ab1300}

.paper-edge {
  position: relative;
  background: #0b0000;
  padding: 16px;
  width: 220px;
  box-sizing: border-box;

  box-shadow:
    0 0 25px rgba(0,0,0,0.7),
    inset 0 0 12px rgba(96,0,3,0.35);
}


}