*{
          margin:0rem;
          padding:0rem;
          user-select:none;
          box-sizing:border-box;
          scrollbar-width: none;
      }
      
      img{width:100%;height:100%;margin:0rem;display: block;}
      a{text-decoration:none}
      

div.feature-buttons{
    width:100%;
    height:8%;
    display:flex;
}

button.feature-buttons-style{
    height:100%;
    border-radius: 2rem;
    background:transparent;
    border:0.1rem solid white;
    padding:0.3rem 0.5rem 0.3rem 0.5rem;
    display: inline;
    margin-right:1rem;
    color:white;
}

div#list-buttons-circle{
    width:12%;
    height:100%;
    background:rgb(24, 24 ,24);
    border:0.1rem solid white;
    margin-right:1rem;
    border-radius: 50%;
    padding:0.5rem;
    display: grid;
    place-items: center;
}

div#list-buttons-innercircle{
    width:100%;
    height:100%;
    background:rgb(24, 24 ,24);
    border:0.1rem solid white;
    border-radius: 50%;
}

 aside.side-content{
      width:30%;
      height:100vh;
      background:rgb(24, 24 ,24);
      position: sticky;
      top:0%;
      padding:1rem;
}

button.activeSlide{
    background:white;
    color:black;
}


section.feature-character-info{
    width:100%;
    height:92%;
    display: flex;
    margin-top: 2rem;
    padding-bottom:2rem;
}
      
.featured-character-gallery{
    width:80%;
    display:flex;
    gap:20px;
    overflow-x:auto;
    background:none;
    padding:0.3rem;
    scroll-behavior:smooth;
}

.feature-character-card{
    min-width:100%;
    height:100%;
    background:rgb(48, 48 ,48);
    border-radius:2rem;
}

div#novels-banner{
    width:20%;
    height:100%;
    background:white;
    padding:0.8rem;
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    align-items: center;
    border-radius: 2rem;
}

span.bar-text{
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-top: 3rem;
    font-size:1.2rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

div#bar-circle{
    width:100%;
    height:10%;
    background:none;
    border-radius:50%;
    margin-top:2rem;
}

div.feature-character-profile{
    width:100%;
    height:50%;
    background:none;
    border-radius: 2rem;
}

img.feature-character-card-image{border-radius: 2rem;object-fit: cover;}

div.featured-character-details{
    width: 100%;
    height:50%;
    background:none;
    padding:1rem;
}

p#featured-character-title{
    margin-bottom:1rem;
    color:white;
    font-weight:bold;
    font-size:1.1rem;
}

p#featured-character-description{
    color:white;
    font-family: Arial, Helvetica, sans-serif;
}

div.featured-character-more-info{
    width:100%;
    height:35%;
    background:none;
    display:flex;
    align-items: flex-end;
    justify-content: flex-end;
}

div#featured-character-more-info-view,a.featured-character-more-info-view{
    width:60%;
    height:60%;
    background:white;
    border-radius: 2rem;
    display: grid;
    place-items: center;
    color:black;
    font-weight:bold;
}

img.bar-circle-story-pic{border-radius: 50%;object-fit: cover;}



@media (max-width: 974px) {

     main.main-content-feed{
        width:85%;
        border-right:none;
        padding:6rem 5rem 5rem 5rem;
        position: relative;
    }

    
    aside.side-navigation{
      display:none;
    }

    aside.side-content{
        display:none;
    }
}