<style>/* latin */
@font-face {
  font-family: 'Tapestry';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://zeesplace.neocities.org/Tapestry-Regular.ttf);
 
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://zeesplace.neocities.org/Roboto-VariableFont_wdth,wght.ttf);
  
}
@font-face {
  font-family: 'Jim';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://zeesplace.neocities.org/JimNightshade-Regular.ttf);
  
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;}

body {
font-family: 'Roboto', Arial, sans-serif;
font-size:9px;
background: #fff;
display: flex;
justify-content: center;
letter-spacing:1px;
text-shadow:0px 0px 1px;
color:#212121;
padding: 10px 0;}

textarea {font:9px 'robot';letter-spacing:1;color:#999;background:#eee;}
  
a:link,a:visited,a:active {
color: #585859;
cursor:pointer;
text-decoration: none;}

a:hover {
color: text-decoration:none;color: #fff;font-style: italic;
background-color: #585859;}

b {font-weight:bold;font-style:normal;color:#393939;}
i {color:#393939;letter-spacing:1px;font-family:monospace;font-size:9px;font-style:normal;font-weight:bold;text-transform:uppercase;letter-spacing:2px;}
u {text-decoration:none;font-style:italic;}

.container {
width: 700px;
height: 700px;
max-width: 95%;
background-color: #fff;
border-radius: 4px;
overflow-x: hidden;
border: 1px solid #000;
box-shadow: 10px 10px 5px grey;
border-radius: 10px;
}

.header {
width: 100%;
height: 220px;
background: url(https://zeesplace.neocities.org/tumblr_inline_n3jsc4bNET1rx7gub.png) center;
background-size: 484px 281px;
background-position: center;
border-bottom: 1px solid #ddd;
background-repeat: no-repeat;
text-align:center;}
  
.sitename {font:23px 'Tapestry';letter-spacing:3px;text-shadow:1px 1px 5px #333;padding-top:15px;float: right;color: #000;}

.layout {
display: flex;
flex-wrap: wrap;}

.leftside {
width: 160px;
background-color: #fff;
padding: 5px;
flex-shrink: 0;
border-right:1px solid #ddd;}

.scroll {
  height: 100px; /* set a fixed height for the div */
  overflow-y: scroll; /* enable vertical scrollbar */
  border-left:2px solid #000;
  border-right:2px solid #000;
  border-bottom:2px solid #000;
  border-top:2px solid #000;
  background-color: #fff;
  padding:4px;
  margin-bottom:4px;
} 
.navi {
display: block;
padding: 6px 5px;
border-radius: 3px;
margin-bottom:4px;
text-transform:uppercase;
font-weight:bold;
letter-spacing:3px;}
  
.navi:hover { background-color: #ddd; }

.sublinks {
display: none;
padding-left: 8px;
margin-top: 0px;
cursor:pointer;}
  
.sublinks a {
display: block;
padding: 4px 0;
color: #585859;
text-decoration: none;}
  
.sublinks a:hover { color: #585859 }

.rightside { flex: 1; padding: 8px; }

.mainbox {
width: 100%;
background-color: #fff;
padding: 8px;
text-align: justify;
margin-bottom: 8px;
border-radius: 4px;}
  
.maintitle {
text-transform:uppercase;font-weight:bold;
margin-bottom:12px;
 padding-bottom: 25px;
    background-image: url(https://zeesplace.neocities.org/tumblr_inline_myvy7c84ZE1ry6rgo.png);background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left bottom;
   color: #000;
letter-spacing:3px;font:15px 'Jim', courier new, arial;padding-left:0px;}

.box {
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
margin-bottom: 8px;
text-align:justify;
padding: 4px;
display: inline-block;
width: 100%;}
  ::-webkit-scrollbar-thumb {
background-color: #000;  
border-radius: 0px;
border:1px solid #333;
}
::-webkit-scrollbar {
width: 7px; height: 4px; 
background: #5a5a5a;
}

.boxleft {
background-color: #f9f9f9;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
text-align:justify;
margin-top:5px;
padding: 4px;
display: inline-block;
width:100%;}
 }
 
.iframe {
  border: none;
} 
.boxtitle {
text-transform:uppercase;font-weight:bold;border-bottom:1px solid #cecece;margin-bottom:4px;padding-top:0px;
letter-spacing:3px;font:10px 'Jim', courier new, arial;padding-left:5px;color: #000;}

@media (max-width: 800px) { .grid { column-count: 2; } }
@media (max-width: 600px) {
.layout { flex-direction: column; }
.leftside { width: 100%; }
.grid { column-count: 1; }
}