/* ===== ===== ===== =====
   Variables for uk's Gray Theme 2.0

      author:     ukwhatn
      target version:    1.0.1

      copyright: ukwhatn
      license:     MIT License

      ---- ----

      *You can't use this variables alone.

   ===== ===== ===== ===== */

/* IMPORT OPEN COLOR VARIABLES */

@import url('//ukwhatn-tp.wikidot.com/css:open-color/code/1');

/* IMPORT CUSTOM FONTS */

@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:100,300,400,700,900&display=swap&subset=japanese');

/* DEFAULT SETTINGS */

:root {
   --rem: 16px;
   --default-font-size: 0.95rem;
   --default-font-family: sans-serif;
   --default-monoscape-family: Courier, monospace;
}

@media (max-width: 896px) {}

@media (max-width: 480px) {}

/* DEFAULT STRUCTURE SETTINGS */

:root {
   --default-nest-size: 1rem;
   --default-block-margin: 1rem 0;
   --default-block-padding: 0.5rem;
   --default-block-radius: 1px;
}

/* DEFAULT COLORS */

:root {
   --default-font-color: var(--oc-gray-9);
   --default-background: #f4f5f7;
   --default-accent-color: var(--oc-orange-6);
   --default-accent-color-light: var(--oc-orange-4);
   --default-9-color: var(--oc-gray-9);
   --default-8-color: var(--oc-gray-8);
   --default-7-color: var(--oc-gray-7);
   --default-6-color: var(--oc-gray-6);
   --default-5-color: var(--oc-gray-5);
   --default-4-color: var(--oc-gray-4);
   --default-3-color: var(--oc-gray-3);
   --default-2-color: var(--oc-gray-2);
   --default-1-color: var(--oc-gray-1);
   --default-0-color: var(--oc-gray-0);
   --default-dark-color: var(--default-9-color);
   --default-mid-color: var(--default-4-color);
   --default-light-color: var(--default-3-color);
   --default-thin-color: var(--default-2-color);
}

/* TEXT FORMATTING */

:root {
   --a-color: var(--oc-orange-9);
   --a-newpage-color: var(--default-accent-color-light);
   --a-hover-decoration: none;
   --heading-margin-y: 0.5rem;
   --heading-family: 'M PLUS 1p', var(--default-font-family);
   --heading-weight: 400;
   --h1-size: 1.802em;
   --h2-size: 1.602em;
   --h3-size: 1.424em;
   --h4-size: 1.266em;
   --h5-size: 1.125em;
   --h6-size: 1em;
   /*12.44px*/
   --h1-margin-left: calc(-1 * var(--default-nest-size));
   --h2-margin-left: calc(-1 * var(--default-nest-size) * 0.5);
}

/*-- ANIMATION SETTINGS --*/

:root {
   --default-transition-time: 0.5s;
   --side-nav-transition-time: var(--default-transition-time);
   --global-nav-transition-time: var(--default-transition-time);
}

/*-- BLOCK FORMATTING --*/

:root {
   --quote-margin: var(--default-block-margin);
   --quote-padding: var(--default-block-padding);
   --quote-border: dashed 0.5px var(--default-mid-color);
   --quote-background: var(--default-thin-color);
   --quote-radius: var(--default-block-radius);
   --quote-margin-left: var(--default-nest-size);
   --code-margin: var(--default-block-margin);
   --code-padding: var(--default-block-padding);
   --code-border: dashed 0.5px var(--default-mid-color);
   --code-background: var(--default-thin-color);
   --code-radius: var(--default-block-radius);
   --code-family: var(--default-monoscape-family);
   --code-margin-left: var(--default-nest-size);
}

/*-- WRAPPER STRUCTURE --*/

:root {
   --max-content-width: 1180px;
   --content-side-margin: 0.25rem;
   --header-height: 4.75rem;
   --global-nav-height: 1.25rem;
   --global-nav-position-top: calc(var(--header-height) - var(--global-nav-height));
   --content-margin-top: 1rem;
   --side-nav-width: 14rem;
   --side-nav-and-content-margin: 1rem;
   --main-content-margin-left: calc(var(--side-nav-width) + var(--side-nav-and-content-margin));
   --footer-width: calc(100% - calc(var(--content-side-margin) * 2));
   --license-area-padding-x: 1rem;
}

@media (max-width: 896px) {
    :root {
      --content-side-margin: 0.1rem;
      --h1-margin-left: -0.4em;
      --h2-margin-left: -0.2em;
    }
}

/*-- HEADER BACKGROUND --*/

:root {
   --header-background: var(--default-dark-color);
}

/*-- HEADER LOGO --*/

:root {
   --header-logo-image: url("http://scp-jp-storage.wdfiles.com/local--files/file%3A3396310-54-tma0/logo-gray.svg");
   --header-logo-margin-x: 0.5rem;
   --header-logo-margin-y: 0.5rem;
   --header-logo-x: var(--header-logo-margin-x);
   --header-logo-y: var(--header-logo-margin-y);
   --header-logo-size: calc(var(--header-height) - var(--global-nav-height) - var(--header-logo-margin-y));
}

/*-- HEADER TITLE --*/

:root {
   --header-logo-and-title-margin: 0.25rem;
   --header-top-margin: 0.75rem;
   --header-title-margin-x: calc(var(--header-logo-x) + var(--header-logo-size) + var(--header-logo-and-title-margin));
   --header-title-margin-y: var(--header-top-margin);
   --header-h2-balance: 0.8;
   --header-h1-color: var(--default-thin-color);
   --header-h1-family: 'M PLUS 1p', var(--default-font-family);
   --header-h1-weight: 700;
   --header-h1-size: 1.7rem;
   --header-h2-color: var(--default-accent-color);
   --header-h2-family: 'M PLUS 1p', var(--default-font-family);
   --header-h2-weight: 300;
   --header-h2-size: calc( calc(var(--header-height) - var(--global-nav-height) - var(--header-top-margin) - var(--header-h1-size)) * var(--header-h2-balance));
}

/*-- HEADER ACCOUNT BOX --*/

:root {
   --header-loginstatus-size: var(--default-font-size);
   --header-accountname-color: var(--default-thin-color);
   --header-myaccount-color: var(--default-thin-color);
   --header-avatar-opacity: 1;
   --header-menubutton-size: 0.5rem;
   --header-menubutton-color: var(--default-thin-color);
   --header-menubutton-border: solid 1px var(--header-menubutton-color);
   --header-menubutton-background: transparent;
   --header-menubutton-margin-left: 1px;
   /*img: 1px, txt: -5px*/
   --header-custom-menubutton-text: 'MENU';
   --header-custom-menubutton-size: 0;
   --header-custom-menubutton-family: var(--default-font-family);
   --header-custom-menubutton-weight: normal;
   --header-accountmenu-width: 7.5rem;
   --header-accountmenu-background: var(--header-background);
   --header-accountmenu-border: solid 0.5px var(--default-mid-color);
   --header-accountmenu-color: solid 0.5px var(--default-mid-color);
   --header-accountmenu-padding: 0.25rem 0.5rem;
   --header-accountmenu-hover-color: var(--default-dark-color);
   --header-accountmenu-hover-background: var(--default-mid-color);
}

@media (max-width: 896px) {
   :root {
      --header-loginstatus-size: 0.7rem;
      --header-avatar-opacity: 0;
      --header-menubutton-size: 0px;
      --header-menubutton-border: none;
      --header-menubutton-margin-left: -5px;
      /*img: 1px, txt: -5px*/
      --header-custom-menubutton-text: '| Menu';
      --header-custom-menubutton-size: 0px;
   }
}

/*-- HEADER SEARCH BOX --*/

:root {
   --header-search-box-margin-bottom: 2.5px;
   --header-search-box-input-width: 10rem;
   --header-search-box-input-height: 1.25rem;
   --header-search-box-input-background: transparent;
   --header-search-box-input-focus-background: transparent;
   --header-search-box-input-border: solid 0.5px var(--default-mid-color);
   --header-search-box-input-color: var(--default-thin-color);
   --header-search-box-input-size: 1em;
   --header-search-box-input-placeholdercolor: var(--default-mid-color);
   --header-search-box-input-placeholdersize: var(--header-search-box-input-size);
   --header-search-box-button-display: none;
   --header-search-box-button-width: 4rem;
   --header-search-box-button-height: var(--header-search-box-input-height);
   --header-search-box-button-background: transparent;
   --header-search-box-button-border: var(--header-search-box-input-border);
   --header-search-box-button-color: var(--header-search-box-input-color);
}

@media (max-width:896px) {
   /* NO DISPLAYED */
}

@media (max-width: 480px) {
   /* NO DISPLAYED */
}

/*-- GLOBAL NAVIGATION --*/

:root {
   --global-nav-item-count: 3;
   --global-nav-item-size: var(--default-font-size);
   --global-nav-item-width: calc( 100% / var(--global-nav-item-count));
   --global-nav-item-color: var(--default-mid-color);
   --global-nav-item-background: var(--default-dark-color);
   --global-nav-item-hover-color: var(--default-thin-color);
   --global-nav-item-hover-background: var(--default-dark-color);
   --global-nav-sub-border: solid 0.5px var(--default-dark-color);
   --global-nav-sub-item-heading-line-height: 2;
   --global-nav-sub-item-heading-border: solid 2px var(--default-7-color);
   --global-nav-sub-item-heading-background: var(--default-9-color);
   --global-nav-sub-item-heading-padding-left: calc( var(--global-nav-sub-item-padding-left) / 2);
   --global-nav-sub-item-heading-color: var(--global-nav-item-color);
   --global-nav-sub-item-heading-size: calc( var(--global-nav-item-size) * 1.1);
   --global-nav-sub-item-heading-weight: bold;
   --global-nav-sub-item-height: 2em;
   --global-nav-sub-item-padding-left: 1rem;
   --global-nav-sub-item-background: var(--global-nav-item-hover-background);
   --global-nav-sub-item-border: solid 0.1px var(--default-8-color);
   --global-nav-sub-item-hover-background: var(--default-8-color);
}

/*-- SIDE NAVIGATION --*/

:root {
   --side-nav-background: transparent;
   --side-nav-border: none;
   --side-nav-heading-size: 1.05em;
   --side-nav-heading-line-height: 1.2;
   --side-nav-heading-margin-top: 1em;
   --side-nav-heading-border: solid 0.5px var(--default-dark-color);
   --side-nav-heading-color: inherit;
   --side-nav-item-padding-left: 0.5rem;
   --side-nav-item-line-height: 2.5;
   --side-nav-item-size: 0.9em;
   --side-nav-item-color: var(--default-font-color);
   --side-nav-item-background: transparent;
   --side-nav-item-color-hover: var(--default-thin-color);
   --side-nav-item-background-hover: var(--default-dark-color);
   --side-nav-item-twitter-logo-color: var(--side-nav-item-color);
   --side-nav-item-twitter-logo-color-hover: var(--side-nav-item-color-hover);
}

/*-- MAIN CONTENTS --*/

:root {
   --page-title-margin-right: 1rem;
   --page-title-margin-bottom: 0.75rem;
   --page-title-size: 1.803em;
   --page-title-border: solid 0.5px var(--default-dark-color);
   --page-title-family: 'M PLUS 1p', var(--default-font-family);
   --page-title-weight: 300;
   --page-content-family: var(--default-font-family);
   --page-content-margin-top: 0.5rem;
   --page-info-size: 0.6rem;
   --page-info-margin-x: 3px;
   --page-info-margin-y: 3px;
   --page-tags-margin-top: 10px;
   --page-tags-margin-left: 2px;
   --page-tags-border: solid 1px var(--default-light-color);
   --page-tags-padding-top: 2px;
   --page-tags-between: 0.25rem;
   --page-tags-size: 0.7rem;
   --page-tags-color: var(--a-color);
   --page-watch-options-size: 0.85em;
   --page-watch-options-margin-y: 0.5em;
}

/*-- FOOTER --*/

:root {
   --footer-color: var(--default-thin-color);
   --footer-background: var(--default-dark-color);
   --footer-a-color: var(--default-accent-color);
   --footer-options-size: 0.7rem;
   --footer-options-padding-x: 5px;
   --footer-options-bar-color: var(--default-mid-color);
}

/*-- LICENSE AREA --*/

:root {
   --license-area-color: var(--default-thin-color);
   --license-area-background: var(--default-dark-color);
   --license-area-a-color: var(--default-accent-color);
}

/*-- COMPONENTS --*/

:root {
   --default-button-size: var(--default-font-size);
   --default-button-line-height: 2;
   --default-button-color: var(--default-thin-color);
   --default-button-border: solid 1px var(--default-thin-color);
   --default-button-background: var(--default-dark-color);
   --default-button-color-hover: var(--default-dark-color);
   --default-button-border-hover: solid 1px var(--default-thin-color);
   --default-button-background-hover: var(--default-accent-color);
   --standalone-button-size: var(--default-button-size);
   --standalone-button-line-height: var(--default-button-line-height);
   --standalone-button-color: var(--default-button-color);
   --standalone-button-border: var(--default-button-border);
   --standalone-button-background: var(--default-button-background);
   --standalone-button-color-hover: var(--default-button-color-hover);
   --standalone-button-border-hover: var(--default-button-border-hover);
   --standalone-button-background-hover: var(--default-button-background-hover);
   --page-options-button-size: var(--default-button-size);
   --page-options-button-line-height: var(--default-button-line-height);
   --page-options-button-color: var(--default-button-color);
   --page-options-button-border: var(--default-button-border);
   --page-options-button-background: var(--default-button-background);
   --page-options-button-color-hover: var(--default-button-color-hover);
   --page-options-button-border-hover: var(--default-button-border-hover);
   --page-options-button-background-hover: var(--default-button-background-hover);
   --action-area-border: solid 0.5px var(--default-light-color);
   --action-area-background: var(--default-thin-color);
   --action-area-close-button-size: var(--default-button-size);
   --action-area-close-button-line-height: var(--default-button-line-height);
   --action-area-close-button-color: var(--default-button-color);
   --action-area-close-button-border: var(--default-button-border);
   --action-area-close-button-background: var(--default-button-background);
   --action-area-close-button-color-hover: var(--default-button-color-hover);
   --action-area-close-button-border-hover: var(--default-button-border-hover);
   --action-area-close-button-background-hover: var(--default-button-background-hover);
   --action-area-button-size: var(--default-button-size);
   --action-area-button-line-height: var(--default-button-line-height);
   --action-area-button-color: var(--default-button-color);
   --action-area-button-border: var(--default-button-border);
   --action-area-button-background: var(--default-button-background);
   --action-area-button-color-hover: var(--default-button-color-hover);
   --action-area-button-border-hover: var(--default-button-border-hover);
   --action-area-button-background-hover: var(--default-button-background-hover);
   --editpage-textsize: 0.8rem;
   --tab-content-background: var(--default-thin-color);
   --tab-button-background: var(--default-thin-color);
   --tab-button-color: var(--default-dark-color);
   --tab-button-selected-background: var(default-dark-color);
   --tab-button-selected-color: var(default-thin-color);
   --tab-button-focused-background: var(--default-dark-color);
   --tab-border: var(--default-dark-color);
}

/*-- OTHER --*/

:root {
   --hr-color: var(--default-mid-color);
}