body {
    background-color: #121212;
    color: #ffffff;
}

.container {
    margin-top: 50px;
}

.mod-list {
    margin-top: 30px;
}

.mod-list .form-check {
    display: flex;
    align-items: center; /* チェックボックスとラベルを縦方向で揃える */
    margin-bottom: 10px; /* 各項目の間に余白を追加 */
}

.mod-list .form-check-input {
    margin-right: 10px; /* チェックボックスとラベルの間隔を調整 */
}

.mod-list .form-check-label {
    flex: 0 0 200px; /* MOD名の幅を固定する（ここは調整可能） */
    text-align: left;
}

.mod-list .mod-description {
    flex: 1; /* 説明文部分が可変するように設定 */
    text-align: left;
}

h1, h2 {
    color: #ffffff;
}

.form-check-label {
    color: #ffffff;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

/* フッターを画面下部に固定する */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.footer {
    margin-top: auto;
    background-color: #121212; /* フッターの背景を黒に統一 */
    padding: 20px 0;
    color: #fff;
}

.footer-icon {
    border-radius: 50%;
    width: 60px; /* アイコンのサイズを少し小さく調整 */
    height: 60px;
    margin-bottom: 10px;
}

.btn-outline-primary {
    margin-top: 10px;
}

/* 更新履歴のスタイルを背景色と統一 */
.update-log {
    max-height: 100px;
    overflow-y: auto;
    margin-bottom: 20px;
    border: 1px solid #444; /* 境界線を少し暗くする */
    padding: 10px;
    background-color: #121212; /* 背景色を黒に統一 */
    color: #fff; /* 文字色を白に統一 */
}

.update-log ul {
    font-size: 16px;
    list-style-type: disc;
}