/*  CSS    overall design */
    pre                     /*  pre , code  */
    {
        background-color: aliceblue;
        margin: 3px;
        padding:3px;
    }
    html,body                     /*  body  */
    {
        padding: 0;
        margin: 0;
        background-color:#07a4ec;
    }
    .font_settings,body            /*  font   */
    {
        font-size: 19px;
        font-family: "AR PL UKai CN",Consolas,"华文楷体","楷体";
        line-height: 1.2;
    }
    ul,ol,dl,li
    {
        font-size: 19px;
        line-height: 1.28;
        font-family:Consolas,"楷体";

        word-break: break-all;
    }
    /* ul,ol,dl,li
    {
        font-size: 18px;
        font-family:Consolas,"楷体";
    } */


   /*  header  */
    #header
    {
        background-color:#2E3A59; color: #f0f0f0;
        height:3vh;
        overflow:auto;
        text-align: center;
        padding-top: 5px;
    }
    .hidden {
        max-height: 0;
        margin-bottom: 0;
        padding: 0;
        border-width: 0;
    }



    /*  top navigation  */
    #top_navigation                    
    {
        /* background-color:#3C4D7B;  */
        background-color:#273969;
        color: #ffffff;
        height:8vh;

        overflow:auto;

        text-align: left;
        
        /*  alignment  */
        /* padding-left: 35px;   */
        /* padding-left: 110px;   */
        padding-left: 36px;

        /* padding-top: 5px; */
        /* padding-top:15px; */

        /* margin-top: 10px; */
        /* margin-bottom: 10px; */
    }

    /* links */
    .navigation                
    {
        display: inline-block;
        text-decoration: none;
        color:white;
        width: 11%; height: 40%; box-sizing: border-box; 
        border: 1px solid #ddd;
        text-align: center; 
        
        margin: 3px;
        /* margin: 0; */

        overflow:hidden;

    }

    .navigation_left
    {
        width:9%;
        margin:3px 0 3px 3px;
        /* margin: 0; */

        /* border:none; */
        border: 1px solid #ddd;
    }

    .navigation_6
    {
        width:6%;
        margin:3px 0 3px 3px;
    }
    .navigation_3
    {
        width:3%;
        margin:3px 0 3px 3px;
    }
    .navigation_3_mycss
    {
        width:3%;
        margin:3px 0 3px 0px;
        background-image:url(../CSS/pictures/lemon.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        color: rgb(255, 255, 255);
        font-weight: bolder;
    }
    .navigation_3_mycss:hover
    {
        background-color: #07a4ec;
        background-image: none;
        filter: brightness(120%);
        color:yellow;
    }

    .navigation_3_color
    {
        width:3%;
        margin:3px 0 3px 0px;
        background-image:url(../CSS/pictures/OIP-C.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        color: rgb(255, 255, 255);
        font-weight: bolder;
    }
    .navigation_3_color:hover
    {
        background-color: #07a4ec;
        background-image: none;
        filter: brightness(120%);
        color:yellow;
    }



    .navigation_right
    {
        width:2%;
        margin:3px 3px 3px 0;
        /* margin: 0; */

        /* border:none; */
        border: 1px solid #ddd;
        background-color:#24ccf0;
    }



    .navigation:link           /* links normal */
    {
        /* background-color:#1b8eec; */
        background-color:#4b6ff3;
    }
    .navigation:hover           /* links hover */
    {
        background-color: #0056B3;
    }
    .navigation:active          /* links active */
    {
        background-color:gold;
    }

    .tong_yi:hover                    /*  tong_yi's link */
    {
        font-size: 150%;
    }

    /* AI */
    /* .navigation img
    {
        width: 100%;
        height: 100%;
        margin:20;
        padding:0;
        background-color: white;
    } */
    .AI_search_left 
    {   
        width: 2.2%;
        border: 1px solid #ddd;
        margin: 3px 0 3px 3px;
        /* overflow: hidden; */
    }

    .AI_search_inside
    {
        width: 2.2%;
        border: 1px solid #ddd;
        margin: 3px 0 3px 0;
        /* overflow: hidden; */
    }

    .AI_search_right 
    {   
        width: 2.2%;
        border: 1px solid #ddd;
        margin: 3px 3px 3px 0px;
        /* overflow: hidden;     */
    }
    .AI_hover:hover
    {
        filter:brightness(90%);
    }

  /*  subsidebox  */
    #container                 /*  container contains subsidebox , mainbox and sidebox */
    {
        background-color:red;
        height: 89vh;
        width: 100%;
        margin: 0;
        
    }

    #subsiedbox-container       /*  subsidebox-container  */
    {
        float: left;
        /* float: right; */
        /* height: 89vh; */
        height: 100vh;
        width: 18%; 
        margin: 0; padding: 0;;
        overflow: hidden;

    }

    #subsidebox                /*  subsidebox  */
    {
        /* float: left; */
        background-color: #FAFAFA;
        height: 100%;
        /* width: 100%;  */
        width: 108%;
        box-sizing: content-box;   
        font-size: 15px;
        overflow: auto;
        /* padding-left: 2px; */
        /* padding-right: 16px; */
        margin: 0;
        /* border: 1px solid #ddd; */
        
    }
    #subsidebox a              /*  subsidebox's links */
    {   
        /* font-size: 15px; */
        display: block; 
        /* text-decoration: none; */
        line-height:1.6;
        /* padding: 3px 0 3px 0; */
        /* padding: 0; */
        padding-left: 3px;
        /* height: 30px; */
        /* margin:0.5px 0 0.5px 0; */
        margin: 1px 0 0 0;
        white-space: nowrap;   
        overflow: hidden;      
        text-overflow: ellipsis; 
        /* box-sizing: content-box; */
        /* background-color: rgb(186, 242, 3); */
        
    }
    #subsidebox a:hover        /*  subsidebox's links hover */
    {
        background-color: darkgray !important;
        color: white !important; /* 确保文字在深色背景下可见 */
        
    }

    #subsidebox a:active       /*  subsidebox's links active */
    {
        background-color: gold !important;
        color: black !important; /* 确保文字在亮色背景下可见 */
    }


  /*  mainbox  */
    #mainbox               
    {
        float: left;
        /* background-color: #FAFAFA; */
        background-color: rgb(246, 255, 253);
        /* height: 89vh; */
        height: 100vh;
        width: 67%; box-sizing: border-box; border: 1px double #ddd;
        padding-left: 10px;
        overflow: auto;
    }

    /*  mainbox's headings */
    #mainbox h1
    {
        background-color: #336699;
        color: white;
        padding:5px;
        margin-top: 5px;
        margin-right: 5px;
    }

    #mainbox h2
    {
        background-color: #6699cc;
        color: white;
        margin-top: 5px;
        margin-right: 5px;
    }

    #mainbox h3
    {
        background-color: #99cccc;
        color: black;
        margin-top: 5px;
        margin-right: 5px;
    }

    #mainbox h4
    {
        background-color: #99ccccb1;
        color: black;   
        margin-top: 5px;
        margin-right: 5px;             
    }

    #mainbox p             /*  mainbox's content */
    {
        /*  mainbox font-size   */
        line-height: 1.2;
        font-size: 19px;

    }


  /*  sidebox  */
    #sidebox
    {
        float: left;
        /* background-color: #FAFAFA; */
        background-color: #f7feff;
        /* height: 89vh; */
        height: 100vh;
        width: 15%; box-sizing: border-box; border: 1px solid #ddd;
        overflow: auto;
    }


  /*  footer  */
    #footer
    {
        background-color: #5a7a9bcc; color: #FAFAFA;
        height: 2vh;
        text-align: center;
        vertical-align: middle;
        margin: 0; padding: 0;
        
    }
    #footer p                   /*  footer's text  */
    {   
        display: block;
        padding: 0; margin: 0;
    }


   /*  component   */
    #my_clock                   /*  clock  */
    {
        padding: 0; margin: 0;   
        border: 2px double #ddd;
        display: inline-block;
        padding: 1px;
    }

    .page_button
    {
        width: 30px;height: 30px;
        margin: 0 1px 0 0;padding: 1px;
        background-color:#60ddf9;
        border: 2px double white;
        font-family:'Courier New', Courier, monospace;font-weight: bold;
    }
    .page_button:hover
    {
        background-color:rgba(249, 249, 35, 0.671);
        border: 1px solid greenyellow;
    }
    .page_button:active
    {
        background-color: coral;
        font-size: larger;
    }
    .clicked_page_button
    {
        /* color:white; */
        color: yellow;
        font-size: 15px;
    }


/* anchor */

/* early forests and lakes */
.anchor_type_early_forests_and_lakes , .early_forests_and_lakes
{
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    padding: 3px 5px 3px 5px;
    margin: 3px;

    background-color: cyan;
    color:darkblue;
    
    border-radius: 5px;
    border: 1px outset saddlebrown;

    transition: all 0.5s ease;
    /* transform-style: preserve-3d; */

    text-decoration: none;
}
.anchor_type_early_forests_and_lakes:hover , .early_forests_and_lakes:hover
{
    text-decoration: underline;
    background-color:mediumspringgreen; 
    color: yellow;
    font-size: 120%; 

    transform: rotateY(30deg);
}    
.anchor_type_early_forests_and_lakes:active , .early_forests_and_lakes:active
{
    background-color: aquamarine;
}

.forest 
{
    color:rgba(128, 0, 0, 0.861) !important ;
    font-family: "华文楷体";
    background-color: rgba(82, 239, 82, 0.703) !important ;

    position: relative;

    text-decoration: none;
}
.forest::before
{
    content:"";
    background-image:url(../CSS/pictures/forest.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 100% ;
    filter: blur(0.4px);
    position: absolute;
    bottom: 0;
    right: 0;
    width: 8%;
    height: 58%;
    background-position: top right;
    background-size: 100% 100%;
    z-index: 1;

}
.forest:hover
{
    background-color: springgreen !important;
}


.forest2
{
    color:rgba(128, 0, 0, 0.861) !important ;
    background-color: rgba(150, 239, 150, 0.703) !important ;
}

.forest3
{
    color:rgba(128, 0, 0, 0.861) !important ;
    background-color: rgba(209, 248, 209, 0.703) !important ;
}





/*   banana     */
.banana 
{
    background-color: rgba(255, 255, 0, 0.66) !important;
    color : hotpink !important;

    font-family: "仿宋" !important;    
}
.banana:hover
{
    background-color:rgba(177, 247, 71, 0.203) !important;
    color: rgba(43, 255, 0, 0.888) !important;
    filter: brightness(88%);
}
.banana:active
{
    filter: brightness(80%);
}


/*    dictionary   */
.dictionary 
{
    background-color: rgba(250, 240, 230, 0.769) !important;
    color : lightslategray !important;

    font-family: "隶书" !important;

    border: 2px double orangered ;
}
.dictionary:hover
{
    background-color: lemonchiffon !important;
}




/* red brick */
.anchor_type_red_brick , .red_brick
{
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    padding: 3px 5px 3px 5px;
    margin: 3px;

    background-color:coral;
    color:darkred;

    border-radius: 5px;
    border: 1px outset gold;

    transition: all 0.5s ease;
}
.anchor_type_red_brick:hover , .red_brick:hover
{
    text-decoration: underline;
    background-color:rgba(255, 230, 0, 0.687);
    color:crimson;
    font-size: 120%; 
}
.anchor_type_red_brick:active , .red_brick:active
{
    background-color: yellow;
}

/*      golden state    */
.anchor_type_golden_state , .golden_state
{
    display: inline-block;

    /* font-family:"华文琥珀"; */
    line-height: 1.2;

    text-decoration: none;
    background-color:#f5d520cd; color: rgb(193, 125, 0);
    padding: 2px; margin: 3px;  

    border-radius: 5px;

    /* transition: all 0.3s ease; */
}
.anchor_type_golden_state:hover , .golden_state:hover
{
    background-color: #FFA500; color: #8B0000;

}
.anchor_type_golden_state:active , .golden_state:active
{
    
    background-color: yellow; color: red;
    border: 2px solid rgb(255, 200, 0);
}






/*    font     */

.font_first_letter , .first_letter 
{
    display: inline-block;
}

.font_first_letter::first-letter , .first_letter::first-letter 
{
    text-transform: uppercase;
    font-size: 1.5em;
    color: red;
}


/*  pink bear */
.font_type_pink_bear , .pink_bear
{   
    background-color:rgba(255, 192, 203, 0.486); color: rgb(199, 7, 71);
    padding: 3px; 
    /* padding: 30px; */
    line-height: 1.55;

}
.font_type_pink_bear:hover , .pink_bear:hover
{
    background-color:pink;
}

/*    classic emphasis    */
.font_type_classic_emphasis , .classic_emphasis
{
    background-color:floralwhite; color:crimson;
    padding: 3px; 
    line-height: 1.55;
    font-weight: bold;
    /* border: 1px solid navy; */
}
.font_type_classic_emphasis:hover , .classic_emphasis:hover
{
    filter: brightness(95%);
}


/****************************************************************************************************************************/

/*    history    */
.font_type_history ,.history
{
    display: inline-block;

    font-family: "宋体", SimSun, "Times New Roman", Times, serif;
    background-color: #eef; color: #333;
    
    margin: 0;padding: 0;
    padding-left: 5px; padding-top: 1px; padding-bottom: 1px;

    font-size: 16px;

    border-radius: 2px;
}
.font_type_history:hover , .history:hover
{
    background-color:rgb(220, 220, 243);
}
.font_type_history:active , .history:active
{
    filter: brightness(90%);
}


/*  Strategies of the Warring States Period  */
.warring_states_period , .warring
{
    background-color: oldlace;
    color: sienna;

    font-family: "Comic Sans MS","Lucida Console";
}
.warring_states_period:hover , .warring:hover
{
    filter: brightness(60%);
    background-color: darkgray;
    color:ghostwhite;
}
.warring_states_period:active , .warring:active
{
    background-color: yellowgreen;
    color:lavender;
    filter: brightness(120%);
}





/****************************************************************************************************************************/

/*  code */

/*    steel     */
.font_type_steel , .steel
{
    background-color: rgba(220, 220, 220, 0.607); color: rgba(82, 82, 82, 0.909);
    padding: 3px; 
    line-height: 1.2;
}
.font_type_steel:hover , .steel:hover
{
    background-color: rgba(220, 220, 220, 0.502); color: rgba(25, 25, 25, 0.982);
    font-weight: bold;
}

/*    copper     */
.copper
{
    display: inline-block;

    background-color: rgba(255, 228, 181, 0.872); color: brown;

    margin: 3px; padding: 3px;

    line-height: 1.2;
    font-family: Inconsolata ;
    font-size: 18px;
    /* overflow-wrap: break-word; */
    white-space: pre-wrap;

    box-sizing: border-box;
    border: 3px double lightsalmon;
    border-radius: 5px;
}
.copper:hover
{
    filter: brightness(105%);
}
.copper:active
{
    filter: brightness(120%);
}


/*    slivery   */
.font_type_slivery , .slivery
{
    background-color: rgba(241, 238, 238, 0.607); color:rgb(26, 25, 25);
    padding: 3px; 
    padding-left: 8px;

    line-height: 1.2;

    font-weight: bold;
}
.font_type_slivery:hover , .slivery:hover
{
    filter: brightness(90%);
}



/*    porcelain   */
.font_type_porcelain , .porcelain
{
    background-color: rgb(245, 245, 224); color:darkslategrey;

    padding: 1.2px; 
    line-height: 1.46;
    /* line-height: 2; */

    font-size: 20px;
    word-break: break-all;
}
.font_type_porcelain:hover , .porcelain:hover
{
    background-color:rgb(242, 242, 206);  color:rgb(51, 73, 73);
}
.font_type_porcelain:active , .porcelain:active
{
    background-color:rgb(255, 255, 82);
}



.font_type_porcelain_violet , .porcelain_violet , .violet
{
    background-color: rgba(239, 218, 241, 0.715); color:rgb(44, 89, 89);

    padding: 2px; 
    line-height: 1.5;

    font-size: 20px;
    word-break: break-all;
}
.font_type_porcelain_violet:hover , .porcelain_violet:hover , .violet:hover
{
    background-color: rgba(246, 222, 249, 0.715); 
    /* background-color: rgba(214, 5, 241, 0.715); */
}
.font_type_porcelain_violet:active , .porcelain_violet:active , .violet:active
{
    background-color: rgba(211, 55, 231, 0.715); 
}


.porcelain_violet_2 , .porcelain_violet_low , .violet_low
{
    background-color: rgba(243, 235, 244, 0.715); color:rgb(44, 89, 89);
    line-height: 1;
    font-size: 18px;
}
.porcelain_violet_low:hover , .porcelain_violet_low:hover , .violet_low:hover
{
    background-color: rgba(246, 222, 249, 0.715);
}


.porcelain_aquamarine , .aquamarine
{
    background-color: rgba(127, 255, 212, 0.731); color:rgb(44, 89, 89);

    padding: 2px; 
    line-height: 1.5;

    font-size: 21px;
    word-break: break-all;
}
.porcelain_aquamarine:hover , .aquamarine:hover
{
    filter: brightness(110%);
}
.porcelain_aquamarine:active , .aquamarine:active
{
    background-color: cyan;
}


.porcelain_mistyrose , .mistyrose
{
    background-color:rgba(255, 228, 225, 0.874); color:peru;

    padding: 2px; 
    line-height: 1.5;

    font-size: 21px;
    word-break: break-all;
}
.porcelain_mistyrose:hover , .mistyrose:hover
{
    filter: brightness(110%);
}
.porcelain_mistyrose:active , .mistyrose:active
{
    background-color: #FF007F;
}


.porcelain_hotpink , .hotpink
{
    background-color: rgba(255, 105, 180, 0.642); color:snow;

    padding: 2px; 
    line-height: 1.5;

    font-size: 21px;
    word-break: break-all;
}
.porcelain_hotpink:hover , .hotpink:hover
{
    filter: brightness(110%);
}
.porcelain_hotpink:active , .hotpink:active
{
    background-color: rgba(255, 0, 255, 0.678);
}






/*   light   */
.code_type_light , .light
{
    display: inline-block;

    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    /* font-family: "Droid Sans Mono"; */
    background-color:ghostwhite;

    line-height: 1.22;
    padding: 3px; margin:2px;

    word-break: break-word;
    transition: 0.3s;
}
.code_type_light:hover , .light:hover
{   
    background-color:gainsboro;
    /* filter: brightness(10%); */
}

.code_type_light_explanation , .light_explanation
{
    display: inline-block;
    /* border: 2px ridge #ffbb0048; */
    border: 2px ridge rgba(128, 128, 128, 0.8);
    
    background-color:rgba(192, 192, 192, 0.114);

    padding: 2px; margin: 2px;

    transition: 0.35s ease;
}
.code_type_light_explanation:hover , .light_explanation:hover
{
    /* padding: 1px;  */
    margin: 1px;

    filter: brightness(88%);
    box-shadow: 16px 16px 6px rgba(196, 216, 216, 0.616);
}

/*   autumn maple leaf   */
.code_type_leaf , .leaf
{   

    background-color: rgba(255, 127, 80, 0.564); color: #654321;

    margin: 3px; padding: 3px;
    
    font-size: 18px;
    line-height: 1.2;
    font-family: "楷体","华文新魏";
    font-weight:550;
    overflow-wrap: break-word;

    border-radius: 5px; 
    box-shadow: 2px 2px 5px rgba(255, 175, 14, 0.3); 

    position: relative;
}
.code_type_leaf::before , .leaf::before
{   
    content: "";
    
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
    height: 30%;

    background-image: url(pictures/2025-02-10-10-25-29.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 100% 100%;

    z-index: 2;
}
.code_type_leaf:hover , .leaf:hover
{
    background-color: rgba(255, 127, 80, 0.824);
    box-shadow: 15px 15px 5px rgba(255, 175, 14, 0.5); 
}


/*   the sea of dreams   */
.code_type_sea , .sea
{
    display: inline-block;
    background-color: rgba(0, 255, 255, 0.61); color:rgb(251, 11, 139);

    margin: 3px; padding: 3px;

    font-size: 17px;
    line-height: 1.2;
    /* font-family:; */


    box-shadow: 3px 3px 1px rgba(80, 172, 200, 0.6);

    border-radius: 5px;

    text-decoration: none;
}
.code_type_sea:hover , .sea:hover
{
    filter:brightness(150%);

    font-weight: bold;
}
.code_type_sea:active , .sea:active
{
    background-color: rgb(255, 251, 0);
}

.code_type_shallow_sea , .shallow_sea 
{
    display: inline-block;

    background-color: rgba(0, 255, 255, 0.267); color:rgb(201, 20, 183);
    
    margin: 3px; padding: 3px;
    
    font-size: 17px;
    line-height: 1.2;
    box-shadow: 3px 3px 1px rgba(120, 202, 227, 0.669);
    border-radius: 5px;

    text-decoration: none;
}
.code_type_shallow_sea:hover , .shallow_sea:hover
{
    filter:brightness(120%);
    font-weight: bold;
}
.code_type_shallow_sea:active , .shallow_sea:active
{
    background-color: rgba(255, 251, 0, 0.331);
}
.code_type_vitality_sea , .vitality_sea
{
    display: inline-block;

    background-color: rgba(0, 255, 255, 0.356); color:rgb(11, 156, 31);

    margin: 3px; padding: 3px;

    font-size: 17px;
    line-height: 1.2;
    box-shadow: 3px 3px 1px rgba(148, 240, 183, 0.831);
    border-radius: 5px;
}
.code_type_vitality_sea:hover , .vitality_sea:hover
{
    filter:brightness(90%);
    font-weight: bold;
}
.code_type_vitality_sea:active , .vitality_sea:active
{
    background-color: rgba(255, 251, 0, 0.331);
}



/*   rural old house   */
.code_type_rural , .rural , .rural_old_house
{
    display: inline-block;

    font-family: "华文新魏" , serif;
    font-size: 17px;
    line-height: 1.2;
    /* font-weight: bold; */


    margin: 3px; padding: 6px;

    background-color:rgba(95, 160, 144, 0.537); color: rgb(157, 78, 22);
    /* border-style: ridge; border-color:rgba(169, 169, 169, 0.345);border-width: 2px;
    border-radius: 2px; */

    /* box-shadow: 3px 3px 1px rgba(1, 158, 25, 0.249); */
    box-shadow: 1px 1px 1px rgba(1, 158, 25, 0.249);

    text-shadow: 2px 2px 1px rgba(188, 143, 143, 0.377);
}
.code_type_rural:hover, .rural:hover , .rural_old_house:hover
{
    box-shadow: 3px 3px 1px rgba(0, 128, 0, 0.475);
}
.code_type_rural:active, .rural:active , .rural_old_house:active
{
    color: chartreuse;
}
/*  rural landscape   */
.code_type_rural_landscape ,.rural_landscape
{
    /* display: inline-block; */
    display: inline;

    font-family: "华文新魏" , serif;
    font-size: 20px;
    line-height: 1.6;
 
    padding: 1px;

    background-color:rgba(95, 160, 144, 0.361); color: rgb(157, 78, 22);
    border-style: ridge; border-color:rgba(169, 169, 169, 0.429);border-width: 2px;
    border-radius: 2px;

    box-shadow: 2px 2px 1px rgba(1, 158, 25, 0.306);

    text-shadow: 3px 3px 1px rgba(188, 143, 143, 0.205);
}
.code_type_rural_landscape:hover, .rural_landscape:hover
{
    box-shadow: 3px 3px 1px rgba(0, 128, 0, 0.475);
}
.rural_landscape:active
{
    filter: brightness(150%);
}


.rural_new
{
    font-family: 'Courier New', Courier, monospace;

    display: inline-block;

    font-size: 17px;
    font-weight: bold;
    line-height: 1.2;


    margin: 3px; padding: 7px;

    background-color:rgba(117, 220, 15, 0.71); color: rgb(82, 39, 8);

    box-shadow: 1px 1px 1px rgba(1, 158, 25, 0.249);

    text-shadow: 2px 2px 1px rgba(188, 143, 143, 0.377);

    text-decoration: none ;
}
.rural_new:hover
{
    filter: brightness(90%);
}

.rural_leaf
{
    font-family: 'Courier New', Courier, monospace;

    display: inline-block;

    font-size: 17px;
    font-weight: bold;
    line-height: 1.2;


    margin: 3px; padding: 7px;

    background-color:rgba(161, 237, 84, 0.71); color: rgb(82, 39, 8);

    box-shadow: 1px 1px 1px rgba(1, 158, 25, 0.249);

    text-shadow: 2px 2px 1px rgba(188, 143, 143, 0.377);

    text-decoration: none ;
}

.rural_root
{
    font-family: 'Courier New', Courier, monospace;

    display: inline-block;

    font-size: 17px;
    font-weight: bold;
    line-height: 1.2;


    margin: 3px; padding: 7px;

    background-color:rgba(214, 135, 17, 0.71); color: rgb(7, 255, 7);

    box-shadow: 1px 1px 1px rgba(1, 158, 25, 0.249);

    text-shadow: 2px 2px 1px rgba(188, 143, 143, 0.377);

    text-decoration: none ;
}

.rural_flower
{
    font-family: 'Courier New', Courier, monospace;

    display: inline-block;

    font-size: 17px;
    font-weight: bold;
    line-height: 1.2;


    margin: 3px; padding: 7px;

    background-color:rgba(201, 166, 90, 0.71); color: rgb(64, 255, 0);

    box-shadow: 1px 1px 1px rgba(1, 158, 25, 0.249);

    text-shadow: 2px 2px 1px rgba(188, 143, 143, 0.377);

    text-decoration: none ;
}



/*   capital city   */
.code_type_capital , .capital
{
    display: inline-block;

    background-color:lightyellow; color:orangered;

    border: 1px solid rgba(255, 0, 0, 0.354);

    padding: 3px; margin: 3px;
    font-size: 18px;
    line-height: 1.2;

    box-shadow: 3px 3px 1px rgba(214, 75, 37, 0.587);
}
.code_type_capital:hover , .capital:hover
{   
    background-image: url(pictures/2025-02-11-17-58-10.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.code_type_capital:active , .capital:active
{
    border: 2px solid red;
}


/*   sunrise   */
.code_type_sunrise , .sunrise
{
    display: inline-block;

    background-color:rgba(82, 209, 252, 0.137); color: rgb(255, 38, 0);

    border : 1px solid rgba(255, 0, 221, 0.395) ;

    padding: 3px; margin: 3px;
    font-size: 18px;
    line-height: 1.2;

    box-shadow: 3px 3px 1px rgba(255, 233, 68, 0.829);
}
.code_type_sunrise:hover , .sunrise:hover
{
    background-color:rgba(0, 191, 255, 0.514);
}



green , .green , .low
{
    background-color: rgba(172, 255, 47, 0.253) !important;
}

red ,.red , .high
{
    background-color: rgba(255, 66, 52, 0.247) !important;
}

yellow , .yellow , .medium
{
    background-color: rgba(255, 255, 0, 0.203) !important;
}


/*      wps       */
.wps
{
    color : rgb(43, 0, 255) ;
    background-color: rgba(251, 255, 0, 0.049);

    white-space: pre-wrap;

    font-family: '楷体' !important;
}


/*      GB       */
.gb {
  white-space: pre-wrap;  /* 保留空格和换行，但自动换行 */
  word-break: break-word; /* 强制长单词/URL换行 */
  overflow-x: auto;       /* 防止意外溢出 */

  font-family: '楷体' !important;
  font-size: 16px !important;

  background-color: rgba(255, 231, 235, 0.488);
}



/* command */

.command 
{
    color:white;
    /* background-color: #000000a6; */
    background-color: #000000c6;

    white-space: pre-wrap;
    /* overflow: hidden;     */
}


.command_1 , .code_command , command
{
    font-weight: bold !important;
    color : rgb(230, 230, 23) !important ;
}
    

/*  sql   */
.sql
{
    color : #2E3440 !important;
    background-color:#F5F2E9 !important;
    font-size: Georgia !important ;

    /* white-space: pre-wrap; */
    overflow-x: auto; 
    /* overflow-wrap: break-word;
    word-break: break-all; */
}

.sql_command,code_s,code_sql
{
    font-weight: bold !important;
    color: #054389 !important;

    font-size: Georgia !important ;
}


.php
{
    text-decoration: none;
    color: purple;
}



.js
{
    color:yellow;
    /* background-color: #1a0933; */
    background-color: #2d1b3d;
}


.nmap
{
    background-color: rgb(118, 114, 114) !important;
    color:rgb(255, 248, 248) !important;
}


.python
{
    font-size: 18px !important;
    color: rgb(255, 251, 0) !important;
    background-color: #6164fb !important;

    white-space: pre-wrap;
}

.firewall 
{
    font-size: 16px !important;
    background-color: #1e1e1e; 
    color: #e0e0e0;           
    /*  white-space: pre-wrap;     */
    /* word-wrap: break-word;     */
    overflow-x: auto;         
    border-radius: 6px; 
}


.http
{
    font-family: '楷体';
    color : rgb(255, 115, 0) ;
    background-color: white;
}



.configuration , .configure , .config
{
    border: 2px solid transparent;
    font-family: '楷体';
    background-color: rgb(217, 216, 216);
    color: black;
    padding: 10px;
}
.configuration:hover , .configure:hover , .config:hover
{
    filter: brightness(88%);
    border: 2px solid rgb(111, 255, 0);
}


.operate
{
    font-weight: bold !important ;
    color : rgb(81, 40, 80) !important ;
    text-shadow: 6px 6px 6px rgba(0, 0, 0, 0.315) !important ;
}




/*    orange    */
.orange
{
    background-color: sandybrown;
    display: inline-block;
    /* display: block; */
    width: 97%;
    /* width: 1500px; */

    padding: 10px;
    margin: 10px;
    text-shadow: 1px 1px 1px #000000;
    color: white;
}
.orange:hover
{
    filter: brightness(120%);
    font-family: "隶书";
    line-height: 1.28;
}
.orange:active
{
    filter: brightness(180%);
}




/*   image   */
/****************************************************************************************************************************/
.img_type_enlarge , .image_enlarge , .enlarge_image
{
    border-radius: 5px;
}
.img_type_enlarge:hover , .image_enlarge:hover , .enlarge_image:hover
{
    transform: scale(1.22);
}
.img_type_enlarge:active , .image_enlarge:active , .enlarge_image:active
{
    transform: scale(1.5);
}


/*   black border   */
.image_black
{
    border-radius: 5px;
    border : 1px solid black;
    margin-left : 36px;
}
.image_black:hover
{
    transform: scale(1.22);
}
.image_black:active
{
    transform: scale(1.5);
}





/****************************************************************************************************************************/

/* color test */
#test 
{
    color:aquamarine;
    color:lightskyblue;
    color:mediumvioletred;
    color:whitesmoke;
    color:crimson;
    color:#f4f4f4
    
}


/*         border           */

.border_brown , .b_brown
{
    border : 2px double rgba(165, 42, 42, 0.795) ;
    padding : 3px;

    list-style-type: none;
}

.border_black , .b_black 
{
    border : 1px solid black ;
    padding : 3px;

    list-style-type: none;

    display: inline-block;
}


/*         list            */

.unsigned
{
    list-style-type: none;
}




.sqli-labs
{
    width: 430px;
    height: 105px;
}

.sqlinj
{
    color: rgb(210, 210, 34);
    background-color: black;
    line-height: 1.1 !important;
    border: 1px solid #000000;
}
.sqlinj:hover
{
    filter: brightness(150%);
}



.t th , .t td 
{
    border: 1.5px solid #000;
    font-family: '楷体';
}


.padding td, .padding th 
{
  padding: 6px;
}




/*      boder         */
.border_green , .b_green
{
    border: 2px greenyellow solid;
    display: inline-block;
    width: 98%;
}