body {
background:#F6F0FD url(https://files.catbox.moe/mzda7j.png) repeat-x;
text-align:left;
letter-spacing:1px;
text-shadow: 0px 0px 1px #bbb;
font:9px 'lato',calibri, tahoma;
color:#7F639C;
margin: 0;
padding: 0;
}
      
a:link, a:visited, a:active {
color:#555;text-decoration:none;}
a:hover {
color:#999;}

i {color:#FFB755;font-weight:normal;}
b {color:#CC6D96;}
  
  
::-webkit-scrollbar-thumb {
background-color: #fff;  
border-radius: 0px;
border:1px solid #999;
}
::-webkit-scrollbar {
width: 7px; height: 4px; 
background: #eee;
}

      

#layout {
    margin: 80px auto;
    width: 600px;
}

#header1 {
    width: 100%;
    float: left;
    margin: 0 auto;
}

#header2 {
    height: 135px;
    background: transparent;
    border-top-left-radius: 20px;
    border-top-right-radius:20px;
    margin: 0px;
}

#navigation1 {
    width: 600px;
    float: left;
    margin: 0 auto;
}

#navigation2 {
    height: 20px;
    line-height:20px;
    background: #FEE3FD;
    margin: 0px;
    text-align:center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-top:2px solid #FBFEEA;
}
      
#navigation2 a {
    background:transparent; font:10px monospace,georgia;
    text-transform:uppercase;font-style:normal;line-height:20px;
    padding:4px; letter-spacing:3px;margin-right:6px;color:#9D6AA6;}
#navigation2 a:hover {
    background:transparent; font:10px monospace,georgia;
    text-transform:uppercase;font-style:normal;line-height:20px;
    padding:4px; letter-spacing:3px;margin-right:6px;color:#999;}

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

#content2 {
  height:300px;
  min-height:300px;
  overflow:auto;
  overflow-x:hidden;
  background: #FFFFFF;
  border-top: 1px solid #9D6AA6;
  margin: 0px;
  padding:4px;
}

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

#left2 {
    height:300px;
    min-height:300px;
    background: #fff;
    border-top: 1px solid #9D6AA6;
    border-right:1px solid #ddd;
    margin: 0px;
    padding:4px;
    overflow:auto;
    overflow-x:hidden;
}

#right1 {
    width: 160px;
    float: left;
    margin: 0 auto;
}

#right2 {
    height:300px;
    overflow:auto;
    overflow-x:hidden;
    border-top: 1px solid #9D6AA6;
    background: #fff;
    border-left: 1px solid #ddd;
    margin: 0px;
    padding:4px;
}

#footer1 {
    width: 600px;
    float: left;
    margin: 0 auto;
    clear: both;
}

#footer2 {
    height: 20px;
    line-height:20px;
    text-align:center;
    background: #FEE3FD;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius:20px;
    margin: 0px;
    border-top:1px solid #bbb;
}
      

  
.title {background:transparent;text-transform:uppercase; font:bold 9px monospace, arial; 
  color:#666;line-height:10px;padding:1px;padding-bottom:1px;border-bottom:1px solid #bbb;margin-bottom:4px;letter-spacing:2px;}
.bigtitle {font-family:"Creepster", Monospace, arial;font-size:30px;text-align:center;letter-spacing:5px;color:#CC6D96;text-shadow:0px 0px 4px #FEE3FD;}

      
.box {
  background:#fff;
  border-left:2px solid #E7DCED;
  border-right:2px solid #F3EDF6;
  border-bottom:2px solid #F3EDF6;
  border-top:2px solid #E7DCED;
  padding:4px;
  margin-bottom:4px;}
      
      
.menu {
display:block;background:#fff;margin-bottom:1px;padding-left:5px;text-transform:uppercase;border-left:0px solid #F6D0D4;letter-spacing:1px;
font:9px monospace, arial;color:#333;
}
.menu:hover {
display:block;background:#f5f5f5;margin-bottom:1px;padding-left:5px;text-transform:uppercase;border-left:0px solid #D18E8C;letter-spacing:1px;
font:9px monospace, arial;color:#666;
}

.vertical-scroll {
  height: auto;        /* Limits the box height */
  overflow-y: visible;     /* Adds a vertical scrollbar ONLY when content overflows */
  border: none;
}

/* ==========================================================================
   1. MAIN PAGE LAYOUT (Applies to your main outer webpage)
   ========================================================================== */

/* The outer parent item holding your container must be a flexbox */
.main-wrapper-or-body {
  display: flex;
  justify-content: center; /* Horizontally centers the container */
  width: 100%;
}

.center-container {
  flex: 1;
  max-width: 1200px;       /* Keeps the page content from getting too wide on large screens */
  width: 100%;
  margin: 0 auto;          /* Classic fallback backup centering method */
  box-sizing: border-box;
}

#content-frame {
  width: 100%;
  height: 80vh;            /* Uses 80% of screen height instead of a stiff 600px */
  min-height: 500px;       /* Guarantees it won't squash down on short screens */
  border: none;
  display: block;
  box-sizing: border-box;
}

/* ==========================================================================
   2. IFRAME INNER PAGE STYLES (Put ONLY inside home.html / child sub-pages)
   ========================================================================== */

body.in-frame {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: transparent !important;
  background-image: none !important;
}