/* =========================================================
   EULC // CYBERPUNK TERMINAL
   SimpleMemory
   FINAL // BACKGROUND + SIDEBAR + HUD
   ========================================================= */

:root {
    --e-yellow: #fcee0a;
    --e-yellow-2: #ffd400;
    --e-cyan: #00f0ff;
    --e-pink: #ff2bd6;
    --e-green: #9eff00;

    --e-white: #f5f6f7;
    --e-text: #d9dde1;
    --e-light: #c8cfd5;
    --e-gray: #939ba3;
}


/* =========================================================
   GLOBAL
   ========================================================= */

html {
    min-height: 100%;
    background: #030405 !important;
    scroll-behavior: smooth;
}


body {
    min-height: 100%;
    margin: 0 !important;

    color: var(--e-text) !important;

    font-family:
        "Bahnschrift",
        "Arial Narrow",
        "Microsoft YaHei",
        Arial,
        sans-serif !important;

    background: #030405 !important;
}


/* =========================================================
   HOME
   ========================================================= */

#home {
    position: relative !important;

    isolation: isolate !important;

    width: 1200px !important;
    max-width: calc(100% - 30px);

    margin: 28px auto !important;
    padding: 0 !important;

    background: transparent !important;
}


/* =========================================================
   ★ 动态背景
   ========================================================= */

#eulc-bg-layer {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    z-index: 0 !important;

    pointer-events: none !important;

    overflow: hidden !important;

    background-color: #020304 !important;

    background-image:

        /* 黄色网格 */

        linear-gradient(
            rgba(252,238,10,.12) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(252,238,10,.12) 1px,
            transparent 1px
        ),

        /* 左上青色 */

        radial-gradient(
            circle at 6% 15%,
            rgba(0,240,255,.27),
            transparent 25%
        ),

        /* 右上粉色 */

        radial-gradient(
            circle at 94% 20%,
            rgba(255,43,214,.22),
            transparent 28%
        ),

        /* 底部黄色 */

        radial-gradient(
            circle at 50% 100%,
            rgba(252,238,10,.15),
            transparent 32%
        ),

        /* 左下青色 */

        radial-gradient(
            circle at 3% 83%,
            rgba(0,240,255,.13),
            transparent 24%
        ),

        /* 右下粉色 */

        radial-gradient(
            circle at 97% 82%,
            rgba(255,43,214,.10),
            transparent 25%
        ),

        /* 斜向工业光带 */

        linear-gradient(
            128deg,
            transparent 0%,
            transparent 22%,
            rgba(0,240,255,.055) 36%,
            transparent 45%,
            rgba(252,238,10,.045) 55%,
            transparent 64%,
            rgba(255,43,214,.05) 75%,
            transparent 86%
        ),

        /* 基础背景 */

        linear-gradient(
            135deg,
            #020303 0%,
            #0b0e12 45%,
            #040507 100%
        );


    background-size:
        44px 44px,
        44px 44px,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        165% 165%,
        100% 100%;


    background-position:
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0;


    animation:
        eulcBackgroundMove
        18s linear infinite;
}


/* 背景暗角 */

#eulc-bg-layer::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 28%,
            rgba(0,0,0,.15) 58%,
            rgba(0,0,0,.42) 100%
        );
}


/* 扫描光 */

#eulc-bg-layer::after {
    content: "";

    position:
        absolute;

    left:
        0;

    top:
        -10%;

    width:
        100%;

    height:
        100px;

    pointer-events:
        none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(0,240,255,.14),
            rgba(252,238,10,.05),
            transparent
        );

    animation:
        eulcScanLine
        7s linear infinite;
}


@keyframes eulcBackgroundMove {

    0% {
        background-position:
            0 0,
            0 0,
            0 0,
            0 0,
            0 0,
            0 0,
            0 0,
            0 0,
            0 0;
    }

    50% {
        background-position:
            22px 20px,
            -20px 22px,
            4% 2%,
            -4% 3%,
            2% -2%,
            -2% 2%,
            2% -2%,
            12% 8%,
            0 0;
    }

    100% {
        background-position:
            44px 40px,
            -40px 44px,
            0 0,
            0 0,
            0 0,
            0 0,
            0 0,
            24% 16%,
            0 0;
    }
}


@keyframes eulcScanLine {

    0% {
        transform:
            translateY(-15%);

        opacity:
            0;
    }

    10% {
        opacity:
            .9;
    }

    50% {
        opacity:
            .5;
    }

    90% {
        opacity:
            .9;
    }

    100% {
        transform:
            translateY(1150%);

        opacity:
            0;
    }
}


/* =========================================================
   ★★★ 左右 HUD
   ========================================================= */

.eulc-side-hud {
    position:
        fixed !important;

    top:
        50% !important;

    transform:
        translateY(-50%);

    width:
        38px !important;

    height:
        64vh !important;

    min-height:
        420px;

    max-height:
        680px;

    z-index:
        15 !important;

    pointer-events:
        none !important;

    color:
        #95a0a9;

    font-family:
        "Consolas",
        monospace;

    font-size:
        8px;

    letter-spacing:
        1px;

    opacity:
        .72;

    box-sizing:
        border-box;
}


.eulc-side-hud.left {
    left:
        10px !important;
}


.eulc-side-hud.right {
    right:
        10px !important;
}


/* 主竖线 */

.eulc-hud-track {
    position:
        absolute;

    top:
        8%;

    bottom:
        8%;

    left:
        50%;

    width:
        1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(252,238,10,.7),
            rgba(0,240,255,.8),
            rgba(255,43,214,.6),
            rgba(252,238,10,.7),
            transparent
        );

    box-shadow:
        0 0 8px
        rgba(0,240,255,.35);
}


/* 外框 */

.eulc-hud-frame {
    position:
        absolute;

    inset:
        0;

    border-left:
        1px solid
        rgba(252,238,10,.24);

    border-right:
        1px solid
        rgba(252,238,10,.24);
}


/* 顶部 / 底部横线 */

.eulc-hud-frame::before,
.eulc-hud-frame::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    width:
        100%;

    height:
        1px;

    background:
        rgba(252,238,10,.42);
}


.eulc-hud-frame::before {
    top:
        0;
}


.eulc-hud-frame::after {
    bottom:
        0;
}


/* 顶端角标 */

.eulc-hud-cap {
    position:
        absolute;

    top:
        0;

    left:
        50%;

    width:
        15px;

    height:
        15px;

    transform:
        translate(-50%, -1px);

    border-left:
        2px solid
        var(--e-yellow);

    border-top:
        2px solid
        var(--e-yellow);
}


/* 底端角标 */

.eulc-hud-cap-bottom {
    position:
        absolute;

    bottom:
        0;

    left:
        50%;

    width:
        15px;

    height:
        15px;

    transform:
        translate(-50%, 1px);

    border-right:
        2px solid
        var(--e-cyan);

    border-bottom:
        2px solid
        var(--e-cyan);
}


/* 刻度 */

.eulc-hud-ticks {
    position:
        absolute;

    top:
        12%;

    bottom:
        12%;

    left:
        0;

    right:
        0;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    align-items:
        center;
}


.eulc-hud-ticks span {
    display:
        block;

    width:
        16px;

    height:
        1px;

    background:
        rgba(252,238,10,.55);

    opacity:
        .65;
}


.eulc-hud-ticks span:nth-child(2n) {
    width:
        9px;

    background:
        rgba(0,240,255,.55);
}


/* 中间扫描块 */

.eulc-hud-scan {
    position:
        absolute;

    left:
        50%;

    top:
        -12%;

    width:
        24px;

    height:
        75px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(0,240,255,.12),
            rgba(252,238,10,.17),
            transparent
        );

    animation:
        eulcHudScan
        5.5s linear infinite;
}


@keyframes eulcHudScan {

    0% {
        top:
            -12%;

        opacity:
            0;
    }

    12% {
        opacity:
            1;
    }

    82% {
        opacity:
            .8;
    }

    100% {
        top:
            110%;

        opacity:
            0;
    }
}


/* HUD 文字 */

.eulc-hud-label {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(-50%, -50%)
        rotate(-90deg);

    white-space:
        nowrap;

    color:
        #a6b0b8;

    font-size:
        8px;

    letter-spacing:
        2px;

    opacity:
        .85;
}


/* HUD 编号 */

.eulc-hud-id {
    position:
        absolute;

    left:
        50%;

    transform:
        translateX(-50%);

    writing-mode:
        vertical-rl;

    color:
        var(--e-yellow);

    font-size:
        7px;

    letter-spacing:
        2px;

    opacity:
        .8;
}


.eulc-side-hud.left .eulc-hud-id {
    top:
        10%;
}


.eulc-side-hud.right .eulc-hud-id {
    bottom:
        10%;
}


/* =========================================================
   内容层
   ========================================================= */

#navigator,
#eulc-future-header,
#main,
#mainContent,
#sideBar,
#topics,
.day,
#eulc-future-footer,
#footer {
    position:
        relative;

    z-index:
        20;
}


/* =========================================================
   MAIN
   ========================================================= */

#main {
    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;

    text-align:
        left !important;
}


/* =========================================================
   ★ 修复侧边栏位置
   ========================================================= */

#mainContent {
    float:
        left !important;

    width:
        calc(100% - 315px) !important;

    min-height:
        200px;

    margin:
        0 !important;

    padding:
        0 0 10px !important;

    box-sizing:
        border-box !important;
}


#mainContent .forFlow {
    float:
        none !important;

    width:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;
}


/* 侧边栏 */

#sideBar {
    position:
        absolute !important;

    top:
        0 !important;

    right:
        0 !important;

    width:
        285px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    float:
        none !important;

    clear:
        none !important;

    box-sizing:
        border-box !important;

    z-index:
        25 !important;

    background:
        transparent !important;
}


#sideBarMain {
    clear:
        none !important;
}


/* =========================================================
   默认标题隐藏
   ========================================================= */

#blogTitle {
    display:
        none !important;
}


/* =========================================================
   NAV
   ========================================================= */

#navigator {
    margin:
        0 0 22px !important;

    padding:
        0 18px !important;

    min-height:
        50px;

    background:
        rgba(7,8,10,.97) !important;

    border:
        1px solid
        rgba(252,238,10,.25) !important;

    border-radius:
        0 !important;

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.36);
}


#navigator::before {
    content:
        "";

    display:
        block;

    height:
        3px;

    margin:
        0 -18px;

    background:
        repeating-linear-gradient(
            -45deg,
            var(--e-yellow) 0,
            var(--e-yellow) 12px,
            #111 12px,
            #111 24px
        );
}


#navList {
    display:
        flex !important;

    align-items:
        center !important;

    flex-wrap:
        wrap !important;

    gap:
        2px;

    margin:
        0 !important;

    padding:
        0 !important;

    list-style:
        none !important;
}


#navList li {
    margin:
        0 !important;

    padding:
        0 !important;
}


#navList a,
#navList a:visited {
    display:
        block;

    padding:
        14px 19px !important;

    color:
        #d8dde1 !important;

    font-family:
        "Consolas",
        "Microsoft YaHei",
        monospace;

    font-size:
        12px !important;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-decoration:
        none !important;
}


#navList a:hover {
    color:
        var(--e-yellow) !important;

    background:
        rgba(252,238,10,.05);

    text-shadow:
        0 0 9px
        rgba(252,238,10,.50);
}


/* =========================================================
   首页文章
   ========================================================= */

#post_list {
    margin:
        0 !important;
}


.day {
    position:
        relative;

    margin:
        0 0 20px !important;

    padding:
        26px 29px 23px !important;

    overflow:
        hidden !important;

    background:
        linear-gradient(
            145deg,
            rgba(10,13,16,.975),
            rgba(5,7,9,.975)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,.09) !important;

    border-left:
        4px solid
        var(--e-yellow) !important;

    border-radius:
        0 !important;

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.30);

    transition:
        transform .20s ease,
        border-color .20s ease;
}


.day::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    right:
        0;

    width:
        85px;

    height:
        3px;

    background:
        var(--e-yellow);
}


.day::after {
    content:
        "";

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    width:
        48px;

    height:
        2px;

    background:
        var(--e-cyan);
}


.day:hover {
    transform:
        translateX(4px);

    border-color:
        rgba(252,238,10,.40) !important;
}


/* 标题 */

.day .postTitle,
.day .postTitle2 {
    margin:
        0 0 12px !important;

    padding:
        0 !important;
}


.day .postTitle a,
.day .postTitle2 a,
.day .postTitle a:visited,
.day .postTitle2 a:visited {
    color:
        var(--e-white) !important;

    font-size:
        23px !important;

    font-weight:
        800 !important;

    line-height:
        1.42 !important;

    text-decoration:
        none !important;
}


.day .postTitle a:hover,
.day .postTitle2 a:hover {
    color:
        var(--e-yellow) !important;

    text-shadow:
        0 0 10px
        rgba(252,238,10,.40);
}


/* 摘要 */

.day .postCon,
.day .postCon *,
.day .postDesc {
    color:
        #cbd2d8 !important;

    font-size:
        14px !important;

    line-height:
        1.85 !important;
}


/* =========================================================
   ★ 文章底部链接
   ========================================================= */

.day .postDesc a,
.day .postDesc a:link,
.day .postDesc a:visited,
.day .postCon a,
.day .postCon a:link,
.day .postCon a:visited,
#post_list .postDesc a,
#post_list .postDesc a:link,
#post_list .postDesc a:visited {
    color:
        #e8edf1 !important;

    font-weight:
        600 !important;

    text-decoration:
        none !important;

    text-shadow:
        none !important;
}


.day .postDesc a:hover,
.day .postCon a:hover,
#post_list .postDesc a:hover {
    color:
        var(--e-yellow) !important;

    text-shadow:
        0 0 7px
        rgba(252,238,10,.35) !important;
}


.c_b_p_desc_readmore,
.c_b_p_desc_readmore:visited {
    display:
        inline-block;

    margin-top:
        8px;

    padding:
        5px 12px;

    color:
        var(--e-yellow) !important;

    background:
        rgba(252,238,10,.045) !important;

    border:
        1px solid
        rgba(252,238,10,.25) !important;

    text-decoration:
        none !important;
}


.c_b_p_desc_readmore:hover {
    color:
        #000 !important;

    background:
        var(--e-yellow) !important;
}


/* =========================================================
   ★ 侧边栏文字
   只修改颜色，不重新制作侧栏
   ========================================================= */

#sideBar a,
#sideBar a:link,
#sideBar a:visited {
    color:
        #e4e9ed !important;

    text-decoration:
        none !important;

    text-shadow:
        none !important;
}


#sideBar a:hover {
    color:
        var(--e-yellow) !important;

    text-shadow:
        0 0 7px
        rgba(252,238,10,.32) !important;
}


#sideBar .catListTitle,
#sideBar .newsItem h3 {
    color:
        #f2f4f6 !important;
}


#sideBar .catListCount {
    color:
        #b4bcc3 !important;
}


/* =========================================================
   文章详情
   ========================================================= */

#topics {
    padding:
        38px 44px !important;

    background:
        rgba(8,10,12,.975) !important;

    border:
        1px solid
        rgba(255,255,255,.09) !important;

    border-top:
        3px solid
        var(--e-yellow) !important;

    border-radius:
        0 !important;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.35);
}


#topics .postTitle {
    margin-bottom:
        25px !important;

    padding-bottom:
        18px !important;

    border-bottom:
        1px solid
        rgba(252,238,10,.16);
}


#topics .postTitle a,
#topics .postTitle a:visited {
    color:
        var(--e-white) !important;

    font-size:
        32px !important;

    font-weight:
        800 !important;

    text-decoration:
        none !important;
}


#topics .postTitle a:hover {
    color:
        var(--e-yellow) !important;
}


/* =========================================================
   正文
   ========================================================= */

#cnblogs_post_body {
    color:
        #d2d7dc !important;

    font-size:
        16px !important;

    line-height:
        1.95 !important;
}


#cnblogs_post_body p,
#cnblogs_post_body li {
    color:
        #d2d7dc !important;
}


#cnblogs_post_body h1,
#cnblogs_post_body h2 {
    margin:
        40px 0 22px !important;

    padding:
        12px 16px !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            90deg,
            rgba(252,238,10,.08),
            transparent
        );

    border-left:
        4px solid
        var(--e-yellow);
}


#cnblogs_post_body h3 {
    margin:
        30px 0 15px !important;

    padding-left:
        12px;

    color:
        #ffffff !important;

    border-left:
        3px solid
        var(--e-cyan);
}


/* 正文链接 */

#cnblogs_post_body a,
#cnblogs_post_body a:visited {
    color:
        #63f1fb !important;

    text-decoration:
        none !important;

    border-bottom:
        1px dashed
        rgba(0,240,255,.36);
}


#cnblogs_post_body a:hover {
    color:
        var(--e-yellow) !important;

    border-color:
        var(--e-yellow) !important;
}


/* =========================================================
   引用
   ========================================================= */

#cnblogs_post_body blockquote {
    margin:
        25px 0 !important;

    padding:
        16px 20px !important;

    color:
        #c1c8ce !important;

    background:
        rgba(0,240,255,.035) !important;

    border-left:
        3px solid
        var(--e-cyan) !important;
}


/* =========================================================
   CODE
   ========================================================= */

#cnblogs_post_body pre,
.cnblogs-markdown pre {
    margin:
        25px 0 !important;

    padding:
        22px !important;

    overflow-x:
        auto;

    background:
        #030405 !important;

    border:
        1px solid
        rgba(0,240,255,.16) !important;

    border-left:
        3px solid
        var(--e-cyan) !important;

    border-radius:
        0 !important;
}


#cnblogs_post_body code,
.cnblogs-markdown code {
    color:
        #a6f5fc !important;

    font-family:
        "Consolas",
        "Courier New",
        monospace;
}


/* =========================================================
   表格
   ========================================================= */

#cnblogs_post_body table {
    width:
        100%;

    margin:
        25px 0;

    border-collapse:
        collapse;
}


#cnblogs_post_body th {
    padding:
        12px;

    color:
        var(--e-yellow) !important;

    background:
        rgba(252,238,10,.05) !important;

    border:
        1px solid
        rgba(252,238,10,.18) !important;
}


#cnblogs_post_body td {
    padding:
        11px;

    color:
        #c5cbd1 !important;

    border:
        1px solid
        rgba(255,255,255,.07) !important;
}


/* =========================================================
   图片
   ========================================================= */

#cnblogs_post_body img {
    max-width:
        100%;

    height:
        auto;

    border:
        1px solid
        rgba(255,255,255,.10);

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.30);
}


/* =========================================================
   文章底部
   ========================================================= */

#blog_post_info_block,
#blog_post_info_block *,
#post_next_prev,
#post_next_prev *,
#topics .postDesc,
#topics .postDesc *,
#topics .postDesc2,
#topics .postDesc2 * {
    color:
        #dce1e5 !important;
}


#blog_post_info_block a,
#blog_post_info_block a:visited,
#post_next_prev a,
#post_next_prev a:visited,
#topics .postDesc a,
#topics .postDesc a:visited,
#topics .postDesc2 a,
#topics .postDesc2 a:visited {
    color:
        #e6eaed !important;

    text-decoration:
        none !important;
}


#blog_post_info_block a:hover,
#post_next_prev a:hover,
#topics .postDesc a:hover,
#topics .postDesc2 a:hover {
    color:
        var(--e-yellow) !important;
}


/* =========================================================
   ★ EULC 页首
   ========================================================= */

#eulc-future-header {
    position:
        relative !important;

    z-index:
        30 !important;

    margin-bottom:
        22px;

    padding:
        0 30px 26px;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            rgba(8,10,12,.99),
            rgba(16,18,21,.985) 50%,
            rgba(6,7,9,.99)
        ) !important;

    border:
        1px solid
        rgba(252,238,10,.26) !important;

    border-radius:
        0 !important;

    box-shadow:
        0 14px 40px
        rgba(0,0,0,.42);

    isolation:
        isolate;
}


.eulc-hazard-bar {
    position:
        relative;

    z-index:
        5;

    margin:
        0 -30px 22px;

    padding:
        7px 18px;

    color:
        #080808;

    background:
        repeating-linear-gradient(
            -45deg,
            #fcee0a 0,
            #fcee0a 12px,
            #111 12px,
            #111 24px
        );

    font-family:
        "Consolas",
        monospace;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1.5px;
}


.eulc-header-grid,
.eulc-main-title,
.eulc-terminal,
.eulc-info-grid,
.eulc-warning {
    position:
        relative;

    z-index:
        5;
}


.eulc-header-grid {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        12px;

    color:
        #8b949d;

    font-family:
        "Consolas",
        monospace;

    font-size:
        10px;
}


.eulc-dot {
    display:
        inline-block;

    width:
        7px;

    height:
        7px;

    margin-right:
        6px;

    background:
        var(--e-green);

    box-shadow:
        0 0 8px
        var(--e-green);
}


.eulc-green {
    color:
        var(--e-green);
}


.eulc-main-title {
    margin:
        18px 0;
}


.eulc-glitch {
    position:
        relative;

    display:
        inline-block;

    color:
        #f6f7f8;

    font-family:
        "Arial Narrow",
        "Bahnschrift",
        sans-serif;

    font-size:
        72px;

    font-weight:
        950;

    line-height:
        .9;

    letter-spacing:
        7px;

    text-shadow:
        4px 0 rgba(0,240,255,.65),
        -4px 0 rgba(255,43,214,.55);

    animation:
        eulcGlitchPulse
        3.8s steps(1,end)
        infinite;
}


.eulc-glitch::before,
.eulc-glitch::after {
    content:
        attr(data-text);

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        100%;

    overflow:
        hidden;

    pointer-events:
        none;
}


.eulc-glitch::before {
    transform:
        translate(-2px,0);

    color:
        rgba(0,240,255,.78);

    clip-path:
        polygon(
            0 10%,
            100% 10%,
            100% 25%,
            0 25%
        );
}


.eulc-glitch::after {
    transform:
        translate(2px,0);

    color:
        rgba(255,43,214,.68);

    clip-path:
        polygon(
            0 64%,
            100% 64%,
            100% 80%,
            0 80%
        );
}


@keyframes eulcGlitchPulse {

    0%,
    100% {
        opacity:
            1;
    }

    8% {
        opacity:
            .82;
    }

    9% {
        opacity:
            1;
    }

    56% {
        opacity:
            1;
    }

    57% {
        opacity:
            .68;
    }

    58% {
        opacity:
            1;
    }

    76% {
        opacity:
            1;
    }

    77% {
        opacity:
            .86;
    }

    78% {
        opacity:
            1;
    }
}


.eulc-title-sub {
    margin-top:
        10px;

    color:
        #89929a;

    font-family:
        "Consolas",
        monospace;

    font-size:
        10px;

    letter-spacing:
        2px;
}


.eulc-terminal {
    display:
        inline-block;

    margin-top:
        8px;

    padding:
        10px 15px;

    background:
        rgba(0,0,0,.57);

    border:
        1px solid
        rgba(0,240,255,.20);

    font-family:
        "Consolas",
        monospace;

    font-size:
        12px;
}


.eulc-terminal-user {
    color:
        var(--e-green);
}


.eulc-terminal-symbol {
    color:
        var(--e-cyan);
}


.eulc-terminal-text {
    margin-left:
        8px;

    color:
        #c0c7cd;
}


.eulc-cursor {
    color:
        var(--e-yellow);

    animation:
        eulcCursorBlink
        1s steps(1)
        infinite;
}


@keyframes eulcCursorBlink {

    0%,
    45% {
        opacity:
            1;
    }

    46%,
    100% {
        opacity:
            0;
    }
}


.eulc-info-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        1px;

    margin-top:
        22px;

    background:
        rgba(255,255,255,.08);
}


.eulc-info-grid div {
    padding:
        11px;

    background:
        rgba(10,12,15,.98);

    color:
        #d0d5da;

    font-family:
        "Consolas",
        monospace;

    font-size:
        11px;
}


.eulc-info-grid span {
    display:
        block;

    margin-bottom:
        4px;

    color:
        #68717a;

    font-size:
        8px;

    letter-spacing:
        1px;
}


.eulc-warning {
    margin-top:
        18px;

    color:
        #879098;

    font-family:
        "Consolas",
        monospace;

    font-size:
        9px;

    letter-spacing:
        1px;
}


/* =========================================================
   ★ EULC 页脚
   ========================================================= */

#eulc-future-footer {
    position:
        relative !important;

    z-index:
        30 !important;

    margin-top:
        35px;

    padding:
        25px 35px 17px;

    background:
        rgba(8,9,11,.98) !important;

    border-top:
        1px solid
        rgba(252,238,10,.20);

    font-family:
        "Consolas",
        monospace;

    overflow:
        hidden;
}


.footer-hazard {
    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        180px;

    height:
        3px;

    background:
        repeating-linear-gradient(
            -45deg,
            #fcee0a 0,
            #fcee0a 10px,
            #111 10px,
            #111 20px
        );
}


.footer-main {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        25px;
}


.footer-eulc {
    color:
        #ffffff;

    font-size:
        25px;

    font-weight:
        900;

    letter-spacing:
        5px;

    text-shadow:
        2px 0 #00f0ff,
        -2px 0 #ff2bd6;
}


.footer-sub {
    margin-top:
        4px;

    color:
        #707980;

    font-size:
        8px;

    letter-spacing:
        2px;
}


.footer-center {
    text-align:
        center;
}


.footer-terminal {
    display:
        inline-block;

    padding:
        8px 13px;

    background:
        #030405;

    border:
        1px solid
        rgba(0,240,255,.14);

    font-size:
        10px;
}


.f-green {
    color:
        var(--e-green);
}


.f-cyan {
    color:
        var(--e-cyan);
}


.f-text {
    margin-left:
        7px;

    color:
        #8c959d;
}


.footer-online {
    margin-top:
        7px;

    color:
        #737c84;

    font-size:
        8px;

    letter-spacing:
        1px;
}


.footer-right {
    color:
        #737c84;

    font-size:
        8px;

    line-height:
        1.8;

    text-align:
        right;

    letter-spacing:
        1px;
}


.footer-bottom {
    margin-top:
        20px;

    padding-top:
        12px;

    border-top:
        1px solid
        rgba(255,255,255,.06);

    color:
        #686f76;

    font-size:
        8px;

    text-align:
        center;

    letter-spacing:
        1.5px;
}


.footer-bottom b {
    margin:
        0 10px;

    color:
        var(--e-yellow);

    opacity:
        .65;
}


/* =========================================================
   CRT
   ========================================================= */

body::before {
    content:
        "";

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    z-index:
        9998;

    opacity:
        .018;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 3px,
            rgba(255,255,255,.72) 4px
        );
}


/* =========================================================
   Scrollbar
   ========================================================= */

::-webkit-scrollbar {
    width:
        7px;
}


::-webkit-scrollbar-track {
    background:
        #020303;
}


::-webkit-scrollbar-thumb {
    background:
        #606870;
}


::-webkit-scrollbar-thumb:hover {
    background:
        var(--e-yellow);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 900px) {

    #home {
        width:
            auto !important;

        max-width:
            calc(100% - 18px);

        margin:
            15px auto !important;
    }


    #mainContent {
        float:
            none !important;

        width:
            100% !important;
    }


    #mainContent .forFlow {
        width:
            auto !important;
    }


    #sideBar {
        position:
            relative !important;

        top:
            auto !important;

        right:
            auto !important;

        width:
            100% !important;

        float:
            none !important;

        margin-top:
            20px !important;
    }


    /* 手机隐藏两侧 HUD */

    .eulc-side-hud {
        display:
            none !important;
    }


    #topics {
        padding:
            25px 20px !important;
    }


    #topics .postTitle a {
        font-size:
            26px !important;
    }


    .day {
        padding:
            23px 19px 20px !important;
    }


    .day .postTitle a,
    .day .postTitle2 a {
        font-size:
            21px !important;
    }


    #eulc-future-header {
        padding:
            0 20px 22px;
    }


    .eulc-hazard-bar {
        margin:
            0 -20px 20px;
    }


    .eulc-glitch {
        font-size:
            48px;

        letter-spacing:
            4px;
    }


    .eulc-info-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    #eulc-future-footer {
        padding:
            25px 20px 15px;
    }


    .footer-main {
        flex-direction:
            column;
    }


    .footer-right {
        text-align:
            center;
    }

}