@font-face {
    font-family: 'EB Garamond';
    src: url('/fonts/EBGaramond-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'EB Garamond';
    src: url('/fonts/EBGaramond-Bold.woff2') format('woff2');
    font-style: bold;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: STZhongsong;
    src: url('/fonts/STZHONGS.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Consolas;
    src: url('/fonts/consola.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

html {
    --moke: #0080ff;
    --backgroundgrey: #f3f3f3;
    --page_width: 64vw;
    --post_width: 50vw;
    --headimage_width: 10vw;
}

body {
    padding: 0;
    margin: 0;

    /* ref: https://zenozeng.github.io/fonts.css/, put Source Sans in the front */
    font-family: "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
    font-weight: normal;
    font-size: 18px;
    line-height: 1.5;

    background-color: var(--backgroundgrey);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "EB Garamond", STZhongsong,
        /* before swap, ref: https://zenozeng.github.io/fonts.css/ */
        Georgia, "Nimbus Roman No9 L", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif;
    font-weight: normal;

    color: var(--moke);
}

h1 {
    font-size: 2em;
    margin-block-start: 0.63em;
    /* abs: 1.25em, tot: 4.5em */
    margin-block-end: 0.63em;
}

h2 {
    font-size: 1.67em;
    /* margin abs: 1.165em, tot: 4em */
    margin-block-start: 0.70em;
    margin-block-end: 0.70em;
}

h3 {
    font-size: 1.5em;
    /* margin abs: 1em, tot: 3.5em */
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
}

h4 {
    font-size: 1.33em;
    /* margin abs: 0.835em, tot: 3em */
    margin-block-start: 0.63em;
    margin-block-end: 0.63em;
}

h5 {
    font-size: 1.17em;
    /* margin abs: 0.665em, tot: 2.5em */
    margin-block-start: 0.59em;
    margin-block-end: 0.59em;
}

h6 {
    font-size: 1em;
    /* margin abs: 0.5em, tot: 2em */
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

a {
    text-decoration: none;
    color: var(--moke);
}

a:hover {
    text-decoration: underline;
}

hr {
    border: 0 none;
    height: 2px;

    background-color: var(--backgroundgrey);

    margin-top: 0;
    margin-bottom: 0;

    flex-shrink: 0;
}

img {
    max-width: 100%;

    display: block;
    margin-left: auto;
    margin-right: auto;
}

.textMonospace {
    font-family: Consolas, monospace;
}

.textCenter {
    text-align: center;
}

.textLarge {
    font-size: 20px;
}

.textMedium {
    font-size: 18px;
}

.textSmall {
    font-size: 16px;
}

.pageContainer {
    display: flex;
    flex-direction: column;

    max-width: var(--page_width);
    /* min-width: var(--page_width); */
    margin: 0 auto;
    min-height: 100vh;

    background-color: white;
}

.headimage {
    flex-grow: 0;

    display: block;
    max-width: var(--headimage_width);
    border-radius: 16%;
    padding: 16px;
    margin: auto;
}

.homeTitle {
    flex-grow: 0;

    margin-top: 0;
    margin-bottom: 0;
}

.homeContainer {
    flex-grow: 1;

    max-width: var(--post_width);
    min-width: var(--post_width);
    margin: 0 auto;
}

.pageTop {
    flex-grow: 0;
    flex-shrink: 0;

    max-width: var(--post_width);
    min-width: var(--post_width);
    margin: 0 auto;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.pageTopDivider {
    flex-grow: 0;
    flex-shrink: 0;

    max-width: var(--post_width);
    min-width: var(--post_width);
    margin-left: auto;
    margin-right: auto;
}

.postContainer {
    flex-grow: 1;

    max-width: var(--post_width);
    min-width: var(--post_width);
    padding-top: 1em;
    padding-bottom: 1em;
    margin: 0 auto;
}

.pageBottomDivider {
    flex-grow: 0;
    flex-shrink: 0;

    max-width: var(--post_width);
    min-width: var(--post_width);
    margin-left: auto;
    margin-right: auto;
}

.pageBottom {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: flex-start;

    max-width: var(--page_width);
    margin-bottom: 0;
}

.pageBottomItem {
    flex-grow: 1;

    margin-top: 0;
    margin-bottom: auto;
}

/* rendering on mobile device: */
@media (orientation: portrait) {

    /* set the variables */
    html {
        /* use 100% instead of 100vw to avoid scrollbar */
        --page_width: 100%;
        --post_width: 100%;
        --headimage_width: 25vw;
    }

    /* arrange pageBotton items in column */
    .pageBottom {
        flex-direction: column;
        height: auto;
    }

    .pageBottomItem {
        flex: none;
        width: 100%;
    }

    .pageTop {
        box-sizing: border-box;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    .homeContainer {
        box-sizing: border-box;
        /* set a small left & right padding */
        padding-left: 1em;
        padding-right: 1em;
    }

    .homeHeader {
        text-align: center;
    }

    .postContainer {
        box-sizing: border-box;
        /* set a small left & right padding */
        padding-left: 1em;
        padding-right: 1em;
    }

    .pageBottom {
        box-sizing: border-box;
    }
}