div.blog{
    border:1px solid rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.75);
    background: linear-gradient(to right, silver 20%, #ffd700 40%, silver 50%, #ECD08C 55%, #ffd700 70%, silver 100%);
    background-size: 200% auto;
    animation: shine 2.5s linear infinite;
    padding:1px;


  position: relative; /* Crucial for positioning the corners */
  width: 100%;
  border: 1px solid rgba(255, 215, 0, 0.5); /* Gold border for the main box */
  color: white;
  /* Ensure the box sits above the absolute corners when they scale */
  z-index: 10;
  }
  div.blog article.blog-inner{
     border:1px solid rgba(255, 215, 0, 0.5);
     box-shadow: 0 0 6px rgba(255, 215, 0, 0.75);
     background:black;
     padding:25px;
  }


  div.blog article.blog-inner p{
   margin:1em 0;

 }

   div.blog-list article.blog-inner p{
   margin:1em 0;

 }


/* Position for the corner containers */
.corner {
  position: absolute;
  /* We use transform to offset exactly half the block size (e.g., 3px width/height)
     so the center of the cross aligns perfectly with the edge of the content-box */
  width: 2px;
  height: 2px;
  z-index: 5; /* Sit slightly behind the main box border */
}

.top-left {
  top: 0px;
  left: 0px;
  transform: translate(-50%, -50%); /* Pulls the center to the corner */
}

.top-right {
  top: 0px;
  right: 0px;
  transform: translate(50%, -50%);
}

.bottom-left {
  bottom: 0px;
  left: 0px;
  transform: translate(-50%, 50%);
}

.bottom-right {
  bottom: 0px;
  right: 0px;
  transform: translate(50%, 50%);
}

/* Base styles for the blocks (from your updated version) */
.block {
  position: absolute;
  background-color: rgba(255, 215, 0, 0.55);
  border: 1px solid rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.75);
  /* Make sure animations start at slightly different times for visual interest */
  animation: spiral-annihilation 2.5s infinite linear forwards;
}

  /* Add slight animation delays for a non-synchronized look */
.top-right .block { animation-delay: 0.25s; }
.bottom-left .block { animation-delay: 0.833s; }
.bottom-right .block { animation-delay: 1.666s; }


.vertical {
  width: 2px;
  height: 1px;
}

.horizontal {
  width: 1px;
  height: 2px;
  position:relative;
  top:-1px;
}

  @keyframes shine {
    to {
      background-position: 200% center;
    }
  }

  @keyframes spiral-annihilation {
  /* Start point */
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }

  /* Expand spiral back the other way (bigger size) */
  25% {
    transform: translate(0, 0) scale(2.5) rotate(-180deg);
    opacity: 0.8;
  }

  /* Shrink to annihilation at 94% threshold */
  47% {
    transform: translate(0, 0) scale(0) rotate(180deg);
    opacity: 0;
  }
}


.blog-inner .service-card {display:inline-block;}
.blog-inner picture img{margin:50px auto 25px auto;border:3px solid gold;}

/* Show/hide content based on :checked */
#tab_public:checked ~ div .tab-content[data-tab="tab_public"] {
    display: block;
}
#tab_public:checked ~ div .tab-content[data-tab="tab_academian"] {
    display: none;
}

#tab_academian:checked ~ div .tab-content[data-tab="tab_academian"] {
    display: block;
}
#tab_academian:checked ~ div .tab-content[data-tab="tab_public"] {
    display: none;
}


/* blog listing */
.blog-post{padding:25px;border-bottom:1px dashed gold;}
.blog-post figure {width:min-content;}
.blog-post figure figcaption{font-size:16px; font-style:italic;color:#ebebeb;}
.blog-post img{max-width:200px;margin:25px;}



.tab-active {
    background: #222;
    border-color: gold;
    box-shadow: 0 0 8px gold;
}