/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Silkscreen&display=swap');


body {
  background-color: #192f32;
  color: #ca9b87;
  font-family: 'Roboto Slab', serif;
}

h1 {
  font-family: 'Silkscreen', sans-serif;
}


h2 {
  font-family: 'Silkscreen', sans-serif;sum
}


a {
  color: #7ce6c9; /* Normal link color */
  text-decoration: none; /* Removes underline, optional */
}

a:active {
  color: #A3C1A8; /* Change the color when clicked/active */
}

a:visited {
  color: #7ce6c9; /* Color for visited links */
}

a:hover {
  color: #A3C1A8; /* Change the color when hovered */
}




/* Container for the entire newsfeed */
.newsfeed-container {
  width: 90%;
  max-width: 800px;
  margin: 0px auto;
  padding: 0 20px 20px 20px; /* top padding 0 */
  background-color: #54534E;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow-y: scroll;
  max-height: 500px; /* Limiting the height */
}

/* Styling for each individual news post */
.news-post {
  background-color: #A3C1A8;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Custom Date Styling in Silkscreen Font */
.post-date {
  font-family: 'Silkscreen', sans-serif;
  font-size: 1.1em;
  color: #00796b;
  margin-bottom: 10px;
}

/* Title for each post */
.post-title {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
  color: #004d40;
}

/* Text for each post */
.post-text {
  font-size: 1em;
  color: #00796b;
  margin-bottom: 5px;
}


.newsfeed-title {
  position: sticky;
  top: 0;
  background-color: #54534E;
  z-index: 10;
  padding: 0px;      /* reduce from 50px */
}


/* Mobile responsiveness: Stack the columns */
@media (max-width: 768px) {
  .page-wrapper {
    flex-direction: column;    /* Stack the columns vertically on mobile */
  }

  /* Newsfeed width on mobile */
  .newsfeed-container {
    width: 80%;               /* Make the newsfeed full width on mobile */
    margin-top: 20px;          /* Optional: Adds some space between main content and newsfeed */
    max-height: 400px;  /* keep it scrollable */
    overflow-y: auto;    /* ensure scrolling */
  }
}

/* Desktop version: Newsfeed appears on the right side */
@media (min-width: 769px) {
  body {
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
  }

  .newsfeed-container {
    position: relative;
    max-width: 300px; /* Limit width of the newsfeed */
  }
  
  .sidebar {
  

    
    display: flex;
    flex-direction: column; /* stack "latest issue" above newsfeed */
    max-width: 300px;       /* same width limit */
    gap: 20px;              /* space between boxes */
  }
}

.page-wrapper {
  display: flex;            /* Enables flexbox layout */
  justify-content: space-between;  /* Ensures space between the two sections */
  margin: 20px;             /* Optional: To add some margin around the whole layout */
}

/* Main content section */
.main-content {
  flex: 1;                  /* The main content takes up the remaining space */
  margin-right: 20px;       /* Optional: Adds space between main content and newsfeed */
}


#noise-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url("https://upload.wikimedia.org/wikipedia/commons/8/89/White-noise.gif") repeat;
  opacity: 0.1;
  pointer-events: none;
  z-index: 9999;
}