/**
基础通用 css
 */

:root {

    /*--dark-mode-bg-color: rgb(48,48,48);*/

    /* 网站主体最大宽度 */
    --container-max-width: 2560px;
    /* 网站边距 */
    --container-padding: calc(1rem * 2);
    /* 图片比例 */
    --image-scale: calc(1 / 16 * 9);

    /* col 元素的默认边距*/
    --col-padding: calc(1rem * 0.75 * 2);

    --color-miku: #39c5bb;
    --color-miku-dark: #30a59c;
    --color-miku-transparent: #39c5bbb0;

    --color-light-1: white;
    --color-light-2: rgba(0, 0, 0, 0.05);
    --color-light-3: rgba(0, 0, 0, 0.1);

    --color-dark-1: #0f0f0f;
    --color-dark-2: #606060;

    --color-pink: #ff69b4;
    --color-pink-hover: #e85aa0;
    --color-pink-active: #db5599;
    --color-pink-border: #cc4f8f;
    --color-pink-shadow: rgba(255, 105, 180, 0.5);



}

@media (min-width: 992px) {

    :root {
        --container-padding: calc(1.5rem * 2);
    }
}


/**
主体默认颜色
*/

body {
    background-color: var(--color-light-2);
}

body .container-fluid {
    background-color: var(--color-light-1);
    max-width: var(--container-max-width);
}



/**
增加html4的兼容
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block
}


/**
设置默认 a 标签 的文字颜色
 */
a,
.nav-link,
.page-link {
    color: var(--color-dark-1);
    text-decoration: none;
}

a:hover,
.nav-link:hover,
.nav-link:focus,
.nav-link:hover,
.page-link:hover {
    color: var(--color-miku);
}


/*设置 a标签 注销样式*/
a.disabled {
    color: var(--color-dark-2);
    opacity: .75;
    pointer-events: none;
}


/*所有图片自动圆角*/
img {
    border-radius: .25rem;
    font-size: 0.75rem;
}


/** ======================
菜单相关
 */
/**
取消下拉菜单和触发按钮间的间隔, 避免反复显示
 */
.dropdown-menu {
    margin-top: 0;
}

/**
设置菜单选项 在激活页面的颜色
跳过第一个选项
# 因为有缓存导致无法使用
 */
/* .navbar .navbar-nav .nav-item.active:not(:first-child) .nav-link {
    color: var(--color-miku);
} */


/** ===================*/

.bg-light-1 {
    background-color: var(--color-light-1) !important;
}

.bg-light-2 {
    background-color: var(--color-light-2) !important;
}

.text-dark-1 {
    color: var(--color-dark-1) !important;
}

.text-dark-2 {
    color: var(--color-dark-2) !important;
}

/**
自定义颜色 初音绿
 */

.text-miku {
    color: var(--color-miku) !important;
}

.bg-miku {
    background-color: var(--color-miku) !important;
}

.border-miku {
    border-color: var(--color-miku) !important;
}

.text-bg-miku {
    color: #fff !important;
    background-color: var(--color-miku) !important;
}


/**
自定义 初音绿按钮
 */

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

}

.btn-outline-miku {
    --bs-btn-color: var(--color-miku);
    --bs-btn-border-color: var(--color-miku);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-miku-dark);
    --bs-btn-hover-border-color: var(--color-miku-dark);
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-miku-dark);
    --bs-btn-active-border-color: var(--color-miku-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-miku-transparent);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-miku-transparent);
    --bs-gradient: none;

}

.btn-light-2 {
    --bs-btn-color: var(--color-dark-1);
    --bs-btn-bg: var(--color-light-2);
    --bs-btn-border-color: var(--color-light-2);
    --bs-btn-hover-color: var(--color-dark-1);
    --bs-btn-hover-bg: var(--color-light-3);
    --bs-btn-hover-border-color: var(--color-light-3);
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: var(--color-dark-1);
    --bs-btn-active-bg: var(--color-light-3);
    --bs-btn-active-border-color: var(--color-light-3);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-dark-1);
    --bs-btn-disabled-bg: var(--color-light-3);
    --bs-btn-disabled-border-color: var(--color-light-3);

    border: none;
}

.btn-dark-1 {
    --bs-btn-color: var(--color-light-1);
    --bs-btn-bg: var(--color-dark-1);
    --bs-btn-border-color: var(--color-dark-1);
    --bs-btn-hover-color: var(--color-light-1);
    --bs-btn-hover-bg: var(--color-dark-1);
    --bs-btn-hover-border-color: var(--color-dark-1);
    --bs-btn-focus-shadow-rgb: 66, 70, 73;
    --bs-btn-active-color: var(--color-light-1);
    --bs-btn-active-bg: var(--color-dark-1);
    --bs-btn-active-border-color: var(--color-dark-1);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-light-1);
    --bs-btn-disabled-bg: var(--color-dark-1);
    --bs-btn-disabled-border-color: var(--color-dark-1);

    border: none;
}






/* 实心粉色按钮 */
.btn-pink {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-pink);
    --bs-btn-border-color: var(--color-pink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-pink-hover);
    --bs-btn-hover-border-color: var(--color-pink-active);
    --bs-btn-focus-shadow-rgb: 255, 105, 180;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-pink-active);
    --bs-btn-active-border-color: var(--color-pink-darker);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-pink);
    --bs-btn-disabled-border-color: var(--color-pink);
    --bs-btn-disabled-opacity: 0.65;
}

/* 描边粉色按钮 */
.btn-outline-pink {
    --bs-btn-color: var(--color-pink);
    --bs-btn-border-color: var(--color-pink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-pink);
    --bs-btn-hover-border-color: var(--color-pink);
    --bs-btn-focus-shadow-rgb: 255, 105, 180;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-pink);
    --bs-btn-active-border-color: var(--color-pink);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-pink);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-pink);
}





/**
自定义背景颜色 半透明
 */
.bg-transparent-half {
    background-color: #00000080 !important;
}






/**
绝对定位专用属性
 */

/*
.top-0 {
    top: 0;
}

.bottom-0 {
    bottom: 0;
}*/




/** 滚动条 ====================================================*/

/* 滚动槽宽度 */
::-webkit-scrollbar {
    width: 15px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
    border-radius: .25rem;
    background: var(--color-light-2);

}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: .25rem;
    background: var(--color-miku);
    width: 300px;
}

/* 滚动条滑块 hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--color-miku-dark);
}

/** ====================================================*/


/*清除浮动*/
.clear-both {
    clear: both;
}

/* 鼠标手势 可点击 */
.cursor-pointer {
    cursor: pointer !important;
}

/* 鼠标手势 抓取 */
.cursor-grabbing {
    cursor: grabbing !important;
}

/* 禁用鼠标事件 */
.pointer-events-none {
    pointer-events: none;
}

/**
设置最小高度
 */
.mh-90vh {
    min-height: 90vh;
}

.mh-75vh {
    min-height: 75vh;
}





.text-1-rows {
    height: 1.5rem;
    overflow: hidden;
}

.text-2-rows {
    height: 2.5rem;
    overflow: hidden;
    line-height: 1.25rem;
}

.text-3-rows {
    height: 3.75rem;
    overflow: hidden;
    line-height: 1.25rem;
}



.fs-100 {
    font-size: 1rem !important;
}

.fs-875 {
    font-size: 0.875rem !important;
}

.fs-75 {
    font-size: 0.75rem !important;
}

.fs-625 {
    font-size: 0.625rem !important;
}

.fs-50 {
    font-size: 0.50rem !important;
}

/*sm*/
@media (min-width: 576px) {
    .fs-sm-100 {
        font-size: 1rem !important;
    }

    .fs-sm-875 {
        font-size: 0.875rem !important;
    }

    .fs-sm-75 {
        font-size: 0.75rem !important;
    }

    .fs-sm-625 {
        font-size: 0.625rem !important;
    }

    .fs-sm-50 {
        font-size: 0.50rem !important;
    }
}


/*md*/
@media (min-width: 768px) {
    .fs-md-100 {
        font-size: 1rem !important;
    }

    .fs-md-875 {
        font-size: 0.875rem !important;
    }

    .fs-md-75 {
        font-size: 0.75rem !important;
    }

    .fs-md-625 {
        font-size: 0.625rem !important;
    }

    .fs-md-50 {
        font-size: 0.50rem !important;
    }
}




@media (min-width: 576px) {

    .w-sm-auto {
        width: auto !important;
    }

    .w-sm-50 {
        width: 50% !important;
    }

    .w-sm-75 {
        width: 75% !important;
    }

    .w-sm-100 {
        width: 100% !important;
    }


}


/*md*/
@media (min-width: 768px) {

    .w-md-auto {
        width: auto !important;
    }

    .w-md-50 {
        width: 50% !important;
    }

    .w-md-75 {
        width: 75% !important;
    }

    .w-md-100 {
        width: 100% !important;
    }


}

/*lg*/
@media (min-width: 992px) {

    .w-lg-50 {
        width: 50% !important;
    }

    .w-lg-75 {
        width: 75% !important;
    }

    .w-lg-100 {
        width: 100% !important;
    }

}

/*xl*/
@media (min-width: 1200px) {

    .w-xl-50 {
        width: 50% !important;
    }

    .w-xl-75 {
        width: 75% !important;
    }

    .w-xl-100 {
        width: 100% !important;
    }

}

/*
放大元素1.5倍
*/
.transform_scale_150 {
    transform: scale(1.5);
}


/* 
设置元素的宽高比为16:9 
*/
.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
}

/**
单独设置元素的圆角
*/
.rounded-top-start {
    border-top-left-radius: var(--bs-border-radius) !important;
}

.rounded-top-end {
    border-top-right-radius: var(--bs-border-radius) !important;
}

.rounded-bottom-start {
    border-bottom-left-radius: var(--bs-border-radius) !important;
}

.rounded-bottom-end {
    border-bottom-right-radius: var(--bs-border-radius) !important;
}



/*
自适应性模板
=================================================
*/


/*sm*/
@media (min-width: 576px) {}

/*md*/
@media (min-width: 768px) {}

/*lg*/
@media (min-width: 992px) {}

/*xl*/
@media (min-width: 1200px) {}

/*xxl*/
@media (min-width: 1400px) {}