.container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding:0;
        }

        /* Mobile responsiveness */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
            
        }


  .categories-section {
    padding: 16px;
    background: var(--Mainbg);
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: var(--border);
}

.categories-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 12px;
  border-bottom:2px solid rgb(155 155 155);
  padding-bottom: 6px;
}

.categories-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-list li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom:var(--border);
  font-size: 16px;
  color:var(--color);
}

.categories-list li span:last-child {
  color:var(--color);
}
.labels-section {
  padding: 16px;
  background: var(--Mainbg);
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 border: var(--border);
  margin-top: 20px;
}

.labels-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 12px;
  border-bottom: 2px solid rgb(155 155 155);
  padding-bottom: 6px;
}

.labels-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.label-tag {
  background-color: var(--labletag);
  color: var(--color);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.label-tag:hover {
  background-color: #dcdcdc70;
}


/* Skeleton base styles */
.skeleton {
  pointer-events: none;
  opacity: 0.8;
}
.shimmer {
  background: linear-gradient(
    to right,
    #eeeeee 8%,
    #dddddd 18%,
    #eeeeee 33%
  );
  background-size: 1000px 100%;
  animation: shimmer 1.2s infinite linear;
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Skeleton parts */
.skeleton-image {
  width: 100%;
  height: 180px;
  border-radius: 8px;
}
.skeleton-tags,
.skeleton-title,
.skeleton-description,
.skeleton-date {
  height: 12px;
  border-radius: 6px;
  margin: 10px 0;
}
.skeleton-tags {
  width: 40%;
}
.skeleton-title {
  width: 80%;
  height: 18px;
}
.skeleton-description {
  width: 90%;
  height: 14px;
}
.skeleton-date {
  width: 30%;
}
@keyframes hero-gradient-animation {
    0% {
        --y-0: 101%;
        --c-0: hsla(0, 0%, 2%, 1);
        --s-start-0: 13.797574811818231%;
        --s-end-0: 65%;
        --x-0: 3%;
        --s-start-1: 15%;
        --s-end-1: 63.310997437284335%;
        --x-1: 98%;
        --y-1: 98%;
        --c-1: hsla(0, 0%, 2%, 1);
        --s-start-2: 20.593893049449022%;
        --s-end-2: 49.606606188780056%;
        --x-2: 46%;
        --y-2: 98%;
        --c-2: hsla(240, 0%, 2%, 1);
        --c-3: hsla(18.26086956521739, 72%, 49%, 1);
        --s-start-3: 15%;
        --s-end-3: 65%;
        --x-3: 3%;
        --y-3: 6%;
        --s-start-4: 15%;
        --s-end-4: 65%;
        --x-4: 97%;
        --y-4: 7%;
        --c-4: hsla(240, 7%, 29%, 1);
    }

    100% {
        --y-0: 2%;
        --c-0: hsla(0, 0%, 2%, 1);
        --s-start-0: 5;
        --s-end-0: 53;
        --x-0: 7%;
        --s-start-1: 5;
        --s-end-1: 53;
        --x-1: 46%;
        --y-1: 5%;
        --c-1: hsla(0, 0%, 2%, 1);
        --s-start-2: 5;
        --s-end-2: 53;
        --x-2: 100%;
        --y-2: 71%;
        --c-2: hsla(240, 0%, 2%, 1);
        --c-3: hsla(18.26086956521739, 72%, 49%, 1);
        --s-start-3: 5;
        --s-end-3: 53;
        --x-3: 94%;
        --y-3: 18%;
        --s-start-4: 5;
        --s-end-4: 53;
        --x-4: 12%;
        --y-4: 70%;
        --c-4: hsla(240, 7%, 29%, 1);
    }
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 101%
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 2%, 1)
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 13.797574811818231%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 65%
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3%
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 15%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 63.310997437284335%
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 98%
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 98%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 2%, 1)
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20.593893049449022%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 49.606606188780056%
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 46%
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 98%
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(240, 0%, 2%, 1)
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(18.26086956521739, 72%, 49%, 1)
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 15%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 65%
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3%
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 6%
}

@property --s-start-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 15%
}

@property --s-end-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 65%
}

@property --x-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 97%
}

@property --y-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 7%
}

@property --c-4 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(240, 7%, 29%, 1)
}

.blogpost-bg-black {
    --y-0: 101%;
    --c-0: hsla(0, 0%, 2%, 1);
    --x-0: 3%;
    --x-1: 98%;
    --y-1: 98%;
    --c-1: hsla(0, 0%, 2%, 1);
    --x-2: 46%;
    --y-2: 98%;
    --c-2: hsla(240, 0%, 2%, 1);
    --c-3: hsla(18.26086956521739, 72%, 49%, 1);
    --x-3: 3%;
    --y-3: 6%;
    --x-4: 97%;
    --y-4: 7%;
    --c-4: hsla(240, 7%, 29%, 1);
    ;
    background-color: hsla(0, 0%, 2%, 1);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1254 1254' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"), radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4));
    animation: hero-gradient-animation 10s linear infinite alternate;
    background-blend-mode: overlay, normal, normal, normal, normal, normal;
}
.blogpost-bg-black-static{background-color:hsla(0,0%,2%,1);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 2942 2942' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),radial-gradient(circle at 3% 101%, hsla(0,0%,2%,1) 13.797574811818231%,transparent 65%),radial-gradient(circle at 98% 98%, hsla(0,0%,2%,1) 15%,transparent 63.310997437284335%),radial-gradient(circle at 46% 98%, hsla(240,0%,2%,1) 20.593893049449022%,transparent 49.606606188780056%),radial-gradient(circle at 3% 6%, hsla(18.26086956521739,72%,49%,1) 15%,transparent 65%),radial-gradient(circle at 97% 7%, hsla(240,7%,29%,1) 15%,transparent 65%);background-blend-mode:overlay,normal,normal,normal,normal,normal;}