body {
    background-image: url('bkgtile.jpg');
    background-repeat: repeat; /* This will tile the image */
    background-size: auto; /* You can adjust this if needed */
}


.navbar {
    display: block !important;
    text-align: right !important;
    background-color:  #F1F4F3 !important;  /* bkg color of the navbar */
}



/* Start added 240915 */


        .centered-row {
            display: flex;
            justify-content: center; /* Center columns horizontally */
        }


    .d-flex {
      display: flex;
      justify-content: space-between;
      align-items: center; /* Optional: vertically center items */
    }



         .card {
            padding: 20px;
        }

        /* Remove margin below the navbar */
        .navbar {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        /* Remove margin from navbar items if needed */
        .navbar-nav {
            margin-bottom: 0;
        }

        /* Adjust spacing for the banner if needed */
        .banner_img {
            margin-top: 0;
            padding-top: 0;
        }

        .modal-trigger {
            cursor: pointer;
        }

        .modal-dialog {
            max-width: 90%;
        }

        /* Ensure pointer cursor for all nav links */
        .nav-link {
            cursor: pointer;
        }

/* End added 240915 */



p {
    font-size: 1.1em;
}

section h1,
section h3 {
    text-align: center;
    color: #605034;  /* text color for Pataphysic Sorties Volume 1-4 */
  

}



.modal-header {
    background: #ba8855;
}

.modal-footer button {
    background: #c9a583 !important;
    color: white;
}

.card {
    border: none !important;
    background: #F1F4F3;   /* Background color of the card */
}

hr {
    border: 2px solid black;
    border-radius: 20px;
    margin: 50px 100px;
}





FROM PATA.CS

/* ==============  FROM PATA.CS BELOW  ============================= */




/* Default styling STYLE MAIN TEXT PER SCREEN WIDTH */
.text-container p {
    font-size: 4vw; /* Base font size using viewport width */
    line-height: 1.6;
    color: #333;
}


/* Default styling STYLE FOOTNOTE PER SCREEN WIDTh */
.text-container FootnoteStyle {
    font-size: 2vw; /* Base font size using viewport width */
    line-height: 1.6;
    color: #333;
}


/* Mobile Pata SCSS to apply different sizes based on screen width STYLE LOGO */
@media (max-width: 600px) {
    .card .card-img-bottom {
        width: 80vw; /* Set width for screens <= 600px */
    }
}

@media (min-width: 601px) {
    .card .card-img-bottom {
        width: 480px; /* Set width for screens between 601px and 1200px */
    }
}


    .footnote-font {
        font-size: 3vw; /* Default font size for screens up to 600px */
    }

    @media (min-width: 601px) and (max-width: 900px) {
        .footnote-font {
            font-size: 1vw; /* Font size for screens between 601px and 900px */
        }
    }

    @media (min-width: 901px) {
        .footnote-font {
            font-size: 1vw; /* Font size for screens larger than 900px */
        }
    }


    .big-red-ctr-font {
        font-size: 6vw; /* Default font size for screens up to 600px */
	color: #BF4F4F;
	text-align: center;
    }


  .title-image {
    min-width: 300px;  /* Minimum width of the image */
    max-width: 400px;  /* Maximum width of the image */ 
    width: 75%; /* Ensure image scales with container width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure margin auto works */
    margin: 0 auto; /* Center horizontally */
  }

     /* 
**************** I moved two centered-image definitions from down below to 
just under the first definition */

        .centered-image {
            display: block;        /* Ensures the image behaves as a block-level element */
            margin: 0 auto;        /* Centers the image horizontally */
  /*           max-width: 100%;       Keeps the image responsive */
            height: auto;          /* Maintains aspect ratio */
        }


       /* Center the image within its container */
        .centered-image {
            max-width: 1000px; /* Match this width with the header container */
 /*            margin: 0 auto; Center the image */
        }

        .centered-image img {
            width: 100%;
            height: auto; /* Maintain aspect ratio */
        }


 .indent-paragraph {
    text-indent: 3em; /* Adjust based on your line-height. 1em is roughly equal to one line-height. */
  }

  .sans-serif-text {
    font-family: Arial, sans-serif; /* Apply a sans-serif font. Adjust the font if needed. */
  }


.linereturn-1 {
            display: block; /* Makes the span behave like a block-level element */
            height: .1em; /* Adds exactly .1em of leading space */
            width: 100%; /* Ensures it spans the full width of its container */
            }


.linereturn-2 {
            display: block; /* Makes the span behave like a block-level element */
            height: .2em; /* Adds exactly .2em of leading space */
            width: 100%; /* Ensures it spans the full width of its container */
            }


.linereturn-3 {
            display: block; /* Makes the span behave like a block-level element */
            height: .3em; /* Adds exactly .3em of leading space */
            width: 100%; /* Ensures it spans the full width of its container */
            }


.linereturn-4 {
            display: block; /* Makes the span behave like a block-level element */
            height: .4em; /* Adds exactly .4em of leading space */
            width: 100%; /* Ensures it spans the full width of its container */
            }



.linereturn-6 {
            display: block; /* Makes the span behave like a block-level element */
            height: .6em; /* Adds exactly .6em of leading space */
            width: 100%; /* Ensures it spans the full width of its container */
            }


.linereturn-8 {
            display: block; /* Makes the span behave like a block-level element */
            height: .8em; /* Adds exactly .6em of leading space */
            width: 100%; /* Ensures it spans the full width of its container */
            }


.linereturn-10 {
            display: block; /* Makes the span behave like a block-level element */
            height: 1em; /* Adds exactly .6em of leading space */
            width: 100%; /* Ensures it spans the full width of its container */
            }


.linereturn-15 {
            display: block; /* Makes the span behave like a block-level element */
            height: 1.5em; /* Adds exactly .6em of leading space */
            width: 100%; /* Ensures it spans the full width of its container */
            }

.linereturn-20 {
            display: block; /* Makes the span behave like a block-level element */
            height: 2em; /* Adds exactly .6em of leading space */
            width: 100%; /* Ensures it spans the full width of its container */
            }






      /* Full width header with centered content */
        header {
            width: 100%;
            background-color: #E5DFD8; /* Background color for banner */
            border-top: 3px solid #791324; /* Top border color and thickness */
            border-bottom: 4px solid #AB1C34; /* Bottom border color and thickness */
            display: flex;
            justify-content: center; /* Center content horizontally */
            padding: 0;
            box-sizing: border-box; /* Include border in element's total width and height */
        }

        /* Container to restrict width and center content */
        .header-container {
            width: 100%;
            max-width: 1000px; /* Ensure this width matches the content width below */
            margin: 0 auto; /* Center the container horizontally */
            padding: 0 15px; /* Padding to align with content below */
            display: flex;
            align-items: center; /* Center items vertically */
        }

        /* Style for the banner image */
        .banner_img {
            padding: 20px 0; /* Add padding to the top and bottom (20px) */
            display: flex;
            justify-content: flex-start; /* Align the logo to the left within the container */
        }

        /* Ensure logo image is responsive and restricted to container width */
        .banner_img img {
            width: 100%;
            max-width: 700px; /* Set a maximum width for the image */
            height: auto; /* Maintain aspect ratio */
        }

        /* Background color below the header */
        .content {
            background-color: #F1F4F3; /* Background color below the header */
            padding: 0 15px; /* Add padding for better appearance */
            box-sizing: border-box; /* Include padding in the element's width */
        }

 

   <body>
    <header id="header">
        <div class="header-container">
            <div class="banner_img">
                <img src="./Images/RC-Logo.png" alt="Logo" />
            </div>
        </div>
    </header>