body{
background: #202326 url(bg.jpg) fixed;
background-size:contain;
background-color: #202326;
letter-spacing:1px;
font-family:calibri, arial;
font-size:10px;
line-height:11px;
color:white;
letter-spacing:1px;}

#page-container {
  position: relative;
  width: 600px;
  height: 630px;
  margin: 40px auto;
  padding: 20px;
  background: rgba(56, 56, 56, 0.65); /* semi-transparent dark overlay */
  border: 2px dashed #888A8C;       /* optional aesthetic border */
  border-radius: 8px;               /* smooth corners */
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4); /* soft outer glow */
  z-index: 1;                       /* above background but below scanlines */
  backdrop-filter: blur(4px);       /* optional “frosted glass” effect */
}

a:link, a:visited, a:active { 
color:#393A40;text-decoration:none;}
a:hover {color:#555;}

b {color:white;}
  
img {border:0;}

::-webkit-scrollbar-thumb {
background-color: #fff;  
border-radius: 0px;
border:1px solid #393A40;}
  
::-webkit-scrollbar {
width: 5px; height: 0px; 
background: transparent;}
  
  
  
#layout {
margin: 20px auto;
width: 540px;}
  
      
#header1 {
float: left;
margin: 0 auto;}

#header2 {
width: 540px;
height: 60px;
line-height:60px;
background: rgba(0, 0, 0, 0);}
  

.sitename a {color:white;text-transform:uppercase;letter-spacing:5px;
height:26px;line-height:26px;font:26px 'doto';border-bottom:2px dotted #ddd;padding-bottom:4px;}
.sitename a:hover {color:#888A8C;}

#navigation {
width:540px;
text-align:center;
float: left;
margin: 0 auto;}

.navi a { 
display:inline-block;
background: #202326; 
font:normal 9px 'silkscreen',arial;
line-height:9px;
text-transform:uppercase;
padding-top:1px; 
padding-left:5px;
padding-right:5px;
padding-bottom:2px;
margin-bottom:4px;
letter-spacing:1px;
color:#fff;
border-radius:2px;
border:1px solid #888A8C;}
      
.navi a:hover {
color:#393A40;}
      

#content1 {
width: 360px;
float: left;
margin: 0 auto;}

#content2 {
padding:6px;}

  
#left1 {
width:180px;
float: left;
margin: 0 auto;}

#left2 {
padding:6px;
background:transparent;}
  

.box {
border-width:2px;
border-style:dashed;
padding: 5px;
/*border-image: url("https://64.media.tumblr.com/7aec0ae36d68b36def9be87357aea92a/b2756e0706eb2c30-11/s75x75_c1/f85ea5e4367db423531b3f112f4454750ea9a53e.pnj") 8 fill round;*/
margin-bottom:16px;}

.scrollbox {
height:120px;
overflow:auto;
overflow-x:hidden;
border-width:2px;
border-style:dashed;
padding: 5px;
/*border-image: url("https://64.media.tumblr.com/7aec0ae36d68b36def9be87357aea92a/b2756e0706eb2c30-11/s75x75_c1/f85ea5e4367db423531b3f112f4454750ea9a53e.pnj") 8 fill round;*/
margin-bottom:4px;}
  

.title {
font:bold 10px calibri;
color:#dde0e4;
text-transform:uppercase;
letter-spacing:5px;
border-bottom:1px dashed #ffffff;
margin-bottom:4px;}
  
  
.extralinks a {
display:inline-block;
color:#fff;
text-align:center;
font:normal 12px 'pixelify sans',arial;
width:150px;
background:#888A8C;
padding-left:5px;
letter-spacing:1px;
margin-bottom:1px;}
  
.extralinks a:hover {color:#202326;}

textarea {font:10px calibri,arial;letter-spacing:1px;color:#444;}
  
/*Scan Lines 02*/
.lines {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 300;
opacity: 0.05;
}
 
.lines:before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
background-size: 100% 4px;
will-change: background, background-size; animation: scanlines 0.2s linear infinite;
}
 
@keyframes scanlines {
from {
background: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, .5) 51%); background-size: 100% 4px; }
to {
background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
background-size: 100% 4px;
}
}