body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: url("./Images/Background.png") repeat-x fixed;
  background-color: rgb(0, 0, 0);
  background-position: center bottom;
  background-size: 400px;
}

header {
  background-color: #000000;
  color: white;
  text-align: center;
  padding: 10px;
}

nav {
  background-color: #171717;
  color: rgb(50, 50, 50);
  padding: 10px;
  text-align: center;
  
}
.text-align-center {
  text-align: center;
}

nav a {
  color: rgb(108, 108, 108);
  text-decoration: none;
  margin: 0 10px;
  border-left: 3px solid #575757;
  padding-left: 15px;
}

.navimage {
  max-width: 300px;
}
.container {
  max-width: 1200px;
  margin: 0px;
  padding: 5px;
}
.Comic-sizes {
  max-width: 100%;
}

.chapter-card {
  border: 1px solid #000000;
  background-color: #171717;
  color: #575757;
  padding: 5px 0px 5px 0px;
  text-align: center;
  max-width: 8900px;
  border-radius: 10px;
  
}
.subTextColor {
  color: rgb(64, 63, 63);
}
.chapter-heading {
  text-align: center;
  max-width: 800px;
}
.socialmediaimageicon {
  width:  100%;
  margin: 10px;
  border-radius: 5px;
  border-color: rgb(65, 63, 63);
  border-width: 5px;
}

.socialmediaimageiconbox {
  margin-right: 20px;
}
.socialmediaimageiconbox2 {
  margin-right: 20px;
}

.chapteradicon {
  max-width: 100%; /* Ensure the image doesn't exceed its original dimensions */
  border-radius: 5px;
  border-color: grey;
  border-width: 5px;
}

.chapteradiconbox {
  max-width: 800px;
  margin: 10px auto; /* Centers the container horizontally */
  text-align: center; /* Centers the image within the container */
}
.contentblock {
 max-width: 1200px;
 border-style: solid;
 border-color: black;
 border-width: 2px;
 background-color: #0a0a0a;
 padding: 20px;
}

.read-button {
color: white;
background-color: rgb(0, 182, 0);
border-radius: 5px;
}
.read-button-margins {
  margin-bottom: 50px;
}
.read-button a {
color: black;
}
.view-chapters-button {
  color: white;
  background-color: rgb(0, 42, 182);
  border-radius: 5px;
  }
/* Responsive styles using Bootstrap classes */

/* For small screens (less than 576px) */
@media (max-width: 575.98px) {
  header {
      font-size: 24px;
  }

  nav {
      font-size: 18px;
  }

  .chapter-card {
      font-size: 14px;
  }
  .test {
    color: red;
  }
  .read-button {
    transform: translate( -10px, -45px);
  }
}

/* For medium screens (between 576px and 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  header {
      font-size: 28px;
  }

  nav {
      font-size: 20px;
  }

  .chapter-card {
      font-size: 16px;
  }
  .test {
    color: yellow;
  }
  .read-button {
    transform: translate( -10px, -45px);
  }
}

/* For large screens (768px and above) */
@media (min-width: 768px) {
  header {
      font-size: 32px;
  }

  nav {
      font-size: 22px;
  }

  .chapter-card {
      font-size: 18px;
  }
  .test {
    color: green;
  }
  .contentblockchapterpage {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  .read-button {
    transform: translate( -10px, -45px);
  }
  
}