/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

:root {
    --el-archive-color-base-1: #151515;
}



/* Archive Vtuber Page */
.el-layout-main .el-main-archive {
    width: 95% !important;
    height: 100% !important;
    margin: 2rem auto;
}

/* Archive Vtuber Header */
.el-archive-header .el-title-link {
    font-size: 3rem;
    font-weight: 600;
}

.el-archive-header .el-header-update {
    font-size: 0.9rem;
    text-align: right;
    margin: 0.5rem;
}

/* Archive Vtuber Section */
.el-main-archive .el-archive-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 1rem 0;
}

/* Archive Section */
.el-main-archive .el-section-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    justify-items: center;
    gap: 20px;
}

/* Archive List Vtuber */
.el-main-archive .el-list-vtuber {
    background-color: #ffffff;
    max-width: 300px;
    border-radius: 8px;
    overflow: hidden;
    border: solid 1px #cccccc;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.28);
}

.el-main-archive .el-vtuber-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
    width: 270px;
    height: 320px;
    padding: 0.5rem;
    margin: auto;
}

.el-main-archive .el-vtuber-card {
    display: flex;
    align-items: center;
    height: 3rem;
    background-color: #f0f0f0;
    margin: 0.5rem 0 0 0;
}

.el-main-archive .el-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 0.5rem;
}

.el-main-archive .el-card-info {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    flex: 1 0 auto;
    width: 50%;
    margin-left: 0.5rem;
}

.el-main-archive .el-info-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.el-main-archive .el-info-production {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Section Pagination */
.el-main-archive .el-section-pagination {
    width: 100%;
    margin: 1rem 0;
}

/* Single Vtuber Footer */
.el-main-archive .el-archive-footer {
    padding: var(--el-main-padding-main-footer);
    border-top: 1px solid var(--el-border-top-footer);
    margin: var(--el-main-margin-main-footer);
}