/* zibuyu/style.css */

/**
 * General
 */

:root {
    --col-bg: whitesmoke;
}

body {
    margin: 0;
    /*font-family: Verdana,Geneva,sans-serif;*/
    /* sans-serif */
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    /* serif */
    /*font-family: "SimSun", "STSong", "Songti SC", "PMingLiU", "Microsoft JhengHei", "MingLiU", serif;*/
    font-size: 14px;
    text-align: left;
}

.small-text {
    font-size: 13px;
}

#zibuyu .column-l { margin-right: 0.5em; }
#zibuyu .column-r { margin-left: 0.5em; }
#zibuyu .column-l, #zibuyu .column-r {
    display: flex;
    flex-direction: column;
    padding: 0.5em;
    margin-bottom: 1em;
    border: 1px dotted black;
}

#zibuyu .pageless-column {
    border: none;
}

.page > p {
    margin: 0;
    margin-bottom: 1em;
}

.page-number {
    margin: 0;
    margin-top: auto;
}

.hanyu {
    font-size: 16px;
}

.pinyin {
    font-size: 13px;
    color: var(--col-off);
}

.style-thought {
    /*border: 1px solid var(--col-off);*/
    /*box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.5);*/
    /*text-shadow:
        -1px 0px 0 #ddd,
        0px -1px 0 #ddd,
        1px 0px 0 #ddd,
        0px 1px 0 #ddd;*/
}

.style-loud > .hanyu {
    /* serif */
    font-family: "SimSun", "STSong", "Songti SC", "PMingLiU", "Microsoft JhengHei", "MingLiU", serif;
    font-size: 24px;
}

.highlighted {
    outline: 1px dotted var(--col-off);
}

/**
 * Specific
 */

#header {
    margin: 0;
    margin-top: 5em;
}

#side-boxes {
    font-family: Georgia, Times, Times New Roman, serif;
    font-size: 16px;
    text-shadow: none;
}

#english-div {
    position: fixed;
    top: 0;
    background: linear-gradient(var(--col-bg) 75%, rgba(245,245,245,0));
    width: 100%;
}

#english {
    width: 900px;
    margin: 1em auto;
    font-weight: bold;
}

#index {
    width: 75%;
    margin: 0 auto;
    font-size: 16px;
}
 
#index td {
    text-align: center;
}

/*
 * styles for mobile
 */
@media only screen and (max-width: 768px) and (pointer: coarse) and (hover: none) {

    #site {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    /* 120% fonts increase */
    body { font-size: 16.8px; /*21px;*/ }
    .small-text { font-size: 15.6px; /*19.5px;*/ }
    .hanyu { font-size: 19.2px; /*24px;*/ }
    .pinyin { font-size: 15.6px; /*19.5px;*/ }
    .style-loud > .hanyu { font-size: 28.8px; /*36px;*/ }
    #index { font-size: 19.2px; /*24px;*/ }

    .row {
        flex-direction: column !important;
    }
    .column-l, .column-r {
        margin: 0.5em;
    }

    #english {
        width: 100%;
        margin: 0.5em;
    }
}