// ==============================
// Override Variables
// 覆盖变量
// ==============================

@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap&subset=latin-ext');
$global-font-family: Ubuntu;

@import url('https://fonts.googleapis.com/css?family=JetBrains+Mono:400,700&display=swap&subset=latin-ext');
$code-font-family: JetBrains Mono;

//@import url("Stratum2WebBold.woff");
@font-face {
    font-family: Stratum2;
    src: url('/fonts/Stratum2WebBold.woff');
}

$header-title-font-family: Stratum2;

header {
    font-family: var(--header-title-font-family);

    @supports ((-webkit-backdrop-filter:blur(var(--header-background-blur ))) or (backdrop-filter:blur(var(--header-background-blur )))) {
        backdrop-filter: blur(5px);
    }

    border-radius: 100px;
    top: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;

    @media only screen and (max-width: 680px) {
        border-radius: 0px;
        top: 0px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .header-title {
        font-style: italic;
        text-transform: uppercase;
    }

    .search {
        position: relative;
      
        input {
          background-color: transparent;
          [theme=dark] & {
            background-color: transparent;
          }
        }
    }    
}

.single {
    .single-title {
        font-family: var(--header-title-font-family);
        text-transform: uppercase;
    }
}

.archive {
    .single-title {
        margin: 2rem 0 .5rem;
        font-family: var(--header-title-font-family);
        text-transform: uppercase;
    }
}

.special {
    margin: 2rem 0 .5rem;
    .single-title {
        font-family: var(--header-title-font-family);
        text-transform: uppercase;
    }
}

$global-background-color: #F7FFF7;
$global-background-color-dark: #343434;

// Color of the text
$global-font-color: #161209;
$global-font-color-dark: #a9a9b3;

// Color of the secondary text
$global-font-secondary-color: #a9a9b3;
$global-font-secondary-color-dark: #5d5d5f;

// Color of the link
$global-link-color: #2F3061;
$global-link-color-dark: #467f99;

// Color of the hover link
$global-link-hover-color: #c4b154;
$global-link-hover-color-dark: #e6d063;

// Color of the border
$global-border-color: #f0f0f0;
$global-border-color-dark: #363636;
// ========== Global ========== //

// ========== Scrollbar ========== //
// Color of the scrollbar
$scrollbar-color: #87878d;

// Color of the hover scrollbar
$scrollbar-hover-color: #a9a9b3;
// ========== Scrollbar ========== //

// ========== Selection ========== //
// Color of the selected text
$selection-color: rgba(53, 166, 247, 0.25);
$selection-color-dark: rgba(50, 112, 194, 0.4);
// ========== Selection ========== //

// ========== Header ========== //
// Color of the header background
$header-background-color: rgba(220, 220, 220, 0.8);
$header-background-color-dark: rgba(37, 38, 39, 0.8);

// Color of the hover header item
$header-hover-color: #161209;
$header-hover-color-dark: #fff;

// Color of the search background
$search-background-color: #e9e9e9;
$search-background-color-dark: #363636;
// ========== Header ========== //

// ========== Single Content ========== //

// Color of the single link
$single-link-color: #2d96bd;
$single-link-color-dark: #55bde2;

// Color of the hover single link
$single-link-hover-color: #c4b154;
$single-link-hover-color-dark: #e6d063;

// Color of the table background
$table-background-color: #fff;
$table-background-color-dark: #272c34;

// Color of the table thead
$table-thead-color: #ededed;
$table-thead-color-dark: #20252b;

// Color of the blockquote
$blockquote-color: #6bd6fd;
$blockquote-color-dark: #59c5ec;
// ========== Single Content ========== //

// ========== Pagination ========== //
// Color of the link in pagination
$pagination-link-color: #2d96bd;
$pagination-link-color-dark: #a9a9b3;

// Color of the hover link in pagination
$pagination-link-hover-color: #000;
$pagination-link-hover-color-dark: #fff;
// ========== Pagination ========== //

// Color of the code
$code-color: #2F3061;
$code-color-dark: #6CA6C1;

// Color of the code background
$code-background-color: rgb(220, 220, 220);
$code-background-color-dark: rgb(37, 38, 39);

$code-info-color: #9c9c9c;
$code-info-color-dark: #b1b0b0;