/*----------------------------------------- 
// fonts 
-----------------------------------------*/
  @font-face { 
      font-family: Romantic; 
      src: url(https://cdn.glitch.me/9bbfdfb3-4bfa-4c39-8743-5621c8b9df21/ROMANTIC.TTF); 
  } 
  
  @font-face {
      font-family: PC98;
      src: url(https://files.catbox.moe/i0ns2d.ttf);
  }
  
  @font-face {
      font-family: NIKUKYU;
      src: url(https://files.catbox.moe/4s246x.ttf);
  }

/*----------------------------------------- 
// main 
-----------------------------------------*/
  body {
    font-size:11pt;
    font-family: 'Montserrat', 'Mplus 1p', 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', '游ゴシック' , 
      YuGothic , 'Yu Gothic', 'MS Gothic', sans-serif;
    color: #E4E1E2;
    cursor: crosshair; 
    overflow-x: hidden; 
    overflow-y: auto; 
    background-image:url('https://i.imgur.com/BTcatJR.jpg');
    background-repeat:repeat;
    background-attachment: scroll;
  }
  
  #page {
    width:80%;
    max-width:1150px;
    margin: 0 auto;
  }
  
  #main {
    width:100%;
    height:700px;
  }
  
  #nav {
    display:flex;
    width:810px;
    height:50px;
    text-align:center;
    align-items:center;
    justify-content:space-between;
    margin:0 auto;
    padding:0px 15px 0px 15px;
  }
  
  #nav a {
    font:15pt Romantic;
    letter-spacing:1pt;
  }
  
  .noborder {
    border:none;
  }
  
  table, td {
    margin: 0px; 
    line-height: 18px; 
  }
  
  table { 
    font-size: 16px; 
    color: #666;
    padding: 0px; 
    width:100%;
    max-width: 560px;
    background: none;
  }
  
  td { 
    color: #CCC9CA;
    font-size: 14px; 
    padding: 3px;
  }
  
  #footer {
    font-size:10pt;
    position:static;
    bottom:0;
    color:#999;
    overflow:hidden;
    text-align:center;
    width:100%;
    max-height:100px;
  }
  
  #footer a {
    color:#6E589B;
  }


/*----------------------------------------- 
// main 
-----------------------------------------*/
  .mainc {
    margin:0 auto;
    border:1px solid #000;
    width:810px;
    height:690px;
    overflow:hidden;
    background:#F4F3EE;
    border-radius:10px;
  }
  
  .cards {
    width:100%;
    height:730px;
    overflow:scroll;
    position:relative;
    padding:30px;
  }
  
  .container {
    display:flex;
    flex-flow:column nowrap;
    justify-content:flex-start;
    align-items:center;
    width:500px;
    margin:0 auto !important;
  }
  
  .header {
    width:100%;
    height:250px;
    background-size:526px 372px !important;
    background-position:center center !important; 
    z-index:999;
  }
  
  #updates {
    text-align:left;
    width: 80%;
    height: 80px;
    padding:10px;
    margin-top:30px;
    border: 1px dashed #000;
    border-radius:10px;
    overflow-y:auto;
  }

/*----------------------------------------- 
// styling 
-----------------------------------------*/
  h1, h2 {
    text-shadow: 
    1px 0 0 #443240, 
    0 -1px 0 #443240, 
    0 1px 0 #443240, 
    -1px 0 0 #443240;
  }
  
  
  h1 {
    font-size: 16pt;
    color:#CCC9CA;
    padding: 15px 0px 15px 0px;
  }
  
  h1 i, h1 b {
    text-shadow: none;
  }
  
  h1 i {
    font-size: 16pt;
    background: #141118;
    color: #BE0E81;
    padding: 5px;
    font-style:italic;
  }
  
  h1 b {
    color:#BE0E81;
    background: #CCC9CA;
    font-size: 14pt;
    font-weight: bold;
    padding: 3px;
  }
  
  h2 {
    color:#CCC9CA;
    font-size: 12pt;
  }
  
  a, a:visited {
    color:#FF5555;
    font-family: PC98;
    text-decoration:none;
  }
  
  a:hover {
    color:#1646F1;
  }
  
  a:link, a:visited { 
    font-weight: lighter; 
    color: #ff3265; 
    text-decoration:none;}
  
  a:link:hover { 
    color: #c6dcff; 
    cursor: help; 
    text-decoration:none;}
  
  b { 
    font-weight: bold; 
    color: #a5c5f7; }
  
  i { 
    font-weight: lighter; 
    font-style: italic; 
    font: 9pt meiryo; 
    color:#333; }
  
    
  .flexcol, .flexrow {
    display:flex;
  }
  
  
  .flexcol {
    flex-flow:column nowrap;
  }
  
  .flexrow {
    flex-flow: row nowrap;
  }
  
  .flexcenter {
      justify-content:flex-start;
  }
  
  .txtcenter {
      text-align:center;
  }
  
  .center {
    margin:0 auto;
  }
  
  .break-l {
    height:100px;    
  }
  
  
  .break-s {
    height:30px;    
  }



/*----------------------------------------- 
// card type
-----------------------------------------*/  
  .collectcount, table, td {
  border: 1px solid #39353D;
  }
  
  .collectcount, table {
  	  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  }
  
  .collectcount, td {
  	  background-color: rgba(63, 58, 74, 0.3);
  }
  
  .collectcount, .missing {
    width:100%;
  }
  
  .collectcount {
    border-radius:15px;
    padding:10px;
    height:auto;
  }
  
  .rareimg {
    display:block;
    margin: 0 auto;
    max-height:100px;
    max-width:100px;
  }
  	
  .collected, .dwn, .own {
    background-position:right center;
    background-repeat:no-repeat;
  }
  
  .collected {
    background-size:45px;
  }
  
  .dh, .hv {
    text-align:center;
    font-size:6pt;
  }
  
  .hv {
    background-color:#6E589B !important;
  }
  
  .hv::after {
    content:'✓';
  }
  
  .dh {
    background:none !important;
  }
  
  .dh::after {
    content:'✖';
  }
    
  
  .rarity {
    text-align:center;
    background:none !important;
    background-color: rgba(14, 12, 16, 0.6) !important;;
    color:#947382;
  }
  
  .code {
    background:none !important;
    background-color:#19151D !important;
    font-weight:bold;
    color:#666;
    font:6pt verdana !important;
  }


/*----------------------------------------- 
// specific styling 
-----------------------------------------*/  
 /* volume one style */ 
  .vol1 {
    background: #15213B;
	background-image:url('/img/crk/v1_bg.jpg');
  }

  .vol1 h1 {
    color: #FCF2EA;
    text-shadow: 
    1px 0 0 #65456A, 
    0 -1px 0 #65456A, 
    0 1px 0 #65456A, 
    -1px 0 0 #65456A;
  }
  
 .vol1 h1 i {
    background: #65456A;
    color: #DEA664;
  }
  
  h1 b {
    color:#DEA664;
    background: #FCF2EA;
  }
  
  .vol1 h2 {
    color:#FCF2EA;
  }
  
  .vol1 .own {
    background-color:#C2937A !important;
  }
  
  .vol1 .rarity {
    background-color: rgba(14, 12, 16, 0.6) !important;;
    color:#D577A0;
  }
  
  .vol1 .code {
    color:#FCF2EA;
    background-color:#7C635F !important;
  }
  
  .vol1 table {
    border: 1px solid #65456A;
  }
  
  .vol1 td { 
    color:#EBE4D1;
  	background-color: rgba(14, 12, 16, 0.3);
  }
    
/* volume one style end */



/* volume two style */ 
  .vol2  {  
    background: #15213B;
    background-image:url('/img/crk/v2_bg.jpg');
  }
  
  .vol2 h1 {
    color:#fff;
  }
  
  .vol2 h1 i {
    background: #141118;
    color: #738CDE;
  }
  
  .vol2 h1 b {
    color:#738CDE;
    background: #E8F1FA;
  }
  
  .vol2 h2 {
    color:#F3EAE4;
    text-shadow: 
    1px 0 0 #141118, 
    0 -1px 0 #141118, 
    0 1px 0 #141118, 
    -1px 0 0 #141118;
  }
  
  .vol2 .own {
    background-color:#A7ADDF !important;
  }
  
  .vol2 .rarity {
    background-color: rgba(14, 12, 16, 0.6) !important;;
    color:#697FB0;
  }
  
  .vol2 table {
    border: 1px solid #435F8B;
  }
  
  .vol2 td { 
    color:#171D29;
  	background-color: rgba(199, 223, 249, 0.3);
  }
  
  
  .vol2 .code {
    color:#B0C6D6;
    background-color:#656788 !important;
  }
/* volume two style end */ 



/* volume three style (default style) */ 
  .vol3 {  
    background: #15213B;
    background-image:url('https://i.imgur.com/BTcatJR.jpg');
  }
  
  .vol3 h1 b {
      color:#BE0E81;
      background: #CCC9CA;
  }
/* volume three style end */ 

/*----------------------------------------- 
// 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 #887766;
  	-webkit-border-radius:5px;
  	border-radius:5px;
  	-moz-border-radius:5px;
  }