/*----------------------------------------- 
// fonts 
-----------------------------------------*/
  @font-face {
      font-family: PC98;
      src: url(https://files.catbox.moe/i0ns2d.ttf);
  }
  @font-face { 
      font-family: Romantic; 
      src: url(https://cdn.glitch.me/9bbfdfb3-4bfa-4c39-8743-5621c8b9df21/ROMANTIC.TTF); 
  } 
  
  @font-face {
      font-family: berkahi;
      src: url(https://dl.dropbox.com/s/git042fsl0esanm/Berkahi%20Blackletter.otf);
  }
  
  @font-face {
      font-family: magic;
      src: url(https://dl.dropbox.com/s/wvlvtluwqr5rjs9/Letter%20Magic.ttf);
  }

  .special a {
      font-family: magic;
  }

/*----------------------------------------- 
// main 
-----------------------------------------*/
  body {  
    font:12px ms gothic;
    font-family: ms gothic;
  	color: #666;
  	cursor: crosshair; 
  	overflow-x: hidden; 
  	overflow-y: auto; 
  	background-image: url('/img/bg/cross3.png');
  	background:#CFBEBE;
  }
  
  .page img {
    pointer-events: none;
  }
  
  .page {
    display:flex;
    flex-flow: row nowrap;
    padding:10px 0px 10px 0px;
    height:auto;
    margin:0 auto;
    width:1050px;
    z-index:1;
  }
  
  .flexcol, .flexrow {
      display:flex;
  }
  
  .flexcol {
      flex-flow: column nowrap;
  }
  
  .flexrow {
      flex-flow: row nowrap;
  }
  
  .flexcenter {
      align-items:center;
  }
  
  /*-- txt --*/
  
  a:link, a:active, a:visited, a, #footer a:hover { 
    color: #DD2A3B; 
    text-decoration: none; 
  }
  
  a:hover , a:link, a:active, a:visited {
  	line-height: 12pt; 
  	text-decoration: none;
  	cursor: pointer;
  }
  
  a:hover b, a:hover { 
    color: #EF8180; 
  }
  
  b, i { 
    color: #A19382; 
  }
  
  b { 
    font-weight: bold; 
  }
  
  i { 
    background: #F7F3ED;
  }
  
  h2 {
    color:#666;
    font-size:10pt;
    margin: 0;
  }
  
  h3, h4 {
    width:100%;
    padding:4px;
    top:0px;
  }
  
  h3 {
    background:#372325;
  }
  
  h3 b {
    color:#EBDADA;
  }
  
  h4 {
    color:#EBDADA;
    background:#573F37;
    font-size:22px;
    letter-spacing:2pt;
    font-family:Romantic;
  }
  
  h4 b {
    color:#573F37;
  }
  
  h5 {
    display:inline;
    font-size:8pt;
    font-weight:lighter;
    color:#999;
  }
  
  .button {
  	display: inline;
    background-color: #C6C6DE;
  	color: #EBDADA;
  	font-size: 8pt;
  	overflow: auto;
  	padding: 3px;
  	line-height:25px;
  }
    
    
    
/*----------------------------------------- 
// main 
-----------------------------------------*/
  #splash {
    width:600px;
    max-width:100%;
    margin-left:210px;
  }
  
  .splash_img {
    width:558px;
    height:793px;
  }
  
  #updates {
    overflow-x: hidden;
    overflow-y: auto;
    width: 90%;
    height: 100px;
    padding:0px 10px 0px 10px;
  }
  
  #updates_container {
    background: #fff;
    background: rgba(76, 52, 50, 0.3);
    color: #E7E4E4;
    width: 300px;
    height: 150px;
    z-index:10;
    margin-top:430px;
    margin-left:30px;
    position:absolute;
    border: 1px dashed #fff;
    overflow:hidden;
  }
  
  .date {
    margin:0;
    display:block;
    font-weight:bold;
    color:#999;
    border-bottom:1px dashed #333;
    padding-top:15px;
    margin-bottom:4px;
  }
    
  .container, #ads {
    display:block;
    padding:20px;
    max-width:100%;
    max-height:100%;
    overflow-x: hidden;
    width:60%;
  }

  .container {
    height:auto;
    margin-top:20px;
    margin-left:100px;
  }
  
  #infonav {
    width:100%; 
    max-width:100px; 
    float:left;
  }
  
  #info_content, .content {
    max-height:100%;
  }
  
  #info_content {
    float:right; 
    width:80%; 
    height:80%; 
    overflow:hidden;
  }
  
  .row {
  	width: 80%;
  	margin: 2% 1%;
  	float: right;
  	height:400px;
  }
  
  .code {
    font:7pt arial !important;
    background: #EBEBEB;
    display:block;
    border:1px dotted #333;
    padding-top:5px;
    overflow:scroll;
  }
    
  
  .content { 
    text-align:center;
    padding: 20px; 
    margin-top: 5px;
    margin-left:-3px; 
    width:90%; 
    height:60%;
    overflow-y: auto;
    border: 1px solid #999;
  }

  .bordered {
    border: 2px solid #B0914F;
    background: #EBDADA;
  }
  
  #footer {
    overflow:hidden;
    text-align:center;
    width:100%;
    max-height:100px;
    bottom:0;
  }
  
  #footer a {
    color:#EF8180;
  }
  
  .spacer {
    height:50px;
  }
  
  .center {
    text-align:center;
  }
  
  .break-s { 
    height: 5px;
  }
  
  .break-l { 
    height: 30px;
  }
      
  .info { 
    background: #181818;
    background: rgba(24, 24, 24, 0.6); 
    color:#999; 
    text-align: justify; 
    width: 520px; 
    height: 440px; 
    margin: 0 auto;
    margin-top:100px;
    border: 3px double #fff; 
    -webkit-border-radius:5px; 
    border-radius:5px; 
    -moz-border-radius:5px;
    overflow:auto;
  }
  
  .title, .subtitle {
    margin-top:5 5 5 3px;
  }
  
  .title { 
    width:100%; 
    background-color:#fff; 
    color: #A11B2E; 
    font-size:22px;
  }
  
  .subtitle { 
    border-radius:5px;
    padding:3px;
    font: 12pt meiryo;
    letter-spacing:2px;
    margin-left:15px; 
    color: #97766E; 
    display:inline;
  }
  
  .shadow {
    box-shadow: 
    rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, 
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  }
  
  .shadowc, .navlink tr {
    box-shadow: 
    rgba(255, 255, 255, 0.4) 1px 1px, 
    rgba(67, 77, 82, 0.3) 2px 2px, 
    rgba(67, 77, 82, 0.2) 3px 3px, 
    rgba(67, 77, 82, 0.1) 4px 4px, 
    rgba(67, 77, 82, 0.05) 5px 5px;
  }
    

    
/*----------------------------------------- 
// navigation 
-----------------------------------------*/
 .favebutton {
    background:#EBDADA;
    padding: 5px;
    display:inline;
    border: 1px solid #B0914F;
    border-radius:4px;
    margin:1px 5px 1px 5px;
    text-align:center;
 }
 
 .navimg img {
    max-width:140px;
 }
 
  #nav, #navdisplay {
    position:absolute;
    max-width:100%;
    top:30px;
    z-index:10;
  }
  
  #nav {
    right:380px;
    max-width:200px;
    padding: 10px;
    text-align:center;
  }
  
  #navdisplay {
    left:300px;
    height:1150px;
    width:120px;
    padding:15px;
    text-align:center;
  }
  
  #navdisplay marquee {
    max-height:190px;
    border:1px dotted #333;
    padding:3px;
  }
  
  #navdisplay h4 {
    max-width:100%;
    margin:0px 0px 1px -4px;
  }
  
  .navdcontainer {
    background:#EBDADA;
    border:1px solid #573F37;
    width:100%;
    padding:0px 4px 18px 4px;
    border-radius:4px;
    margin:15px 0px 15px 0px;
  }
  
  
  .navlink {
    border-collapse:separate;
    border-spacing:0 10px;
  }
  
  .navleft ,.navleftb, .navright, .link {
    border: 1px solid #B0914F;
  }
  
  .navleft, .navleftb, .navright {
    background:#EBDADA;
    height:5px;
  }
  
  .navhead {
    background:#573F37 !important;
    color: #EBDADA !important;
    border:none !important;
  }
  
  .navleft, .navleftb {
    width:35px;
    border-radius:50px 0px 0px 0px; 
    border-right:none !important;
    background-position: center center;
    background-repeat: no-repeat;
  }
  
  .navleft {
    background-image: url('https://i.imgur.com/twnzFEP.png');
  }
  
  
  .navright {
    width:15px;
  }
  
  .link {
    width:120px;
    color: #573F37;
    font-weight: bold;
    background: #EBDADA;
    margin:5px;
    padding:5px;
    border-left:none;
    border-right:none;
  }
  

    
/*----------------------------------------- 
// scrollbar 
-----------------------------------------*/
  ::-webkit-scrollbar-thumb {
  	background-color: #339999;
  	height: 8px; width: 8px;
  }
  
  ::-webkit-scrollbar {
  	height: 8px; width: 5px;
  	background-color: {color:scrollbar};
  }
  
  ::-webkit-scrollbar-track {
    		-webkit-box-shadow: inset 0 0 1px rgba(192,192,192,0.7);
    		border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb {
  	background: #000;
  	border: 3px double #EBDADA;
  	-webkit-border-radius:5px;
  	border-radius:5px;
  	-moz-border-radius:5px;
  }
    
    
    
    
    
/*----------------------------------------- 
// responsive 
-----------------------------------------*/

  @media only screen and (max-width: 1770px) {
    #navdisplay {
      left:50px;
    }
    
    
    #splash {
      margin-left:200px;
    }
    
      
    #nav {
      right:200px;
    }
    
    .page {
      width:auto;
    }
  }
      
  @media only screen and (max-width: 1400px) {
    .hidden {
      display:none;
    }
    
    
  }
  
      
  @media only screen and (max-width: 1100px) {
    
    body {  
      font:8px ms gothic;
   }
  
    #navdisplay {
      left:10px;
    }
    
    .container {
      margin-left:145px;
      width:50%;
    }
    
  }
  
  
  
  @media only screen and (max-width: 1075px) {
    #nav {
      right:3px;
    }

  }