.section-selector {
width: 100%;
        height: fit-content;
}

.section-selector .list {
display: inline-block;
        width: 90px;
}

.section-selector .list a {
color: var(--text-primary);
    transition: all 0.3s ease-in-out;
}

.section-selector .list a:hover {
color: var(--text-link);
}

.section-selector .list:hover {
color: var(--text-link);
    background-color: var(--bg-secondary);
}

.section-holder {
width: 100%;
    border-radius: 10px;
    /* height:fit-content; */
    height:fit-content;
    background-color: var(--bg-card);
}

@media (max-width:1200px) {
.section-holder{
        width: 100%;
}

}
.section-holder section {
display: none;
    transition: all 0.5s ease-in-out;
    color:var(--text-muted);
}

.active {
display: initial;
    opacity: 1;
}

.book-holder {
display: inline-block;
    height :300px;
    width: 95%;
    background-color: transparent;
    border-radius: 10px;
}

.book-holder-full {
display: inline-block;
    height :fit-content;
    width: 95%;
    background-color: transparent;
    border-radius: 10px;
}

.book-holder .book-cover {
float: left;
    margin: 20px 9px 9px 9px;
    height :282px;
    width: 200px;
    background-color: transparent;
    border-radius: 10px;
    background-size: 200px;
}

.book-holder .book-intro {
margin: 9px;
    padding: 10px;
    line-height: 25px;
    font-size: 20px;
    height :282px;
    width: auto;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.book-holder .book-intro p {
overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 11;
    line-clamp: 11;
    -webkit-box-orient: vertical;
}

.book-holder-full .book-intro-full {
margin: 9px;
    padding: 10px;
    line-height: 25px;
    font-size: 20px;
    height:fit-content;
    width: auto;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--text-primary);
}

.game-holder {
display: inline-block;
    height :218px;
    width: 95%;
    background-color: transparent;
    border-radius: 10px;
}

.game-holder .game-cover {
float: left;
    margin: 20px 9px 9px 9px;
    height :200px;
    width: 200px;
    background-color: transparent;
    border-radius: 10px;
    background-size: 200px;
}

.game-holder .game-intro {
height:332px;
}

.game-holder .button-container {
margin: 9px;
    padding: 10px;
    line-height: 25px;
    font-size: 20px;
    height :200px;
    width: auto;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-holder .button-container .button-holder {
display: unset;
        width: fit-content;
        border-top-left-radius: unset;
        height: 20px;
}

.game-holder .button-container .button-holder:hover {
width: 32%;
    height:40px;
    background-color: var(--text-link);
}

.game-holder .button-container .button-holder a {
line-height: 20px;
        font-size: 12px;
}

.game-holder .button-container .button-holder a:hover {
color: var(--text-link);
}

.game-holder .game-intro p {
overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 11;
    line-clamp: 11;
    -webkit-box-orient: vertical;
}

@media(max-width:1200px) {
.game-holder{
        height:350px;
}

/* Dark Mode Overrides */
[data-theme="dark"] .section-selector .list {
display: inline-block;
        width: 100px;
}

[data-theme="dark"] .section-holder {
width: 100%;
    border-radius: 10px;
    /* height:fit-content; */
    height:fit-content;
    background-color: var(--bg-card);
}

[data-theme="dark"]
.section-holder section {
display: none;
    transition: all 0.5s ease-in-out;
    color: var(--text-primary);
}