@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap');

/* ---- VARS ---- */
 :root{
   --titleColor: hsl(219, 44%, 57%);
   --subtitleColor: hsl(56, 100%, 10%);
   --lgurl: url(https://scp-jp-storage.wdfiles.com/local--files/file%3A5644609-150-txz2/81UO.png);
}

/* ---- SITE BANNER ---- */
 #header,
 div#header{
     background-image: none;
}

 #header::before{
     position: absolute;
     width: 100%;
     height: 100%;
     content: "";

     background-image: var(--lgurl);
     background-position: center top;
     background-repeat: no-repeat;
     background-size: auto 10.55em;
     opacity: .40;
}

 #header h1,
 #header h2{
     float: none;
     margin-left: 0;

     text-align: center;
}

 #header h1 span,
 #header h2 span{
   /* Hide the Existing Text */
     display: none;
}

 #header h1 a::before{
     font-family: 'Shippori Mincho',serif;
}
 #header h2::before{
   /* Style the New Text */
     font-family: 'Zen Old Mincho',serif;
}

 #header h1 a::before{
     position: relative;
     bottom: .15em;

     color: var(--titleColor);

     font-size: 130%;
     font-weight: 700;
     text-shadow:
   -1.5px -1.5px 0 rgb(242,242,242),  
    1.5px -1.5px 0 rgb(242,242,242),
    -1.5px 1.5px 0 rgb(242,242,242),
     1.5px 1.5px 0 rgb(242,242,242);
}

 #header h2::before{
     position: relative;
     top: .1em;

     color: var(--subtitleColor);

     font-size: 140%;
     font-weight: 400;
     text-shadow:
   -0.5px -0.5px 0 rgb(242,242,242),  
    0.5px -0.5px 0 rgb(242,242,242),
    -0.5px 0.5px 0 rgb(242,242,242),
     0.5px 0.5px 0 rgb(242,242,242);
}

 #header h1 a::before{
   /* Set the New Text's Content From Variable */
     content: var(--header-title, "Site-81UO");
}

 #header h2::before{
     content: var(--header-subtitle, "死者于此开口说话");
}

 div#container-wrap {
background: url(https://scp-jp-storage.wdfiles.com/local--files/file%3A5644609-152-xhsj/Background.png) top left repeat-x;
}

/* ---- SEARCH ---- */
 #search-top-box{
     top: 1em;
     right: 0;
}

 #search-top-box-form input.button{
     margin-right: 0;
}

 #search-top-box-input,
 #search-top-box-input:hover,
 #search-top-box-input:focus,
 #search-top-box-form input[type=submit],
 #search-top-box-form input[type=submit]:hover,
 #search-top-box-form input[type=submit]:focus{
     border-radius: 0;
     box-shadow: none;

     font-size: 100%;
}

/* ---- TOP BAR ---- */
 #top-bar{
     right: 0;
     display: flex;
     justify-content: center;
}

 #top-bar ul li ul{
     border-bottom: 1px solid hsl(0, 0%, 40%);
     box-shadow: none;
}

/* ---- LOGIN ---- */
 #login-status{
     top: 1.1em;
     right: initial;

     color: black;
}

#login-status a {
      color: black;
}

#login-status ul a {
      color: black;
}
 #account-topbutton{
      color: black;
      background: #ccc;
      font-size: 100%;
}

/* ---- SIDE BAR ---- */
 #interwiki a {
    color: #6283C2;
}

/* ---- TABVIEW ----*/
div.yui-navset div.yui-content {
    background: rgb(255, 255, 255);
    background-image: none;
    margin: 0em 0em 1em 0em;
    border: none;
    box-shadow: rgb(0 0 0 / 24%) 0 2px 5px;
}
div.yui-navset ul.yui-nav a,
div.yui-navset div.yui-navset-top ul.yui-nav a {
    background: rgb(255, 255, 255);
    color: var(--titleColor);
    background-image: none;
}
.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav {
    border-color: var(--titleColor);
}
div.yui-navset ul.yui-nav a:hover,
div.yui-navset ul.yui-nav a:focus {
    background: rgb(217, 217, 217);
    color: #ff0000;
    background-image: none;
    text-decoration: none;
}

div.yui-navset ul.yui-nav .selected a,
div.yui-navset ul.yui-nav .selected a:focus,
div.yui-navset ul.yui-nav .selected a:hover {
    background: rgb(0, 1, 108);
    color: #FFFFFF;
    background-image: none;
}

#page-content .yui-nav a {
  text-decoration: none;
}

/* ---- MOBILE DISPLAY ---- */
 @media (max-width: 767px){
     #search-top-box{
          top: 1.85em;
          width: unset;
    }

     .mobile-top-bar{
          position: relative;
          left: 0;
          display: flex;
          justify-content: center;
    }

     #login-status{
          top: 0;
          right: 0;
    }

     #header .printuser{
          font-size: 0;
    }

     #header .printuser img.small{
          margin: 0;

          transform: translate(6px, 4px);
    }

     #my-account{
          display: none;
    }

     #account-topbutton{
          margin-left: 2px;
    }
}

/* ---- LINK ---- */

a {
    color: #6283C2;
}

a.newpage {
    color: #00AEEF;
}

#side-bar a:visited {
    color: #6283C2;
}

a:visited {
    color: #6283C2;
}