:root {
  /* Define color variables */
  --list-color: #e7cc8c;  
  --note-color: #c08a34;  
  --update-color: rgb(129, 116, 172);
  --writing-color: #5076c7; 
  --mine-blue: #23407E;
  --light-gray: #dbe1df;    /* Light gray hover */
  --light-bg: #dbe1df;      /* Light background for tags */
  --dark-bg: #a5aaa8;       /* Darker background on hover */
  --text-color: #333;       /* Text color */
  --hover-text-color: #000; /* Text color on hover */
  --active-bg: rgb(94, 94, 94); /* Active background color */
}

ul.gigs-list {
  list-style-type: none;
  padding-left: 0;
}

a.gig-link {
  text-decoration: underline;
}

#title img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@font-face {
  font-family: 'un11';
  font-style: normal;
  src: local(''),
       url('../fonts/UN_11ST_Regular.woff2') format('woff2'); 
}

.separator {
border-bottom: 1px solid #000; 2px black solid border 
}
.container {
  display: flex; /* Enables Flexbox layout */
  align-items: flex-start; /* Aligns child elements (including .post-time) to the top */
}
.post-time {
  margin-right: 10px;
}

/* General filter button container */
.filter-buttons {
  text-align: left;
  margin-top: 8px;
}

/* Style for each filter button */
.filter-buttons a {
  display: inline-block;
  margin-left: 10px;
  background-color: var(--light-bg); /* Default background color */
  color: var(--text-color);          /* Text color */
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}

/* Hover effect for all buttons */
.filter-buttons a:hover {
  background-color: #000000; /* Background color on hover */
  color: #f0f0f0; /* Text color change */
  /* Apply the noise background */
  background-image: url('/images/img12.png'); /* Noise texture image */
  background-size: auto; /* Ensure no scaling */
  background-repeat: repeat; /* Ensures the noise texture repeats */
  animation: noise 1s infinite steps(1) /* Noise animation with a jump effect */
}


/* Active state for the selected filter */
.filter-buttons.active {
  background-color: var(--active-bg); /* Active background */
  color: var(--active-text-color);    /* Active text color */
  font-weight: bold;
}

/* Specific content-type styles */
.filter-buttons.all {
  background-color: var(--light-gray); /* Blue background for "All" */
}

.filter-buttons.writing {
  background-color: var(--writing-color); /* Purple background for "Writing" */
}

.filter-buttons.note {
  background-color: var(--note-color); /* Yellow background for "Notes" */
}

.filter-buttons.update {
  background-color: var(--update-color); /* Red background for "Updates" */
}

.filter-buttons.list {
  background-color: var(--list-color); /* Green background for "Lists" */
}

/* Optional: Add a transition for the active state as well */
.filter-buttons.active {
  transition: background-color 0.3s, color 0.3s;
}


body {
  font-family: "un11", normal;
  font-size: medium;

  background-color: var(--light-gray); 
}

.tags {
text-align: right;
}

.tags a {
display: inline-block;
margin-left: 10px;
background-color: var(--light-bg);
color: var(--text-color);
text-decoration: none;
}

.tags a:hover {
background-color: var(--dark-bg);
color: var(--hover-text-color);
}


.post-item {
  display: flex;
  list-style: none;
  padding: 5px;
  margin-bottom: 0;
  transition: background-color 0.3s, border-color 0.3s;
  position: relative; /* Ensure the noise effect can animate */
}

/* Create the noise "jumping" animation */
@keyframes noise {
  0% {
    background-position: 0 0;
  }
  10% {
    background-position: 40% 60%;
  }
  20% {
    background-position: 70% 20%;
  }
  30% {
    background-position: 10% 50%;
  }
  40% {
    background-position: 50% 80%;
  }
  50% {
    background-position: 30% 60%;
  }
  60% {
    background-position: 90% 10%;
  }
  70% {
    background-position: 60% 40%;
  }
  80% {
    background-position: 80% 30%;
  }
  90% {
    background-position: 20% 70%;
  }
  100% {
    background-position: 40% 50%;
  }
}

/* Hover effect with noise background */
.post-item:hover {
  background-color: #000000; /* Background color on hover */
  color: #f0f0f0; /* Text color change */
  
  /* Apply the noise background */
  background-image: url('/images/img12.png'); /* Noise texture image */
  background-size: auto; /* Ensure no scaling */
  background-repeat: repeat; /* Ensures the noise texture repeats */
  animation: noise 0.9s infinite steps(1) /* Noise animation with a jump effect */
}

.content a:hover {
  color: #f0f0f0; /* Text color change */
  
  /* Apply the noise background */
  background-image: url('/images/img12.png'); /* Noise texture image */
  background-size: auto; /* Ensure no scaling */
  background-repeat: repeat; /* Ensures the noise texture repeats */
  animation: noise 0.9s infinite steps(1) /* Noise animation with a jump effect */
}

/* Hover effect */
.tag-link:hover {
  background-color: #000000;
  color: var(--light-gray); /* Text color change */
  /* Apply the noise background */
  background-image: url('/images/img12.png'); /* Noise texture image */
  background-size: auto; /* Ensure no scaling */
  background-repeat: repeat; /* Ensures the noise texture repeats */
  background-position: 0 0; /* Ensure the image starts at the top-left corner */
  animation: noise 0.9s infinite steps(1); /* Noise animation with a jump effect */
}



.list-post {
  background-color: var(--list-color);
}

.post-writing {
  background-color: var(--writing-color);
}

.post-note {
  background-color: var(--note-color);
}

.post-update {
  background-color: var(--update-color);
}

.span-list {
  background-color: var(--list-color);
}

.span-writing {
  background-color: var(--writing-color);
}

.span-note {
  background-color: var(--note-color);
}

.span-update {
  background-color: var(--update-color);
}

.pagination a.active {
  font-weight: bold;
}

.newsletter-link {
  font-weight: bold;
}

.navlink:hover {
  background-color: var(--update-color); /* Background color on hover */
  
  /* Apply the noise background */
  background-repeat: repeat; /* Ensures the noise texture repeats */
  animation: noise 0.5s infinite steps(1) /* Noise animation with a jump effect */
}

.content-links {
  position: relative; /* Ensure the noise effect can animate */
}

/* General filter button container */
.content-links {
  display: inline-block;
  background-color: var(--light-bg); /* Default background color */
  color: var(--text-color);          /* Text color */
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
  position: relative; /* Ensure the noise effect can animate */
}


/* Hover effect for all buttons */
.content-links:hover {
  background-color: #000000;
  color: #f0f0f0; /* Text color change */
  /* Apply the noise background */
  background-image: url('/images/img12.png'); /* Noise texture image */
  background-size: auto; /* Ensure no scaling */
  background-repeat: repeat; /* Ensures the noise texture repeats */
  background-position: 0 0; /* Ensure the image starts at the top-left corner */
  animation: noise 0.9s infinite steps(1); /* Noise animation with a jump effect */
}

.content-links.writing {
  background-color: var(--writing-color); /* Purple background for "Writing" */
}

.content-links.note {
  background-color: var(--note-color); /* Yellow background for "Notes" */
}

.content-links.update {
  background-color: var(--update-color); /* Red background for "Updates" */
}

.content-links.list {
  background-color: var(--list-color); /* Green background for "Lists" */
}