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}
.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 0.1s ease, box-shadow 0.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{
padding:0;
font-family: 'newspaper', monospace;
background:url(gifs/crossbg.png);
color:#000;
font-size:1.0em;
letter-spacing:.1em;
line-height:1.5;
}


body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9996;

  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.03) 1px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0) 4px
  );
}

.vcr-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;

  animation: vcrNoiseMove 0.4s steps(2) infinite;

}
@keyframes vcrNoiseMove {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;

  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0) 45%,
    rgba(0,0,0,0.85) 70%,
    rgba(0,0,0,0.95) 100%
  );

  animation: vignettePulse 6s ease-in-out infinite;
}

@keyframes vignettePulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.6;
  }
}
/* i am here currently */

.box20 { 
background:url(back01.gif); 
box-shadow:2px 2px 5px #000; 
box-sizing:border-box; 
margin:20px auto;
padding:10px; 
position:relative; 
width:40%}.icon01{ 
background:url(icon01.png) no-repeat; 
height:62px; 
position:absolute; 
right:10px; 
top:-13px; 
width:27px} 
a{
color:inherit
}

#contents {
  width: 100%;
  height: auto;
}

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



#wrapper {
    background: url(back01.gif);
    padding-top:-10px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:10px;
    margin:10px auto;
    width:90%;
    height:auto;
    display:block;
    flex-direction: column;
    overflow:auto;
}


.lace-content{
  position:relative;
  z-index:1;
}

.lace-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  margin: 0 auto;
  width: fit-content;   
}

.lace-frame.main {
  width: 900px;         
  max-width: 95%;
}

.lace-frame.side {
   width: 150px;         
  padding: 20px;
  position: absolute;
  right: 130px;         
  top: 80px;    
  background-color:black;
  color:white;
}


#main {
    display: block;
}

#menu a {
  position: relative;
  display: inline-block;
  padding: 6px 10px;
  font-size:15px;
  color: #000;
  z-index: 10001;
}


/* underline */
#menu a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px; 
  width: 0%;
  height: 2px;
  background-color: #600003;
  transition: width 0.3s ease, left 0.3s ease;
}

#menu a:hover::after {
  width: 100%;
  left: 0;
}
#menu ul {
  display: flex;
  justify-content: center; 
  text-align: center;
  flex-direction: row;
  gap: 16px;
}
nav {
  position: relative;
  z-index: 10000;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li {
    display: block;                 
}

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

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)
}

.corner-mascot {
  position: fixed;
  bottom: -5px;
  right: 0px;
  z-index: 9999;
}

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

}

.corner-mascot2 {
  position: fixed;
  top:11px;
  left: 50%;
transform: translateX(-70%);
  z-index: 9999;
}

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



.zoomable {
  cursor: zoom-in;
}


.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;

  align-items: center;
  justify-content: center;

  z-index: 100000; 
}


.lightbox:target {
  display: flex;
}


.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  image-rendering: auto;
  box-shadow: 0 0 40px rgba(0,0,0,0.8);
}


.lightbox-close {
  position: absolute;
  inset: 0;
  cursor: zoom-out;
}

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


.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{
  color:#600003;
}
h2{
border-bottom:2px dashed #000;
font-size:1.4em;
margin:15px 0
}
h2:first-letter{
color:#600003;
font-size:1.5em
}
h3{
  text-align: center;
  font-size:3em;
}

h4{
  text-align: center;
  font-size:3em;
}

dt{
font-weight:700;
clear:both;
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;
padding:0;
height:1px
}
.marker{
background:#ce0000;
background:-webkit-linear-gradient(rgba(206,0,0,0) 50%, #ce0000 0%);
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;clear:none;width:auto}
dd{margin-left:20px}

.img-btn img {
  display: block;
}

.img-btn:hover img {
  content: url("homehover.gif"); 
}


nav li {
  display: inline-block;
}

nav li a {
  display: inline-block;
}

nav {
  position: relative;
  z-index: 10000;
}

.float-img {
  float: left;
  margin: 0 15px 10px 0; 
  display: inline-block;
}

.intro {
  text-align: left;  
  width: 80%;        
  margin: 0 auto;
}
#open{
background:#ce0000;
border:1px solid #fff;
color:#000;
display:block;
position:relative;
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%}
}

body::before,
body::after,
.vcr-noise {
  pointer-events: none !important;
}


::-webkit-scrollbar {
  width: 10px;
}


::-webkit-scrollbar-track {
  background: #000;
}


::-webkit-scrollbar-thumb {
  background: #600003;
}
::-webkit-scrollbar-thumb:hover {
  background: #ab1300
  
}