:root {
    --main-color: #3F1000;
    --main-hover-color: #9F70B0;
}

*:not(.ck-content *) {
    /* font-size: 18px; */
    font-family: '微軟正黑體', 'Arial';
}

/* font */
@font-face {
    font-family: 'Source Han Serif';
    src: url('../font/SourceHanSerifTW-VF.otf.woff2') format("woff2");
}

.icon {
    width: 30px;
    height: 30px;
}

/* utils */
.width-fit {
    width: fit-content;
}

.cursor-pointer {
    cursor: pointer;
}

.no-decoration {
    text-decoration: none;
    color: inherit;
}

.no-decoration:hover {
    text-decoration: none;
    color: inherit;
}

label.required::before {
    content: '*';
    color: red;
}

/* theme */
.bg-purple {
    background-color: #3F1000;
}

.purple {
    color: #3F1000;
}

.btn-purple {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--main-color);
    --bs-btn-border-color: var(--main-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--main-color);
    --bs-btn-hover-border-color: var(--main-color);
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--main-color);
    --bs-btn-active-border-color: var(--main-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--main-color);
    --bs-btn-disabled-border-color: var(--main-color);
}

.btn-purple:hover {
    background-color: var(--main-hover-color);
    border-color: var(--main-hover-color);
}


.btn-outline-purple {
    --bs-btn-color: var(--main-color);
    ;
    --bs-btn-border-color: var(--main-color);
    ;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--main-color);
    ;
    --bs-btn-hover-border-color: var(--main-color);
    ;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--main-color);
    ;
    --bs-btn-active-border-color: var(--main-color);
    ;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--main-color);
    ;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--main-color);
    ;
    --bs-gradient: none;
}

.btn-outline-purple:hover {
    background-color: var(--main-hover-color);
    border-color: var(--main-hover-color);
}

.ck-content table,
.ck-content td,
.ck-content tr,
.ck-content th {
    border: none !important;
}
.ck-content span[lang] {
    font-style: inherit !important;
}

.ytp-cued-thumbnail-overlay-image {
    background-size: contain;
}

/* page */
.page-title {
    font-size: 41px;
    font-weight: 600;
    color: #6A6392;
    font-family: 'Source Han Serif';
    text-align: center;
    margin-bottom: 2.5rem;
}

.page-body {
    min-height: 100vh;
}

/* news */
.news-pic {
    border-radius: 5px;
    background-color: transparent;
    height: 400px;
    width: auto;
    object-fit: contain;
}

.news-title {
    color: #59537B;
    font-size: 25px;
}

.news-subtitle {
    color: #A07EAF;
    font-size: 21px;
}

.news-time {
    color: #929099;
    font-size: 15px;
}

/* sundaySchool */
.sundaySchool-pic {
    border-radius: 5px;
    background-color: transparent;
    height: 400px;
    width: auto;
    object-fit: contain;
}

.sundaySchool-title {
    color: #59537B;
    font-size: 29px;
}

.sundaySchool-subtitle {
    color: #A07EAF;
    font-size: 21px;
}

.sundaySchool-time {
    color: #929099;
    font-size: 17px;
}

/* gallery */
.gallery-pic {
    border-radius: 5px;
    background-color: transparent;
    height: 400px;
    width: auto;
    object-fit: contain;
}

.gallery-title {
    color: #59537B;
    font-size: 25px;
}

.gallery-date {
    color: #929099;
    font-size: 19px;
}

.responsive-inside iframe {
    width: 100%;
    height: 100%;
}

.party-time-title {
    font-size: 21px;
    background-color: #6A6392;
    color: white;
}

.party-time-desc {
    font-size: 23px;
    color: #484549;
}

.party-time-date {
    font-size: 19px;
    color: #484549;
}

.team-time-title {
    font-size: 21px;
    background-color: #6A6392;
    color: white;
}

.team-time-desc {
    font-size: 23px;
    color: #484549;
}

.team-time-date {
    font-size: 19px;
    color: #484549;
}


.worship {
    background-color: transparent;
    height: 100%;
}

.worship-video {
    height: 25em;
}
@media (max-width: 992px) {
    .worship-video {
        height: 12em;
    }
}


.worship-title {
    font-size: 31px;
    color: #6A6392;
}

.worship-desc {
    font-size: 23px;
    color: #0F0F1E;
}

.worship-date {
    font-size: 17px;
    color: #535362;
}


.musicStory {
    background-color: transparent;
    height: 100%;
}

.musicStory-video {
    height: 25em;
}
@media (max-width: 992px) {
    .musicStory-video {
        height: 12em;
    }
}
.musicStory-title {
    font-size: 31px;
    color: #6A6392;
}

.musicStory-desc {
    font-size: 25px;
    color: #0F0F1E;
}

.musicStory-date {
    font-size: 19px;
    color: #535362;
}
