/* Custom CSS */
body {
  background-color: #2a3d3f;
  /* Dark blue-green background for the whole page */
  color: white;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.post-icons {
  display: none;
}

header {
  background-color: #1f2d2d;
  /* Darker blue-green for header */
  padding: 7px;
  text-align: center;
  height: auto;
  /* Fixed height for the header */
  display: flex;
  justify-content: center;
  align-items: center;
}

header img {
  height: 100px;
  width: auto;
  /* Reduced height for the logo */
  margin-right: 10px;
  /* Space between the logo and the text */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  /* Rounded corners for the logo */
  padding: 5px;
  /* Space inside the border */
  background: linear-gradient(145deg, #1f2d2d, #2f4f4f);
  /* Subtle gradient effect */

}

header h2 {
  color: #00bfae;
  /* Light blue-green color for the header text */
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
}

main {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.logo-space {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 5px;
  background: linear-gradient(145deg, #1f2d2d, #2f4f4f);
}

.content-box {
  background-color: #2f4f4f;
  /* Blue-green shade for content box */
  padding: 20px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  /* Increased width */
  width: 100%;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Light border for definition */
  background: linear-gradient(145deg, #2f4f4f, #1f2d2d);
  /* Subtle gradient effect */
}

.content-main-title {
  font-size: 22px;
  /* Larger font size */
  font-weight: bold;
  /* Bold text */
  color: #00bfae;
  /* Light blue-green color */
  text-align: center;
  /* Center the text */
  margin-bottom: 20px;
  /* Space below the title */
  text-transform: uppercase;
  /* Uppercase text */
}

.section-title {
  text-align: center;
  font-size: 14px;
  /* Smaller font size for the bookmark line */
  font-weight: 400;
  /* Thinner font weight */
  color: #90ee90;
  /* Light green color for subtle contrast */
  margin-bottom: 10px;
}

.stream-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.stream-box {
  background-color: #1f2d2d;
  /* Darker blue-green for stream boxes */
  padding: 5px 10px;
  /* Reduced padding */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5px;
  /* Reduced margin */
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  width: 100%;
  /* Matching content box width */
  max-width: 600px;
  /* Matching content box width */
  text-decoration: none;
  /* Remove underline */
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Light border for definition */
  background: linear-gradient(145deg, #1f2d2d, #2f4f4f);
  /* Subtle gradient effect */
  height: 20px;
  /* Slightly reduced height */
}

.stream-box a {
  text-decoration: none;
  /* Remove underline */
  color: inherit;
  /* Inherit the color from parent */
}

.stream-box:hover {
  transform: translateY(-3px);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
}

.stream-left {
  font-size: 16px;
  font-weight: 600;
  color: #00bfae;
  /* Light blue-green for the left side text */
}

.stream-right {
  color: #90ee90;
  /* Light green for 'Online' status and dot */
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.stream-right svg {
  margin-left: 5px;
  /* Space between the text and the icon */
  fill: none;
  /* No fill for the checkmark icon */
  stroke: #90ee90;
  /* Light green color for the checkmark icon */
}

/* Styling for h1 and h2 tags */
h1,
h2 {
  color: #00b3b3;
  /* Blue-green color */
}

h3 {
  color: #008080;
  /* Slightly darker blue-green */
}

/* Custom color styling for specific words in paragraph */
.highlight {
  color: #00b3b3;
  /* Blue-green color for highlighted words */
}

.highlight-strong {
  color: #008080;
  /* Slightly darker blue-green for stronger emphasis */
}

footer {
  background-color: #1f2d2d;
  /* Darker blue-green footer background */
  padding: 20px;
  text-align: center;
  color: white;
}