html {
    box-sizing: border-box;
    letter-spacing: 1px;
    line-height: 1.3;
    font-size: 62.5%;
    overflow-y: scroll;

    --main-color-rgb: #444;
    --bg-color-rgb: #fff;
    --main-color: rgb(var(--main-color-rgb));
    --bg-color: rgb(var(--bg-color-rgb));
    --main-color-soft: rgba(var(--main-color-rgb), 0.6);
    --bg-color-soft: rgba(var(--bg-color-rgb), 0.6);
}

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: inherit;
    /*
    font-size: 1.6rem;
    letter-spacing: inherit;
    line-height: inherit;
    */
}

body {
    margin: 0 auto;
    padding: 0 20px;
    width: 800px;
    font-size: 1.6rem;
    color: var(--main-color);
    background-color: var(--bg-color);
}

#tweet_archive {
    display: none;
    padding: 40px 0 80px;
}

.card {
    box-shadow: 4px 4px;
    margin-right: 4px;
    margin-bottom: 4px;
}

.page-title {
    position: relative;
    padding: 1em;
    margin-bottom: 40px;
    text-align: center;
    font-size: 3rem;
    font-weight: normal;
    letter-spacing: 3px;
    border-radius: 50px;
    box-shadow: 4px 4px;
    background-color: #fff;
}

/* セクションごとの背景・ボックス調整 */
section.month-section {
    background-color: #fff;
    border-radius: 20px;
    padding: 2rem;
}

.month-section:not(:last-child) {
    margin-bottom: 40px;
}

#tweet_container::after {
    content: "";
    display: block;
    height: 0;
}

/* 月の見出し部分 */
section.month-section>header {
    text-align: center;
    margin-bottom: 1.5rem;
}

section.month-section>header>h2 {
    font-size: 2rem;
    color: #fff;
    font-weight: bold;
    letter-spacing: 2px;
    display: inline-block;
    padding: 1rem 5em;
    background-color: var(--main-color);
    box-shadow: 6px 6px 0 0 var(--main-color-soft);
}

/* 日ごとのリスト */
ul.daily-list {
    list-style-type: none;
    background-color: #fff;
    border-radius: 2rem;
    padding: 0;
}

/* 日ごとのアイテム */
li.daily-item {
    padding: 1rem;
    border-bottom: dotted 4px;
    display: flex;
    flex-direction: column;
}

li.daily-item:last-child {
    border-bottom: none;
}

/* 日付・番号のラップ */
.daily-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* No.部分 */
.item-no {
    font-size: 1.2em;
    font-weight: bold;
}

/* 日付部分 */
.item-date {
    color: #999;
}

/* 本文 */
.item-text {
    font-weight: bold;
    color: #555;
    margin-left: 2rem;
    white-space: pre-line;
    /* 改行を反映 */
}

#tweet_archive footer {
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 800px;
    height: 80px;
    margin-left: -20px;
    padding: 10px;
    background-color: var(--bg-color-soft);
}

#tweet_archive footer nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    height: 100%;
}

#tweet_archive footer nav a {
    display: flex;
    align-items: center;
    padding: 20px;
    color: inherit;
    font-weight: bold;
    white-space: nowrap;
    border-radius: 3rem;
    box-shadow: 4px 4px;
    background-color: #fff;
    text-decoration: none;
    transition: 0.4s;
}

#tweet_archive footer nav a:hover {
    transform: scale(1.1);
}

/* 冬 */
html:has(body[data-season="winter"]) {
    --main-color-rgb: 105, 119, 116;
    /* #697774 */
    --bg-color-rgb: 251, 251, 251;
    /* #fbfbfb */
}

/* 春 */
html:has(body[data-season="spring"]) {
    --main-color-rgb: 209, 39, 72;
    /* #d12748 */
    --bg-color-rgb: 247, 200, 209;
    /* #f7c8d1 */
}

/* 夏 */
html:has(body[data-season="summer"]) {
    --main-color-rgb: 16, 122, 159;
    /* #107a9f */
    --bg-color-rgb: 120, 213, 246;
    /* #78d5f6 */
}

/* 秋 */
html:has(body[data-season="fall"]) {
    --main-color-rgb: 206, 92, 25;
    /* #ce5c19 */
    --bg-color-rgb: 255, 177, 131;
    /* #ffb183 */
}