@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: 'Chango';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://zeesplace.neocities.org/Chango-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: 'Quantico';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://zeesplace.neocities.org/Quantico-Regular.ttf);
  
}


body {
background: #fff;
letter-spacing:1px;
font-family:'Roboto', arial;
font-size:11px;
line-height:14px;
text-shadow:0px 0px 1px #bbb;
color:#091724;
letter-spacing:1px;
    background-image: url('https://zeesplace.neocities.org/tumblr_inline_n259dodvji1qhwjx8.jpg'); /* Set the image path */
  background-size: cover;   
}

strong, b {
  color: #502FA0; 
}
a {
    color: #594DBD;
    text-decoration: none;
}

a:hover {
    background: #CE2576;
    color: #FFFBFF;
}

body::-webkit-scrollbar {
    width: 6px;
}
body::-webkit-scrollbar-track {
    background: #f8f8f8;
}
body::-webkit-scrollbar-thumb {
    background-color: #666;
    border-radius: 3px;
}

#container {
    max-width: 660px;
    margin: 20px auto;
    padding: 0 10px; 
    background-image: url('https://zeesplace.neocities.org/bcd527480c655fe30e23e0c158079eca.jpg'); /* Set the image path */
  background-size: cover;                   /* Scale to fill container */
  background-position: center;              /* Center the image */
  background-repeat: no-repeat; 
box-shadow: 2px 2px 5px #333;}

header {
    text-align: center;
    padding: 16px 8px;
}
header img {
    max-width: 100%;
    height: auto;
    filter: grayscale(100%);
}
.sitename {
     font:42px 'Chango';
  text-align: center;
  letter-spacing:3px;
  text-shadow:1px 1px 5px #070608;
  padding-top:2px;
  float: center;
  color: #fecde3;
  -webkit-text-stroke: 2px #070608;
}


#navi {
background: #FBFBFF95;
line-height:20px;
text-align:center;
margin-bottom:0px;

}
  
#navi a { 
display:inline-block;
background: #cefff2; 
font:normal 9px 'Roboto',arial;
line-height:9px;
text-decoration: none
text-transform:uppercase;
padding-top:2px; 
padding-left:5px;
padding-right:5px;
padding-bottom:2px;
margin-bottom:4px;
letter-spacing:1px;
color:#8a4937;
border-radius:10px;
border:1px solid #29204A;}
      
#navi a:hover {
color:#FDEFFF;
background: #4A69C3;}


#content {
    display: flex;
    gap: 10px;
    padding-top: 10px;
     background-color: #F7FBFF80; 
}

.sidebar {
    width: 150px;
    padding: 4px; 
    border:1px solid #5E5E5C;
}

.sidebar > div {
    margin-bottom: 8px;
}

/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #120F92;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #fecde3;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #FFA6F8;
}
.boxtitle {
text-transform:uppercase;
font-weight:bold;
border:1px solid #5E5E5C;
margin-bottom:4px;
padding-top:0px;
letter-spacing:3px;
font:10px 'Quantico', courier new, arial;
padding-left:5px;
color: #dbfeff;
background: #DB68C7;}

.box {
background:#FBFBFF95;
padding: 2px;
border:1px solid #5E5E5C;
margin-bottom:14px;
margin-top: 2px;
margin-left:5px;
margin-right: 5px;
}

.scrollbox {
height:100px;
overflow:auto;
overflow-x:hidden;
background:#FBFBFF95;
padding: 4px;
border:1px solid #5E5E5C;
margin-bottom:14px;
margin-top: 10px;
margin-left:5px;
margin-right: 5px;

}


main {
    flex: 1;
    padding: 8px;
    border:1px solid #5E5E5C;
     
}


footer {
    text-align: center;
    padding: 22px 8px;
    font-size: 12px;
    
}

.extralinks a {
display:inline-block;
background: #cefff2; 
font:normal 9px 'Roboto',arial;
line-height:9px;
width:80%;
text-transform:uppercase;
padding-top:2px; 
padding-left:5px;
padding-right:5px;
padding-bottom:2px;
margin-bottom:4px;
margin-left: 12px;
letter-spacing:1px;
color:#b3b3b3;
border-radius:10px;
border:1px solid #29204A;
box-shadow: 2px 2px 5px #333}
  
.extralinks  a:hover {
color:#FDEFFF;
background: #4A69C3;}


@media(max-width: 600px){
    #content {
        flex-direction: column;
        gap: 12px;
    }
    .sidebar {
        width: auto;
        padding: 4px;
    }
    main {
        border-left: none;
        border-right: none;
        padding: 8px;
    }
    navi {
        font-size: 10px;
        padding: 6px 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    navi a {
        margin: 4px 0;
        width: 100%;
        justify-content: center;
    }
}