/*  --------=--------- */
/* | Global settings |*/
/* ---------=-------- */

body {
    text-align: left;
    background-color: #21212b;
    color: gainsboro;
    font-family: Arial, Helvetica, sans-serif;
}

a {
    border-color: #2e375f;
    /* border-radius: 15px; */
    /* border-style: ridge; */
    border-left: none;
    border-right: none;
    font-weight: bold;
    text-decoration: none;
    color: gainsboro;
    background-color: #2e375f;
    top: 10px;
}

a:hover {
    text-decoration: none;
    color: black;
    background-color: gainsboro;
    transition: background-color 0.5s;
}

.eng {
    font-family: "Helvetica", sans-serif;
}

.chn {
    font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*  -------=------- */
/* | landing.html | */
/* -------=------- */

#landing-bg-r {
    display: visible;
    position: fixed;
    background-color: #1d4799;
    z-index: 12;
    left: 80%;
    height: 100%;
    width: 30%;

}

#landing-bg-l {
    display: visible;
    position: fixed;
    background-color: #1d4799;
    z-index: 12;
    right: 80%;
    height: 100%;
    width: 30%;

}

#landing-bg-t {
    display: visible;
    position: fixed;
    background-color: #1d4799;
    z-index: 12;
    top: 0%;
    left: 0%;
    right: 0%;
    height: 25%;
    width: 100%;

}

#landing-bg-b {
    display: visible;
    position: fixed;
    background-color: #1d4799;
    z-index: 12;
    top: 75%;
    height: 25%;
    width: 100%;

}

#landing-bg-bl {
    background-color: gainsboro;
    width: 2%;
    height: 54%;
    top: 50%;
    transform: translate(-0%, -50%);
    position: fixed;
    right: 80%;
    z-index: 13;

}

#landing-bg-br {
    background-color: gainsboro;
    width: 2%;
    height: 54%;
    top: 50%;
    transform: translate(-0%, -50%);
    position: fixed;
    left: 80%;
    z-index: 13;

}

#landing-bg-bt {
    position: fixed;
    background-color: gainsboro;
    z-index: 13;
    top: 24%;
    width: 64%;
    height: 2%;
    left: 50%;
    transform: translate(-50%, -50%);

}

#landing-bg-bb {
    position: fixed;
    background-color: gainsboro;
    z-index: 13;
    top: 76%;
    width: 64%;
    height: 2%;
    left: 50%;
    transform: translate(-50%, -50%);

}

#landing-img {
    z-index: 1;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}



#landing-txt {
    display: visible;
    color: black;
    position: fixed;
    z-index: 13;
    font-size: 20pt;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: fadeIn 3s forwards;
}

.language-toggle {
    font-size: 14px;
    z-index: 20;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: fadeIn 3s forwards;
}


/*  -----------==---------- */
/* | Header for home pages | */
/*  -----------==---------- */

#header {
    display: block;
    position: fixed;
    top: 14.5%;
    left: 3%;
    font-size: 10px;
}

/*      ---------------------     */
/* flairupper is below flairlower */
/*     ----------------------     */

#flairupper {
    display: visible;
    position: fixed;
    top: 14%;
    height: 180px;
    width: 95%;
    z-index: -11;
    background-color: slategrey;
}

#flairlower {
    display: visible;
    position: fixed;
    top: 13%;
    height: 180px;
    width: 96%;
    z-index: -10;
    background-color: #2e375f;
}

#heading {
    display: block;
    opacity: 0;
    animation: fadeIn 2s forwards;
    position: fixed;
    top: 1%;
    left: 3%;
    transition-duration: visible 0.5s;
}

#img {
    z-index: -1;
    position: fixed;
    right: 5%;
    top: 15%;
}

#blog-link {
    display: grid;
    position: fixed;
    right: 10%;
    top: 50%;
    z-index: 1000;
}

#textbod {
    position: fixed;
    max-height: 60vh;
    overflow-y: auto;
    margin-top: 40vh;
    width: 100%;
    left: 10px;
    height: auto;
    font-size: 17px;
    z-index: 999;
    scrollbar-width: none;
}

#textbod::-webkit-scrollbar {
    display: none;
}

/*  -------=-------- */
/* | Blog Settings |*/
/* --------=------- */

.blog-post {
    position: fixed;
    width: 80%;
    left: 10%;
    right: 10%;
    text-wrap: wrap;
    padding: 25px;
    background-color: slategray;
    color: black;
}

#post-head {
    background-color: gainsboro;
    border: groove;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 10px;
}

#blog-date {
    z-index: 1000;
    color: black;
    text-align: right;
}