:root {
        /* Dark mode colors */
        --d-bg: #0a0a0a; /* header */
        --d-bg2: #151515; /* body */
        --d-bg2a: #1f1f1f;
        --d-bg3: #252525;
        --d-bg4: #333;
        --d-color: #fff;
        --d-color2: #ddd;
        --d-color3: #bbb;


        /* Light mode colors */
        --l-bg: #fff; /* header */
        --l-bg2: #f5f5f7; /* body */
        --l-color: #000;
        --l-color2: #e5e7eb;
        --l-color3: #444;


        /* other colors */
        --link: #d72871;

        /* Sizes */
        --width: 1140px;
        --width2: 1102px;
        --padding: 16px;


    }

    /* Basic Reset & Body Style */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body {
        font-family: 'Montserrat', sans-serif;
        line-height: 1.6;
        background-color: var(--d-bg2);
        color: var(--d-color2);
    }
    a {
        text-decoration: none;
        color: var(--link);
        cursor: pointer;
    }
    a, div, button {      
      -webkit-tap-highlight-color: transparent;
    }
    hr {
        border: none;
        border-top: 1px solid #666;
    }
    button {
      cursor: pointer;
    }
    /* Container based on user's preference */
    .container {
        width: 100%;
        max-width:var(--width); 
        margin-left: auto;
        margin-right: auto;
        padding-left: 16px; 
        padding-right: 16px;
    }


    .main-content {
        width: 100%;
    }

    .novel-header-container {
        margin: 90px 0 50px 0;
    }
    .novel-cover-bg {
        position: absolute; /* Needed to position the pseudo-element */
        width: 100%;
        overflow: hidden;
    }
    .novel-cover-container {
        position: relative;
    }
    .novel-cover-bg,
    .novel-cover-container {
        height: 200px;
    }

    .novel-cover-content {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        filter: blur(6px);
        -webkit-filter: blur(6px);
        position: absolute;
        top: -10px;
        left: -1%;
        width: 102%;
        height: 220px;
    }
    .novel-cover {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
      }
      .novel-cover img {
        border-radius: 8px;
        box-shadow: 0 2px 4px rgb(0 0 0 / 66%);
        width: 200px;
      }

      main.novel h1.title {
        font-size: 20px;
        text-align: center;
      }

      main.chapter h1.title {
        font-size: 16px;
        margin-bottom: 32px;
      }
      main.chapter .body div p {
        margin: 24px 0;
      }
      
    

      .btn-container {
        display: flex; /* Enable flexbox for horizontal arrangement */
        justify-content: center; /* Center the items horizontally */
        align-items: center; /* Vertically align items in the center (optional) */
        margin: 20px 0;
      }
      
      .btn-container .link-btn {
        padding: 2px 8px; /* Add some padding for better visual appearance */
        margin: 0 5px; /* Add a little horizontal margin between the elements */
        text-decoration: none; /* Remove underlines from links */
        border-radius: 5px; /* Optional: Add rounded corners */
        border: 1px solid #505050;
        background-color: #505050;
        color: #ffffff;
      }
      
      .btn-container .link-btn:hover {
        background-color: #151515;
      }

      main.novel .chapter-list {
        height: 600px;
        width: 100%;
        overflow: auto;
      }

      main.novel .chapter-list .grid-container {
        padding: 0;
      }

      main.novel .chapter-list li {
        padding: 6px;
      }
      main.novel .chapter-list li:nth-child(odd) {
        background-color: var(--d-bg2a);
      }
      main.novel .chapter-list li:hover {
        background-color: var(--d-bg4);
      }

      main.novel .chapter-list span.release-date {
        font-size: 12px;
        font-style: italic;
      }

      main.novel .synopsis p {
        margin-bottom: 16px;
      }
      main.novel .synopsis p:nth-child(1), main.novel .synopsis p:last-child {
        margin: 0;
      }
      main.novel .chapter-list ul li {
        cursor: pointer;
      }




      
      main.chapter .chapter-container {
        display: flex;
        justify-content: center;
        padding: 20px 0;
      }
      
      main.chapter .chapter-container .body {
        width: var(--width);
        padding: var(--padding);
      }

      main.chapter .controls {
        display: flex;
        justify-content: space-between;
      }

      main.chapter .settings-bg {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        background-color: #fff;
        opacity: .2;
        z-index: 100;
        display: none;
      }
      main.chapter .settings {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: rgba(0, 0, 0, 0.6) 0px 2px 4px;
        background-color: var(--d-bg2);
        width: 260px;
        padding: 10px;   
        border: 1px solid var(--d-color3);
        border-radius: 10px;
        z-index: 110;
        display: none;
      }
      main.chapter .themes {
        margin-bottom: 4px;
        background-color: #fff;
        border-radius: 4px;
        padding: 10px;
      }
      main.chapter .settings .themes button {
        height: 46px;
        width: 46px;
        font-size: 28px;
        border: 1px solid #bbb;
        border-radius: 50%;
        margin: 4px 2px;
      }
      main.chapter .themes button:nth-child(1) {
        background-color: #f5f5f5;
      }
      main.chapter .themes button:nth-child(2) {
        background-color: #e3ceb9;
      }
      main.chapter .themes button:nth-child(3) {
        background-color: #d2e0d1;
      }
      main.chapter .themes button:nth-child(4) {
        background-color: #c3d8dd;
      }
      main.chapter .themes button:nth-child(5) {
        background-color: #f5e4e5;
      }
      main.chapter .themes button:nth-child(6) {
        background-color: #313131;
      }
      main.chapter .themes button:nth-child(7) {
        background-color: #151515;
      }
      main.chapter .themes button:nth-child(8) {
        background-color: #000;
      }

      main.chapter .fonts {
        padding: 4px 6px;
        width: 100%;
        background-color: var(--d-bg2);
        color: #fff;
        font-size: 18px;
        border: 1px solid #bbb;
        border-radius: 4px;
      }
      main.chapter .font-size-setting {
        display: flex;
        justify-content: space-between;
      }
      main.chapter .font-size-setting button {
        width: 26px;
        height: 26px;
        font-size: 20px;
        text-decoration: none;
        border-radius: 5px;
        border: 1px solid #505050;
        background-color: #505050;
        color: #ffffff;
      }

      main.chapter .font-size {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      main.chapter .font-size span {
        font-size: 24px;
      }
      main.chapter .font-size-setting input[type=range] {
        width: 180px;
        height: 26px;
        outline: none;
        cursor: pointer;
      }

      main.chapter .settings .bottom-btns {
        margin-top: 24px;
        display: flex;
        justify-content: space-between;
      }
      main.chapter .settings .bottom-btns button {
        border-radius: 5px;
        border: 1px solid #505050;
        background-color: #505050;
        color: #ffffff;
        padding: 4px 8px;
      }

      main.chapter .settings .fonts option:nth-child(1) {
        font-family: 'Montserrat', sans-serif;
      }
      main.chapter .settings .fonts option:nth-child(2) {
        font-family: 'Open Sans', sans-serif;
      }
      main.chapter .settings .fonts option:nth-child(3) {
        font-family: "Times New Roman", Times, serif;
      }
      main.chapter .settings .fonts option:nth-child(4) {
        font-family: 'Comic Neue', sans-serif;
      }
      main.chapter .settings .fonts option:nth-child(5) {
        font-family: 'Garamond', sans-serif;
      }

      .post-comment-message {
        margin: 8px 0;
        font-size: 14px;
        font-style: italic;
      }
      .post-comment-loader {
        display: none;
      }
      .post-comment-btn {
        cursor: not-allowed;
      }



      #chapter-comments-loader {
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99999;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #loader {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99999;
        width: 100%;
        height: 100%;
        background-color: #000;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .spinner-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }

      .spinner-border {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        border: 0.25em solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spinner-border .75s linear infinite;
      }
      .spinner-sm {
        width: 1.5rem;
        height: 1.5rem;
      }

      .text-danger {
        color: #dc3545;
      }

      .label {
        font-size: 14px;
        color: #6c757d;
      }

      @keyframes spinner-border {
        to {
          transform: rotate(360deg);
        }
      }

      footer {
        border-top: 1px solid #555;
        text-align: center;
        padding: 50px 0;
        margin-top: 100px;
        width: 100%;
        bottom: 0;
        position: relative;
      }

      .pagi-disabled {
        background-color: #151515 !important;
        color: #353535 !important;
        border: 1px solid #353535 !important;
        cursor: not-allowed !important;
      }
      
      .page-container {
        padding: var(--padding);
      }
      main.about h1, 
      main.contact h1 {
        font-size: 24px;
      }