:root{
    --fas-30y-bg: rgba(255,255,255,0.6);
    --fas-30y-border: #dfcfbb;
    --ec-suptext: #3d3d3d;
    --fas-30y-active: #735591;
    --fas-white: #ffffff;
    body{
        background-image: url(https://p2.bahamut.com.tw/PRJ/30y/top-sky.png);
    }
}

html[data-theme=dark] {
    --fas-30y-bg: rgba(39,39,40,0.9);
    --fas-30y-active: #aa99be;
    --fas-30y-border: #444444;
    --ec-suptext: #cfcfcf;
    body{
        background-image: url(../image/30y-bg-dark.webp);
        background-size: cover;
        background-repeat: repeat-y;
        background-attachment: fixed;
        background-position: center;
    }
    .sidenav-section__row:has(.sidenav-section__setting) {
        background: rgba(39, 39, 40, 0.9);
    }
}

body{
    background-image: url(https://p2.bahamut.com.tw/PRJ/30y/top-sky.png);
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-position: center;
}

.kv-section__logo{
    display: none;
}

.kv-section__bg{
    cursor: pointer;
}

.kv-section__img{
    height: auto;
}

.main-container .main-container__content{
    margin-top: 10px;
}

.main-container__content .main-container__decobox img {
    width: 100%;
    max-width: 1440px;
    max-height: 500px;
    cursor: pointer;
}

.main-container{
    background: none;
}

.main-container{
    position: relative;
}

.main-container:after{
    content: "";
    position: fixed;
    top: 40px;
    left: -8px;
    background-image: url(https://p2.bahamut.com.tw/PRJ/30y/img-ribbon.png);
    background-repeat: no-repeat;
    transform: rotate(-45deg);
    background-position: left top;
    background-size: 100%;
    width: 343px;
    height: 141px;
    filter: drop-shadow(0 0 3px rgba(14, 22, 113, 0.7));
    z-index: -1;
    transition: all 0.5s;
}

.main-container:before{
    content: "";
    position: fixed;
    top: 40px;
    right: -8px;
    background-image: url(https://p2.bahamut.com.tw/PRJ/30y/img-ribbon.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 100%;
    transform: rotate(15deg);
    width: 343px;
    height: 141px;
    filter: drop-shadow(0 0 3px rgba(14, 22, 113, 0.7));
    z-index: -1;
    transition: all 0.5s;
}


.section-index__title .fa-angle-right{
    color: var(--secondary-text);
}

.section-index__title a{
    color: var(--primary-text);
}

.section-ec .update-time{
    color: var(--ec-suptext);
}

.sidenav-section__link.is-active{
    background-color: rgba(115, 85, 145, .1) !important;
}

.main-sidebar__left{
    background: var(--fas-30y-bg) !important;
    backdrop-filter: blur(4px);
}

.main-sidebar__left .sidenav-section__link:hover {
    background-color: rgba(115, 85, 145, .1) !important;
}

.sidenav-section__row:has(.sidenav-section__setting) {
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(4px);
}

.index-fuli__wrapper{
    background: var(--fas-30y-bg);
}

.sidenav-section__link:has(.event-prj__button):hover {
    background-color: rgba(115, 85, 145, .1) !important;
}

.index-card__body,.section-anime .index-card__item,.section-rank__body,.index-card__item.create__item,.index-list__container,.section-index__tab,.main-container__footer ,.section-ec__wrapper{
    background: var(--fas-30y-bg);
}

.index-card__item:hover:not(.create__item) .index-card__body {
    background: var(--f1-bg);
}

.index-card__item.ec__item {
    background: var(--fas-30y-bg);
}

.index-card__item:hover .index-card__text {
    color: var(--fas-30y-active) !important;
}

.ec__item .index-card__body{
    background: transparent !important;
}

.index-list__item,.index-fuli__item{
        border-bottom: 1px solid var(--fas-30y-border);
}

.section-index__inner{
        box-shadow: inset 0 -1px 0 var(--fas-30y-border);
}

.section-index__tab.is-active,.section-index__tab:hover{
    background: var(--fas-30y-active) !important;
}

.section-index__item.tab__item.is-active .index-list__tab,.index-list__tab:hover,.sidenav-section__link.is-active,.sidenav-section__link:hover{
    color: var(--fas-30y-active) !important;
}

.headline-news__label,.index-fuli__head{
    background: var(--fas-30y-active) !important;
}

.section-index__label .label__main{
    background: var(--fas-30y-active) !important;
}

.section-index__label:has(.label__sub) .label__sub {
    background: rgba(0, 0, 0, .8) !important;
}

.headline-news__textbox{
    border-color: var(--fas-30y-active) !important;
    background-image: linear-gradient(180deg, transparent, rgba(115, 85, 145, .8))
}

.index-card__body.card__body{
    background: none;
}

.index-list__body--flex-top:hover .index-list__heading--b,
.index-fuli__content:hover {
    color: var(--fas-30y-active) !important;
}

.sidenav-section__top{
    background: none;
}

.tab__line {
    background: var(--fas-30y-active) !important;
}

@media (min-width: 1280px) {
    body:after {
        content: "";
        position: fixed;
        bottom: 0;
        left: 0;
        background-image: url(../image/30y-island-left.webp);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: left bottom;
        width: 500px;
        height: 500px;
        filter: drop-shadow(0 0 3px rgba(14, 22, 113, 0.7));
        z-index: -1;
        transition: all 0.5s;
        animation: floating 4s ease-in-out infinite;
    }
    body:before {
        content: "";
        position: fixed;
        bottom: 0;
        right: 0;
        background-image: url(../image/30y-island-right.webp);
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: 100%;
        width: 500px;
        height: 500px;
        filter: drop-shadow(0 0 3px rgba(14, 22, 113, 0.7));
        z-index: -1;
        transition: all 0.5s;
        animation: floating 4s ease-in-out infinite;
    }
}


.main-container__row{
    position: relative;
}


.section-index__title{
    margin-left: 36px;
    position: relative;
}

.section-index__title:before{
    content: "";
    position: absolute;
    bottom: -7px;
    left: -31px;
    background-image: url(../image/30y-title-item.png);
    background-repeat: no-repeat;
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 0 3px rgba(206, 151, 94, 0.9));
    z-index: -1;
}

.btn.btn-filter {
    background: var(--fas-30y-bg) !important;
}


@media (max-width: 1750px) {
    body:after{
        left: 20px;
    }
}


@media (max-width: 650px) {

    .main-container:after{
        top: 44px;
        left: 0;
        background-size: 60%;
    }

    .main-container:before{
        top: 44px;
        right: 0;
        background-size: 60%;
    }

    body:after{
        bottom: 30px;
        left: 60px;
        background-size: 36%;
    }

    body:before{
        bottom: 30px;
        right: 20px;
        background-size: 50%;

    }
}


@keyframes floating {
    0% {
        transform: translateY(0%);
    }

    50% {
        transform: translateY(4%);
    }

    100% {
        transform: translateY(0%);
    }
}