@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Noto+Sans+TC:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    --c-l-width: 60vw;

    --default-font: Roboto;
    --chinese-font: 'Noto Sans TC', Arial;
    --coding-font: 'JetBrains Mono';

    --c-l-item-color: #323232;
    --hyper-link-color: #ffffff;
}

.c_l_item, .c_l_i_content {
    font-family: var(--default-font), var(--default-font),  serif;
}

body.dark {
    --c-l-item-color: #e3e3e3;
}

@media only screen and (max-width: 767px) {
    .change_log_list {
        --c-l-width: 90vw;
    }
}

.change_log_list {
    width: var(--c-l-width);
    padding: 10px;
    border-left: 2px solid white;
    margin-bottom: 15vh;
}

.c_l_item {
    width: calc(var(--c-l-width)- 10vw);
    border-bottom: 3px solid white;
    padding: 10px;
    margin-top: 50px;
    color: var(--c-l-item-color);
}

.c_l_item:first-child {
    padding-top: 5vh;
}

.c_l_item .header {
    width: 100%;
    color: var(--c-l-item-color);
    font-weight: bold;
    flex-direction: row;
    display: flex;
}

.c_l_item .date {
    margin-left: auto;
    color: var(--c-l-item-color);
}

.c_l_item:first-child {
    margin-top: 20px;
}

.c_l_i_content {
    padding-top: 30px;
    color: var(--c-l-item-color);
}

.c_l_i_content a {
    text-decoration: none;
    color: var(--hyper-link-color);
    border-bottom: 1px solid var(--hyper-link-color);
}

.c_l_i_content ul, ol {
    list-style-position: inside;
}

.c_l_i_content img {
    width: 80%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}