* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --paper: #282a36;
            --ink: #3a4b48;
            --text: #ececec;
            --accent: #7ed6a3;
            --highlight: #8be9fd;
            --text-fade: #7B9BA8;
            --code: #161a19;
            --tags:  #123a31;
            --card-top: #2c3b38;
            --card-bg: #3c4a57;
            --warning: #fbbf24;
            --error: #f87171;
            --success: #34d399;
            --main-font: 'JetBrains Mono';
            --heading-font: 'chirp-medium';
            --cyber-red:  linear-gradient(to bottom, #141616, #690000);
            --cyber-orange: #64410050;
            --cyber-metal: #1f2d2f;
            --blue-white: linear-gradient(to right, #ffffff, #1c259c);
            
        }

.b-w-gradient-text {
   background: linear-gradient(to right, #ffffff 50%, #1c259c 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dbz-gradient-text {
   background: linear-gradient(to right, #e66a23 50%, #3771b4 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pink-gradient-text {
   background: linear-gradient(to right, #cd7dd8 50%, #fafafa 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lime-gradient-text {
   background: linear-gradient(to right, lime 50%, #fafafa 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.w-b-gradient-text {
  background: linear-gradient(to right, #1c259c 50%, white 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blk-w-gradient-text {
  background: linear-gradient(to right, #ffffff 50%, rgb(0, 0, 0) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.panda-gradient-text {
  background: linear-gradient(to top right , #000000 40%, rgb(206, 206, 206) 30%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.red-blk-gradient-text {
  background: linear-gradient(to right, #a73131 50%, rgb(0, 0, 0) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blue-blk-gradient-text {
  background: linear-gradient(to right, #2400c7 50%, rgb(0, 0, 0) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.samurai-gradient-text {
  background: linear-gradient(to top right, #000000 , rgb(206, 206, 206) 60%, red );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
}

      
        
        @font-face {
          font-family: "JetBrains Mono", monospace;
          font-optical-sizing: auto;
          font-weight: normal;
          font-style: normal;
        }

        @font-face {
    font-family: 'cyber-font-1';
    src: url('/assets/fonts/ryzes-font/Ryzes-ax92x.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
    
}

        @font-face {
    font-family: 'handwriting';
    src: url('/assets/fonts/biro_script/Biro_Script_reduced.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
    
}

        @font-face {
    font-family: 'poppl';
    src: url('/assets/fonts/Poppl-Laudatio-Condensed Bold/Poppl-Laudatio Bold Condensed/Poppl-Laudatio Bold Condensed.woff2') format('opentype');
    font-weight: normal;
    font-style: normal;
    
}

.debian {
  font-size: 1.5rem;
  font-weight: 600;
  font-family: 'poppl';
}

.i-dot {
  position: relative;
  color: transparent;      /* hides the original i */
  text-shadow: 0 0 0 white; /* puts white text back except the dot */
}

.i-dot::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ff0055;
  border-radius: 50%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.i-wrap {
  position: relative;
}

.i-wrap::after {
  content: "";
  width: 6px;
  height: 6px;
  background: #ff0055;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}




@font-face {
    font-family: 'cyber-font-2';
    src: url('/assets/fonts/techno-charm-version-font/TechnoCharmRegular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    
}

@font-face {
    font-family: 'sony';
    src: url('/assets/fonts/Clarendon\ Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    
    
}

@font-face {
  font-family: 'playstation';
  src: url(/assets/fonts/playstation_by_lyricwest_dby5il4.ttf);
  font-weight: normal;
  font-style: normal;
}


.sony {
    font-family: 'sony';
    letter-spacing: 3px;
    

}

.sony-h {
    font-family: 'sony';
    letter-spacing: 3px;
    color: var(--highlight)

}

@font-face {
    font-family: 'binary-font';
    src: url('/assets/fonts/binary/binchrt.ttf') format('opentype');
    
}

.binary-font {
    font-family: 'binary-font';
    color: #00ff00;
    

}



    .punk-1 {
    font-family: 'cyber-font-1';
    
    background: linear-gradient(to top right, yellow, rgb(179, 182, 19)); /* diagonal gradient */
    -webkit-background-clip: text; /* Chrome, Safari */
    -webkit-text-fill-color: transparent; /* shows the gradient inside text */
    
    -webkit-text-stroke: 1px #000; /* black outline around each letter */
    letter-spacing: 2px;
    display: inline-block; /* ensures gradient applies correctly */
}
        

        @font-face {
        font-family: 'chirp-reg';
        src: url(/assets/fonts/chirp-regular-web.woff) format('woff');
        }
        @font-face {
        font-family: 'chirp-medium';
        src: url(/assets/fonts/chirp-medium-web.woff) format('woff');
        }
        @font-face {
        font-family: 'chirp-bold';
        src: url(/assets/fonts/chirp-bold-web.woff) format('woff');
        }
        @font-face {
        font-family: 'chirp-heavy';
        src: url(/assets/fonts/chirp-heavy-web.woff) format('woff');
        }


     

/* =====================================================
   BASE STYLES
   ================================================== */
/* Make image responsive */
.responsive-image-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.responsive-image {
    max-width: 100%;
    height: auto;
    cursor: pointer;
    border-radius: 8px; /* optional styling */
    transition: transform 0.3s;
}

.responsive-image:hover {
    transform: scale(1.05);
}

/* Lightbox overlay */
/* Lightbox overlay */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.9);
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.lightbox .close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.lightbox .close:hover {
    color: #ccc;
}

.lightbox-caption {
    margin-top: 0.5rem;
    color: #fff;
    font-size: 1rem;
    text-align: center;
}



/*Food PC Image POLAROID STYLE*/

.color-h1 {
color: var(--highlight);
}

.food-welcome-container {
    display: flex;
    font-size: clamp(1.2rem, 4vw, 2rem);
    width: 50%;
    justify-content: center;
    align-items: center;
    color: rgb(151, 255, 220);
    padding-top: 1rem;
    padding-bottom: 0;
    text-align: start;
    margin-bottom: clamp(15px, 3vw, 25px);
    margin-bottom: 1rem;
    
    
}

.food-responsive-image-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    background: url(/assets/images/pc-window.webp);
}

.food-responsive-image {
  display: block;
  max-width: 900px;
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: transform 0.2s ease;
  object-fit: contain;
}


.food-responsive-image:hover {
  transform: scale(1.02);
}

/* Lightbox overlay */
.food-lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  align-items: center;
  justify-content: center;
  overflow: hidden;  /* prevent scrolling */
  padding: 2rem;
  box-sizing: border-box;
}

.food-lightbox.active {  /* when opened */
  display: flex;
}

.food-lightbox-content {
  margin: 0;
  display: block;
  max-width: 85vw;
  max-height: 85vh;
  object-fit: contain;
  width: auto;
  height: auto;
}

.food-lightbox .close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.food-lightbox .close:hover {
    color: #ccc;
}



.food-main-container {
    display: flex;
    flex-direction: column; /* mobile default: stack */
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

@media(min-width: 900px) {
    .food-main-container {
        flex-direction: row; /* desktop: side by side */
        align-items: flex-start;
    }
}

/* Article and Sidebar */
food-article {
    width: 100%;
    flex: 2;
}

food-article img,
.food-image img,
.food-responsive-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}


.food-main-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: clamp(15px, 3vw, 20px);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(25px, 4vw, 40px);
    overflow-x: hidden;
}

@media (min-width: 1100px) {
    .food-main-container {
        max-width: 1300px;
        margin: auto;
        grid-template-columns: 1fr 300px;
        padding: clamp(20px, 3vw, 30px);
    }
}

@media(min-width: 900px){
    food-article {
        flex: 2;
        max-width: 900px;
    }
    .sidebar {
        flex: 1;
        max-width: 300px;
    }
}


/* SIDE BAR HIDE + STACK LAYOUT */
@media(max-width: 1000px) {

  .food-main-container {
    grid-template-columns: 1fr;
  }

  /* completely hide sidebar */
  .sidebar-container,
  aside,
  #sidebar,
  .sidebar {
    display:none !important;
    visibility: hidden;
    height: 0;
  }

  .pc-window img {
    max-width: 100%;
    margin-bottom: 1rem;
  }
}

.pc-window {
  position: relative;
  width: 400px;
  max-width: 100%;
  aspect-ratio: 400 / 431; /* maintain PC window proportions */
  background: url(/assets/images/win-98-window.webp) no-repeat center/cover;
  float: right;             /* keep top-right position */
  margin-left: 1rem;
  display: flex;
  align-items: flex-start;  /* align to top of window */
  justify-content: center;
  padding-top: 10px;        /* spacing inside PC window */
}



.pc-window img {
  max-width: 80%;
  max-height: 80%;
  position: absolute;
  height: auto;
  left: 55%;
  top: 130px;
  margin-left: -40%;  /* half of max-width */
  
}

/* Small screens: below 400px */
@media (max-width: 399px) {
    .pc-window {
        width: 250px;   /* smaller width */
        height: 270px;  /* scale height proportionally */
        background-size: cover;
        float: none;
        margin: 0 auto 1rem auto; /* center on very small screens */
    }

    .pc-window img {
        max-width: 70%;
        left: 50%;
        top: 120px;  /* adjust vertical placement */
        margin-left: -35%; /* center relative to new max-width */
    }

    .food-welcome-container {
        width: 100%;
        font-size: 1rem;
    }
}


/* Extra small screens: below 300px */
    .pc-window img {
        max-width: 65%;
        top: 100px;
        margin-left: -32.5%;
    }



/*======Food Cards=========*/
/* Grid wrapper for food cards */
.food-cards-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

/* Individual food card */
.food-card {
  width: 300px;           /* match image width */
  display: flex;
  flex-direction: column;
  border-radius: 1em;
  overflow: hidden;
  background: var(--card-top);
  box-shadow: 0 1em 1em rgba(63, 236, 227, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
.food-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(248, 221, 67, 0.4);
}

/* Image section */
.food-card-image {
  width: 100%;
  height: 250px;        /* your current image height */
  overflow: hidden;
}

.food-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crops to fill container */
  display: block;
}

/* Text/content section */
.food-card-content {
  padding: 0.75em 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.food-card-title {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text);
}

.food-card-excerpt {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-fade);
  flex-grow: 1; /* pushes tags and link down */
}

.food-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}

.food-card-tag {
  font-size: 0.8rem;
  padding: 0.25em 0.5em;
  border-radius: 0.3rem;
  border: 1px solid var(--accent);
  background: var(--card-top);
  color: var(--text-fade);
}

.food-card-link {
  margin-top: 0.5em;
  font-weight: 600;
  color: #e63946;
  text-decoration: none;
  transition: color 0.2s ease;
}

.food-card-link:hover {
  color: #d62828;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .food-cards-wrapper {
    grid-template-columns: 1fr;
    padding: 0.5rem;
  }
}

/* Tiny screens — 450px and below */
@media (max-width: 450px) {
  .food-cards-wrapper {
    grid-template-columns: 1fr;  /* single column */
    padding: 0.5rem;             /* reduce padding */
    gap: 1rem;                   /* smaller gap */
  }

  .food-card {
    width: 100%;                 /* full width of container */
    box-sizing: border-box;      /* ensure padding/borders stay inside width */
  }

  .food-card-image {
    height: 200px;               /* reduce image height if needed */
  }

  .food-card-content {
    padding: 0.5em 0.75em;       /* smaller padding for mobile */
  }

  .food-card-title {
    font-size: 1rem;             /* scale down text */
  }

  .food-card-excerpt {
    font-size: 0.8rem;
  }

  .food-card-tags {
    gap: 0.2em;                  /* smaller tag spacing */
  }

  .food-card-link {
    font-size: 0.9rem;
  }
}





/*========food filter buttons===========*/
/*=======================================*/

/* Category Filter Styles */
.category-filter {
  display: flex;
  gap: 12px;
  
  padding: 2rem 2rem;
  flex-direction: row;
  justify-content: center;
  background: url(/assets/images/yellow-cyber-overlay.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  
}

.filter-btn {
  padding:20px 60px;
  border: 2px solid #e0e0e0;
  background: white;
  color: #333;
  cursor: pointer;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  border-color: #333;
  background: #f9f9f9;
}

.filter-btn.active {
  background: #333;
  color: white;
  border-color: #333;
}



/*===========*/

.h1 {
  text-align: center;
  font-family: 'chirp-heavy';
  font-size: large;
}

  html, body {
      width: 100%;
      overflow-x: hidden;
  }

  body {
      font-family: var(--main-font);
      line-height: 1.75;
      color: var(--text);
      background: var(--cyber-metal);
      font-size: clamp(16px, 2.5vw, 19px);
  }

/* HEADER */
.page-header-top {
    background: var(--ink);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    width: 100%;
    padding-bottom: 0;
    top: 0;
    z-index: 0;
}

.header-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between; /* keeps icon left and hamburger right */
    padding-left: clamp(15px, 3vw, 20px);
    padding-right: clamp(15px, 3vw, 20px);
    gap: clamp(10px, 2vw, 20px);
    pointer-events: auto;
}

/* Content */
.content-wrapper {
  flex: 1;
  max-width: 100%;  /* Add this */
  margin-top: 20px;
  padding-top: 2rem;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;  /* Add this */
}

.pixel-wrapper {
    width: clamp(60px, 10vw, 100px);
    height: clamp(60px, 10vw, 100px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
}

.pixel-wrapper a {
display: flex;
width: 100%;
height: 100%;
text-decoration: none;
align-items: center;
justify-content: center;
position: relative;
}

.pixel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
object-fit: contain;
padding-top: 1rem;
}

.pixel.normal {
    opacity: 1;
}

.pixel.smile {
    opacity: 0;
}

.pixel-wrapper:hover .pixel.smile {
    opacity: 1;
}

.pixel-wrapper:hover .pixel.normal {
    opacity: 0;
}


/* NEW: project-pixel same as pixel, but 150% size */
.project-pixel {
    position: absolute;
    top: 53%;
    left: 53%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    object-fit: contain;
    padding-top: 1rem;
}

.project-pixel.normal {
    opacity: 1;
}

.project-pixel.smile {
    opacity: 0;
}

.pixel-wrapper:hover .project-pixel.smile {
    opacity: 1;
}

.pixel-wrapper:hover .project-pixel.normal {
    opacity: 0;
}

/* NEW: STUFF-pixel same as pixel, but 150% size */
.stuff-pixel {
    position: absolute;
    top: 49%;
    left: 32%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 95%;
    object-fit: contain;
    padding-top: 1rem;
}

.stuff-pixel.normal {
    opacity: 1;
}

.stuff-pixel.smile {
    opacity: 0;
}

.pixel-wrapper:hover .stuff-pixel.smile {
    opacity: 1;
}

.pixel-wrapper:hover .stuff-pixel.normal {
    opacity: 0;
}

/* NEW: COOK-pixel same as pixel, but 150% size */
.cook-pixel {
    position: absolute;
    top: 37%;
    left: 53%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    object-fit: contain;
    padding-top: 1rem;
}

.cook-pixel.normal {
    opacity: 1;
}

.cook-pixel.smile {
    opacity: 0;
}

.pixel-wrapper:hover .cook-pixel.smile {
    opacity: 1;
}

.pixel-wrapper:hover .cook-pixel.normal {
    opacity: 0;
}


/* HAMBURGER */
.hamburger {
    display: flex;
    justify-content: flex-end;
    background: none;
    border: none;
    cursor: pointer;
    gap: .5rem;
    background-image: url(/assets/gif/burger.gif);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 30px;
    height: 30px;
    margin: 0 1rem 0 auto;
    pointer-events: auto !important;
}

.hamburger span {
    display: none;
    pointer-events: auto;
}

@media (max-width: 1099px) {
    .pixel.smile {
        display: none;
    }
}

@media (min-width: 1100px) {
    .hamburger {
        display: none;
    }
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(10px, 10px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

        

/* WELCOME */
.welcome-container {
    font-size: clamp(2rem, 5vw, 3rem);
    width: 100%;
    color: white;
    padding: clamp(20px, 4vw, 35px);
    padding-bottom: 0;
    text-align: start;
    margin-bottom: clamp(15px, 3vw, 25px);
    
}



.wave-hand {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    transform-origin: 70% 70%;
    animation: wave 0.6s ease-in-out infinite;
}

@keyframes wave {
    0%, 60%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
}


.slap-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    transform-origin: 70% 70%;
    animation: slap 0.6s ease-in-out infinite;
}

.blink {
  animation: fade 5s infinite;
}

@keyframes fade {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}


@keyframes slap {
    0%, 60%, 100% { transform: rotate(0deg); }
    100% { transform: rotate(-30deg); }
    
}

/* ========== ANIMATIONS ========== */
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-30px); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.1); } }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes wobble { 0%, 100% { transform: rotateZ(0deg); } 15% { transform: rotateZ(-5deg); } 30% { transform: rotateZ(3deg); } 45% { transform: rotateZ(-3deg); } 60% { transform: rotateZ(2deg); } 75% { transform: rotateZ(-1deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
@keyframes heartbeat { 0% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70% { transform: scale(1); } }
@keyframes flip { 0%, 100% { transform: rotateX(0deg); } 50% { transform: rotateX(180deg); } }
@keyframes swing { 0%, 100% { transform: rotate(0deg); transform-origin: top center; } 50% { transform: rotate(10deg); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }
@keyframes blink { 0%, 49%, 100% { opacity: 1; } 50%, 99% { opacity: 0; } }
@keyframes slideinleft { from { transform: translateX(-100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideinright { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideindown { from { transform: translateY(-100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideinup { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes zoomin { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes zoomout { from { transform: scale(1); opacity: 1; } to { transform: scale(0); opacity: 0; } }
@keyframes glow { 0%, 100% { text-shadow: 0 0 5px rgba(136, 192, 208, 0.5); } 50% { text-shadow: 0 0 20px rgba(136, 192, 208, 1); } }
@keyframes bouncein { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
@keyframes rotatebounce { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(10deg) scale(1.1); } 100% { transform: rotate(0deg) scale(1); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0deg); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 30% { transform: rotate(14deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
@keyframes rotate360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes tilt { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes sway { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(20px); } }
@keyframes pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes squeeze { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.8); } }
@keyframes blurin { from { filter: blur(10px); opacity: 0; } to { filter: blur(0); opacity: 1; } }
@keyframes colorshift { 0% { color: #ff0000; } 33% { color: #00ff00; } 66% { color: #0000ff; } 100% { color: #ff0000; } }
@keyframes rotateflip { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
@keyframes fall { 0% { transform: translateY(-100px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
@keyframes rise { 0% { transform: translateY(100px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(-100px); opacity: 0; } }
@keyframes scalepulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes rainbow { 0% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(180deg); } 100% { filter: hue-rotate(360deg); } }
@keyframes rotatebouncein { 0% { transform: rotate(-45deg) scale(0); opacity: 0; } 50% { transform: rotate(10deg) scale(1.1); } 100% { transform: rotate(0deg) scale(1); opacity: 1; } }
@keyframes shimmer { 0%, 100% { background-position: 200% 0; } 50% { background-position: -200% 0; } }
@keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } }
@keyframes pulsecolor { 0% { box-shadow: 0 0 0 0 rgba(136, 192, 208, 0.7); } 70% { box-shadow: 0 0 0 20px rgba(136, 192, 208, 0); } 100% { box-shadow: 0 0 0 0 rgba(136, 192, 208, 0); } }
@keyframes spinslow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes flipy { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } }
@keyframes shakeintense { 0%, 100% { transform: translateX(0); } 10% { transform: translateX(-15px); } 20% { transform: translateX(15px); } 30% { transform: translateX(-15px); } 40% { transform: translateX(15px); } }
@keyframes bouncedown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(30px); } }
@keyframes strobe { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes fadeinscale { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes rotateinfinite { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ========== ANIMATION EMOJI CLASSES ========== */
.bounce-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: bounce 0.8s ease-in-out infinite;
}

.pulse-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: pulse 2s ease-in-out infinite;
}

.float-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: float 3s ease-in-out infinite;
}

.spin-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: spin 2s linear infinite;
}

.wobble-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: wobble 0.8s ease-in-out infinite;
}

.shake-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: shake 0.5s ease-in-out infinite;
}

.heartbeat-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: heartbeat 1.3s ease-in-out infinite;
}

.flip-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: flip 0.6s ease-in-out infinite;
}

.swing-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: swing 1s ease-in-out infinite;
}

.fadein-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: fadein 1s ease-in-out;
}

.fadeout-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: fadeout 1s ease-in-out;
}

.blink-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: blink 1s ease-in-out infinite;
}

.slideinleft-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: slideinleft 0.8s ease-out;
}

.slideinright-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: slideinright 0.8s ease-out;
}

.slideindown-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: slideindown 0.8s ease-out;
}

.slideinup-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: slideinup 0.8s ease-out;
}

.zoomin-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: zoomin 0.8s ease-out;
}

.zoomout-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: zoomout 0.8s ease-out;
}

.glow-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: glow 2s ease-in-out infinite;
}

.bouncein-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: bouncein 0.8s ease-out;
}

.rotatebounce-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: rotatebounce 1s ease-in-out infinite;
}

.wiggle-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: wiggle 0.8s ease-in-out infinite;
}

.wave-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: wave 0.6s ease-in-out infinite;
}

.rotate360-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: rotate360 2s linear infinite;
}

.tilt-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: tilt 1s ease-in-out infinite;
}

.sway-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: sway 2s ease-in-out infinite;
}

.pop-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: pop 0.6s ease-in-out infinite;
}

.squeeze-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: squeeze 1s ease-in-out infinite;
}

.blurin-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: blurin 1s ease-out;
}

.colorshift-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: colorshift 2s linear infinite;
}

.rotateflip-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: rotateflip 0.8s ease-in-out infinite;
}

.fall-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: fall 2s ease-in infinite;
}

.rise-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: rise 2s ease-in infinite;
}

.scalepulse-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: scalepulse 1.5s ease-in-out infinite;
}

.rainbow-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: rainbow 3s linear infinite;
}

.rotatebouncein-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: rotatebouncein 0.8s ease-out;
}

.shimmer-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: shimmer 2s ease-in-out infinite;
}

.flash-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: flash 1s ease-in-out infinite;
}

.pulsecolor-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: pulsecolor 2s ease-out infinite;
}

.spinslow-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: spinslow 3s linear infinite;
}

.flipy-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: flipy 0.6s ease-in-out infinite;
}

.shakeintense-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: shakeintense 0.5s ease-in-out infinite;
}

.bouncedown-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: bouncedown 0.8s ease-in-out infinite;
}

.strobe-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: strobe 0.8s ease-in-out infinite;
}

.fadeinscale-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: fadeinscale 0.8s ease-out;
}

.rotateinfinite-emoji {
    font-size: clamp(25px, 4vw, 40px);
    display: inline-block;
    margin-left: clamp(5px, 2vw, 10px);
    animation: rotateinfinite 2s linear infinite;
}



/*Navigation box*/
.navigation-box-menu {
    position: absolute; /* This is the one you REALLY want */
    top: 1rem;             /* adjust as needed */
    left: .5rem;            /* adjust as needed */
    text-align: center;
    padding: clamp(0.5rem, 1vw, 0.75rem);
    font-size: clamp(.3rem, 2vw, 1rem);
    font-weight: bold;
    letter-spacing: 1px;

    background-size: 350px 100px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;

    color: black;
    min-height: 80px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none; 
}

.navigation-box-sns {
    position: absolute; /* This is the one you REALLY want */
    top: 832px;             /* adjust as needed */
    right: 209px;           /* adjust as needed */
    z-index: 10;
    color: black;
    text-align: center;
    
    font-size: clamp(1rem, 2vw, 1.3rem);
    letter-spacing: 1px;
    background-position: center;
    background-color: #8ad4a5;
    background-size: 10px 10px;
    min-height: 40px;
    min-width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    z-index: 0;
    
}


/* Optional text shadow */
.navigation-box {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Optional overlay (keeps it transparent for now) */
.navigation-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: none;
    border-radius: 7px 7px 0 0;
    z-index: -1;  /* Put it behind the text */
}



.drawer-style {
  position: relative;       /* allow pseudo-element positioning */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 2rem;
  margin-top: 0;
  padding: 2rem;
  height: 100px;

  /* overlay image stays on top */
  background-image: url(/assets/images/green-overlay.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.drawer-style::before {
  content: "";
  position: absolute;
  top: 1;          /* adjust vertical start */
  left: 3;         /* adjust horizontal start */
  width: 95%;      /* how much of the section you want filled horizontally */
  height: 90%;     /* how much vertically */
  background-color: var(--tags);
  z-index: -1;      /* behind content */
  border-radius: 10px; /* optional, matches overlay corners */
}

.sns-in-drawer {
  display: flex;
  justify-content: center;
  margin: 2rem;
  margin-bottom: 0;
  padding-bottom: 0;
}


/* NAV DRAWER MOBILE */
.nav-drawer {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 80%;
    max-width: 400px;
    background: var(--cyber-bg);
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 12px;
    z-index: 999;
    padding: clamp(20px, 3vw, 30px);
    max-height: 80h;
    overflow-y: auto;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    cursor: pointer;

    
}

.drawer {
    color: rgb(0, 0, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
}

.nav-drawer.active {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@media (min-width: 1100px) {
    .nav-drawer {
        display: none !important;
    }
}

 #myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

.nav-drawer ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    
}

.nav-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    gap: 10px;
    cursor: pointer;
    
}



.nav-drawer .nav-item {
    background: var(--paper-light);
    
    padding: clamp(10px, 2vw, 15px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: var(--highlight);
}


.nav-drawer .nav-item:hover {
    background: var(--code);
    transform: translateX(5px);
}

.nav-drawer .nav-emoji {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    display: inline-block;
    flex-shrink: 0;
}

.nav-drawer .nav-text {
    color: var(--accent);
    font-size: clamp(1.2rem, 2.2vw, 1.2rem);  /* More breathing room */
    font-weight: 600;
    text-decoration: none;
    color: var(--text);
}

.nav-drawer .nav-item:hover .nav-text {
    color: var(--highlight);
}



/* Posts Grid */
.posts-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

/* Post Card */
.post-card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 24px;
  background: white;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}



.post-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: #d0d0d0;
  transform: translateY(-4px);
}

/* Category Badge */
.post-category {
  display: inline-block;
  padding: 6px 14px;
  background: #f0f0f0;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 12px;
  width: fit-content;
}

.post-card[data-category="recipe"] .post-category {
  background: #fff3e0;
  color: #e65100;
}

.post-card[data-category="foodie-blog"] .post-category {
  background: #e8f5e9;
  color: #2e7d32;
}

/* Post Title */
.post-card h3 {
  margin: 12px 0;
  font-size: 1.4rem;
  color: #222;
  line-height: 1.4;
  flex-grow: 1;
}

/* Post Date */
.post-date {
  font-size: 0.85rem;
  color: #999;
  margin-bottom: 12px;
}

/* Post Excerpt */
.post-card p {
  color: #666;
  line-height: 1.6;
  margin: 12px 0;
  flex-grow: 1;
}

/* Read More Link */
.read-more {
  display: inline-block;
  color: #0066cc;
  text-decoration: none;
  font-weight: 600;
  margin-top: 16px;
  transition: all 0.3s ease;
}

.read-more:hover {
  color: #0052a3;
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 768px) {
  .posts-container {
    grid-template-columns: 1fr;
  }

  .category-filter {
    gap: 8px;
  }

  .filter-btn {
    padding: 10px 18px;
    font-size: 0.95rem;
  }
}

/*Styles for actual post content*/
.post {
  padding: 1rem;
  padding-bottom: 2rem;
}
        .post h2 {
            font-size: clamp(1.2rem, 2.2vw, 1.7rem);
            margin: 30px 0 15px;
            font-weight: 600;
            position: relative;
            padding-bottom: 10px;
        }

        .post h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background: var(--accent);
        }

 

        .post h3 {
            font-size: clamp(1rem, 1.8vw, 1.3rem);
            margin: 25px 0 12px;
            color: var(--text);
            font-weight: 600;
        }

        .post ul, .post ol {
            margin: 15px 0 20px 0;
            padding-left: 0;
            list-style: none;
        }

        .post li {
            position: relative;
            padding-left: clamp(18px, 4vw, 25px);
            margin-bottom: 10px;
            word-wrap: break-word;
            overflow-wrap: break-word;
            
        }

        .post ul li::before {
            content: '▸';
            position: absolute;
            left: 0;
            color: var(--accent);
            font-weight: bold;
            
        }

        .post ol {
            counter-reset: item;
        }

        article ol li::before {
            counter-increment: item;
            content: counter(item) ".";
            position: absolute;
            left: 0;
            color: var(--accent);
            font-weight: bold;
        }


/* NAV OVERLAY */
.nav-overlay {
    display: none;
    position: fixed;
    
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 998;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
}

.nav-overlay.active {
    display: block;
    opacity: 1;
}

@media (min-width: 1100px) {
    .nav-overlay {
        display: none !important;
    }
}


/* MAIN LAYOUT */
.main-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: clamp(15px, 3vw, 20px);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(25px, 4vw, 40px);
    overflow-x: hidden;
}

@media (min-width: 1100px) {
    .main-container {
        max-width: 1200px;
        margin: auto;
        grid-template-columns: 1fr 300px;
        padding: clamp(20px, 3vw, 30px);
    }
}

        /* ARTICLE */
        .article-wrapper {
            display: flex;
            flex-direction: column;
            width: 100%;
            overflow-x: hidden;
        }

        article {
            background: var(--ink);
            border-radius: 6px;
            padding: clamp(30px, 4vw, 50px);
            padding-top: 0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
            overflow-x: hidden;
        }

        .lede {
            font-size: clamp(0.95rem, 1.8vw, 1.15rem);
            line-height: 1.6;
            color: var(--text-fade);
            margin-bottom: 30px;
            padding-left: 15px;
            border-left: 4px solid var(--accent);
            font-style: italic;
        }

        article p {
            margin-bottom: 20px;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        article h2 {
            font-size: clamp(1.2rem, 2.2vw, 1.7rem);
            margin: 30px 0 15px;
            font-weight: 600;
            position: relative;
            padding-bottom: 10px;
        }

        article h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background: var(--accent);
        }

 

        article h3 {
            font-size: clamp(1rem, 1.8vw, 1.3rem);
            margin: 25px 0 12px;
            color: var(--text);
            font-weight: 600;
        }

        article ul, article ol {
            margin: 15px 0 20px 0;
            padding-left: 0;
            list-style: none;
        }

        article li {
            position: relative;
            padding-left: clamp(18px, 4vw, 25px);
            margin-bottom: 10px;
            word-wrap: break-word;
            overflow-wrap: break-word;
            
        }

        article ul li::before {
            content: '▸';
            position: absolute;
            left: 0;
            color: var(--accent);
            font-weight: bold;
            
        }

        article ol {
            counter-reset: item;
        }

        article ol li::before {
            counter-increment: item;
            content: counter(item) ".";
            position: absolute;
            left: 0;
            color: var(--accent);
            font-weight: bold;
        }

        strong {
            color: var(--success);
            font-weight: 600;
        }

        em {
            color: var(--highlight);
        }

        code {
            padding: 2px 6px;
            border-radius: 3px;
            color: var(--highlight);
            font-family: 'Monaco', 'Courier New', monospace;
            font-size: 0.85em;
            border: 1px solid var(--paper-light);
            word-break: break-word;
        }

        pre {

            padding: clamp(12px, 2vw, 20px);
            border-radius: 5px;
            overflow-x: auto;
            margin: 0;
            border: 1px solid var(--paper-light);
                box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
                background-color: #2e2a63;
        }

        pre code {

            padding: 0;
            border: none;
            
            font-size: clamp(0.7rem, 1.2vw, 1.2rem);
            line-height: 1.5;
        }

        .insight {
            background: rgba(59, 130, 246, 0.08);
            border-left: 3px solid var(--accent);
            padding: clamp(12px, 2vw, 20px);
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }

        .insight h4 {
            margin: 0 0 8px;
            color: var(--highlight);
            font-size: clamp(0.95rem, 1.5vw, 1rem);
        }

        .insight p {
            margin-bottom: 8px;
            font-size: clamp(0.9rem, 1.4vw, 0.95rem);
        }

        .warning {
            background: rgba(251, 191, 36, 0.08);
            border-left-color: var(--warning);
        }

        .warning h4 {
            color: var(--warning);
        }

        .example {
            background: rgba(52, 211, 153, 0.08);
            border-left-color: var(--success);
        }

        .example h4 {
            color: var(--success);
        }

        .code-compare {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
            margin: 20px 0;
        }

        @media (min-width: 600px) {
            .code-compare {
                grid-template-columns: 1fr 1fr;
            }
        }

        .code-label {
            font-size: 0.8em;
            font-weight: 600;
            margin-bottom: 6px;
            padding: 4px 8px;
            border-radius: 3px;
            display: inline-block;
        }

        .wrong {
            background: rgba(248, 113, 113, 0.2);
            color: var(--error);
        }

        .right {
            background: rgba(52, 211, 153, 0.2);
            color: var(--success);
        }

        .table-wrapper {
            overflow-x: auto;
            margin: 20px 0;
        }

        table {
            width: 100%;
            min-width: 250px;
            border-collapse: separate;
            border-spacing: 0;
            background: var(--code);
            border-radius: 5px;
            font-size: clamp(0.8rem, 1.2vw, 0.9rem);
        }

        thead {
            background: var(--ink);
        }

        th {
            padding: clamp(8px, 1.5vw, 12px);
            text-align: left;
            font-weight: 600;
            color: var(--highlight);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        td {
            padding: clamp(8px, 1.5vw, 12px);
            border-top: 1px solid var(--paper-light);
            word-wrap: break-word;
        }

        .article-footer {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid var(--paper-light);
        }

        .tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 15px;
        }

        .tag {
            background: var(--code);
            padding: 4px 8px;
            border-radius: 3px;
            font-size: 0.75em;
            color: var(--text-fade);
            border: 1px solid var(--paper-light);
            
        }

        .author-note {
            color: var(--text-fade);
            font-style: italic;
            font-size: 0.9em;
        }


/*====================================*/
/*=======Photos Only layout=============*/   



.photos-main-container {
    width: 100%;
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(25px, 4vw, 40px);
    overflow-x: hidden;
}

@media (min-width: 1100px) {
    .photos-main-container {

        margin: auto;
        grid-template-columns: 1fr 300px;
        padding: clamp(20px, 3vw, 30px);
    }
}


        /* ARTICLE */
        .photos-article-wrapper {
            display: flex;
            flex-direction: column;
            width: 100%;
            overflow-x: hidden;
        }

        photos-article {
            background: var(--ink);
            border-radius: 6px;
            padding: clamp(30px, 4vw, 50px);
            padding-top: 0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
            overflow-x: hidden;
        }


        photos-article p {
            margin-bottom: 20px;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        photos-article h2 {
            font-size: clamp(1.2rem, 2.2vw, 1.7rem);
            margin: 30px 0 15px;
            font-weight: 600;
            position: relative;
            padding-bottom: 10px;
        }

        photos-article h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background: var(--accent);
        }

 

        photos-article h3 {
            font-size: clamp(1rem, 1.8vw, 1.3rem);
            margin: 25px 0 12px;
            color: var(--text);
            font-weight: 600;
        }

        photos-article ul, article ol {
            margin: 15px 0 20px 0;
            padding-left: 0;
            list-style: none;
        }

        phhotos-article li {
            position: relative;
            padding-left: clamp(18px, 4vw, 25px);
            margin-bottom: 10px;
            word-wrap: break-word;
            overflow-wrap: break-word;
            
        }

        photo-article ul li::before {
            content: '▸';
            position: absolute;
            left: 0;
            color: var(--accent);
            font-weight: bold;
            
        }

        photos-article ol {
            counter-reset: item;
        }

        photos-article ol li::before {
            counter-increment: item;
            content: counter(item) ".";
            position: absolute;
            left: 0;
            color: var(--accent);
            font-weight: bold;
        }

        .photos-article-footer {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid var(--paper-light);
        }

main {
    display: flex;
    justify-content: center;
    align-items: start;
    padding: 1rem;
    position: relative;
    flex-wrap: wrap;
}

/* Grid for gallery */
main ul.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 2;
}

main ul.gallery li {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
}

/* Figure styling */
main ul.gallery li figure {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 0.5rem;
    box-sizing: border-box;
}


/* Image container */
.image__container {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 ratio preview */
    overflow: hidden;
}

.image__container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* keeps aspect ratio, fills container */
    transition: transform 0.2s ease;
    cursor: pointer;
}

.image__container img:hover {
    transform: scale(1.05);
}

/* Caption styling */
figcaption {
    font-size: 1.3rem;
    font-family: 'handwriting';
    padding: 0.5rem 0;
    text-align: center;
    color: black;
}

/* Lightbox */
.page-lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.page-lightbox-content {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 6px;
}

.page-lightbox-caption {
    position: absolute;
    top: 20px;                    /* distance from top */
    left: 10%;                    /* center horizontally */
    transform: translateX(-50%);  /* exact horizontal centering */
    color: #fffcfcec;
    font-size: 1.5rem;            /* added units */
    font-weight: bold;
    font-family: 'handwriting', sans-serif;
    background-size: cover;
    background-repeat: no-repeat; /* corrected */
    background-color: #1f2d2f69;    /* fallback color */
    padding: .5rem 10px;
    text-align: center;
    border-radius: 4px;           /* optional for nicer look */
    z-index: 10000;               /* above the image */
    max-width: 90%;               /* don’t exceed image width */
    margin: 1rem;
}

@media (min-width: 600px) {
  .page-lightbox-caption {
    left: 10%;
    transform: none;
    text-align: left;
  }
}



/* Phones */
@media (max-width: 600px) {
  .page-lightbox-caption {
    font-size: 1.1rem;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: .35rem .75rem;
    max-width: 95%;
    margin: .5rem;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .page-lightbox-caption {
    font-size: .95rem;
    top: 8px;
    padding: .3rem .6rem;
  }
}


.page-lightbox-close {
    position: absolute;
    top: 100px;
    right: 50px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.page-lightbox-close:hover {
    color: #ccc;
}

/* Responsive tweaks */
@media (max-width: 900px) {
    main ul.gallery {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.75rem;
    }
}

@media (max-width: 600px) {
    main ul.gallery {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.5rem;
    }
    figcaption {
        font-size: 0.75rem;
    }
}

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.267);
    cursor: pointer;
    user-select: none;       /* Prevent text selection */
    background: none;        /* Force no background */
    border: none;            /* Remove any border */
    outline: none;           /* Remove focus outline */
    padding: 0 10px;         /* Optional spacing */
    z-index: 1001;
}

.lightbox-arrow.left {
    left: 10px;
}

.lightbox-arrow.right {
    right: 10px;
}

body.no-scroll {
    overflow: hidden;
}

/*Sony Grid*/
/*====================================*/
/*=======Sony Photos Only layout=============*/   

.sony-photos-main-container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(25px, 4vw, 40px);
    overflow-x: hidden;
}

@media (min-width: 1100px) {
    .sony-photos-main-container {
        margin: auto;
        grid-template-columns: 1fr 300px;
        padding: clamp(20px, 3vw, 30px);
    }
}

/* ARTICLE */
.sony-photos-article-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: hidden;
}

.sony-photos-article {
    background: var(--ink);
    border-radius: 6px;
    padding: clamp(30px, 4vw, 50px);
    padding-top: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.sony-photos-article p {
    margin-bottom: 20px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.sony-photos-article h2 {
    font-size: clamp(1.2rem, 2.2vw, 1.7rem);
    margin: 30px 0 15px;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;
}

.sony-photos-article h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background: var(--accent);
}

.sony-photos-article h3 {
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    margin: 25px 0 12px;
    color: var(--text);
    font-weight: 600;
}

.sony-photos-article ul,
.sony-photos-article ol {
    margin: 15px 0 20px 0;
    padding-left: 0;
    list-style: none;
}

.sony-photos-article li {
    position: relative;
    padding-left: clamp(18px, 4vw, 25px);
    margin-bottom: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.sony-photos-article ul li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

.sony-photos-article ol {
    counter-reset: item;
}

.sony-photos-article ol li::before {
    counter-increment: item;
    content: counter(item) ".";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

.sony-photos-article-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--paper-light);
}

/* MAIN */
.sony-photos-main {
    display: flex;
    justify-content: center;
    align-items: start;
    padding: 1rem;
    position: relative;
    flex-wrap: wrap;
}

/* Gallery */
.sony-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 2;
}

.sony-gallery li {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
}

/* Figure styling */
.sony-gallery figure {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 0.5rem;
    box-sizing: border-box;
}

/* Image container */
.sony-image__container {
    position: relative;
    width: 100%;
    padding-top: 75%;
    overflow: hidden;
}

.sony-image__container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.sony-image__container img:hover {
    transform: scale(1.05);
}

/* Caption under thumbnails */
.sony-gallery figcaption {
    font-size: 1.3rem;
    font-family: 'handwriting';
    padding: 0.5rem 0;
    text-align: center;
    color: black;
}

/* Lightbox */
.sony-page-lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.sony-page-lightbox-content {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 6px;
}

.sony-page-lightbox-caption {
    position: absolute;
    top: 20px;
    left: 10%;
    transform: none;
    color: #fffcfcec;
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'handwriting', sans-serif;
    background-color: #1f2d2f69;
    padding: .5rem 10px;
    text-align: left;
    border-radius: 4px;
    z-index: 10000;
    max-width: 90%;
    margin: 1rem;
}

/* Media center rules */
@media (max-width: 600px) {
    .sony-page-lightbox-caption {
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }
}

/* Close button */
.sony-page-lightbox-close {
    position: absolute;
    top: 100px;
    right: 50px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Arrows */
.sony-lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.267);
    cursor: pointer;
    user-select: none;
    background: none;
    border: none;
    padding: 0 10px;
    z-index: 1001;
}

.sony-lightbox-arrow.left { left: 10px; }
.sony-lightbox-arrow.right { right: 10px; }

/* Gallery responsive */
@media (max-width: 900px) {
    .sony-gallery {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

@media (max-width: 600px) {
    .sony-gallery {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
    .sony-gallery figcaption {
        font-size: 0.75rem;
    }
}


/* SIDEBAR */

        

        /*Individual ASIDE*/
/* Make whole sidebar fixed after scroll */


.sidebar.left.fixed {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 350px; /* match your grid sidebar width */
    z-index: 9999;
}



        .sidebar {
            display: none;
            width: 100%;
            flex-direction: column;
            gap: 30px;
            position: relative;
            
        }

         @media (min-width: 1100px) {
            .sidebar {
                display: flex;
                width: auto;
                max-width: 400px;
            }
        }

        .sidebar nav {
            display: flex;
            flex-direction: column;
        }

.sidebar nav ul {
    background: url('/assets/images/yellow-cyber-overlay.webp') no-repeat;
    background-size: 100% 100%; /* stretches to fill the width and
     height of the ul */
    min-height: 700px;
    background-position: top left; /* align to top-left corner */
    border-radius: 0 0 7px 7px;
    padding: 15px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 20px;
    width: clamp(250px, 90vw, 300px);
    padding: 100px;
    font-size: large;
    
    
}

.sidebar nav ul.menu {
    background: url('/assets/images/yellow-cyber-overlay.webp') no-repeat;
    background-size: 100% 100%; /* stretches to fill the width and
     height of the ul */
    min-height: 700px;
    background-position: top left; /* align to top-left corner */
    border-radius: 0 0 7px 7px;
    padding: 15px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 20px;
    width: clamp(250px, 90vw, 350px);
    padding: 100px;
    
    
}

.sidebar nav ul.sns {
    display: flex;
    flex-direction: row;     /* horizontal stacking */
    flex-wrap: wrap;         /* wrap to next line if needed */
    justify-content: center; /* center horizontally */
    align-items: center;     /* center vertically */
    gap: 12px;               /* space between items */
    
    background: url('/assets/images/yellow-cyber-overlay.webp') no-repeat;
    background-size: 100% 100%;
    min-height: 150px;
    background-position: top left;
    border-radius: 0 0 7px 7px;
    padding: 15px 0px;
    position: sticky;
    top: 20px;
    width: clamp(250px, 90vw, 300px);
}





    


.sidebar nav .nav-item {
    margin: .5rem;
    margin-left: 1.5rem;
    margin-right: 2rem;
    border-radius: 6px;
    padding: 8px;  /* Reduced from 12px */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;  /* Reduced from 15px */
    transition: all 0.3s ease;
    cursor: pointer;
    

}
.ul-nav .nav-item {
    display: flex;            /* makes <a> behave like a flex box */
    flex-wrap: wrap;
    width: 300px;             /* required for background image */
    height: 60px;             /* required for background image */
    align-items: center;
    justify-content: center;

    text-decoration: none;
    font-weight: bold;
    color: var(--text);

    background-image: url('/assets/images/logic-chip.png');
    background-size: 180px 60px;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ul-nav .nav-item:hover {
    transform: translateY(-3px);
    filter: brightness(1.15);
    color: var(--white);
    background-image: url(/assets/images/breadboard-chip.webp);
    
}




.nav-emoji {
    font-size: clamp(1rem, 1.5vw, 1.2rem);  /* Reduced from 1.3rem-1.6rem */
    display: inline-block;
    flex-shrink: 0;
    animation: float 3s ease-in-out infinite;
}

.sidebar nav .nav-item:hover {
    
}

.sidebar nav .nav-item {
    margin: .5rem;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    transition: all 0.3s ease; /* smooth transition for both color and movement */
    cursor: pointer;
    
}

        .sidebar nav .nav-item:hover .nav-emoji {
            animation: spin 0.6s ease-in-out;
        }

        .nav-text {
            color: var(--text);
            font-size: clamp(1.2rem, 1.5vw, 1.2rem);
            font-weight: 900;
            text-decoration: none;
        }

        .sidebar nav .nav-item:hover .nav-text {
            color: var(--white);
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-6px); }
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        a, a:visited {
            color: var(--text);
            transition: 0.25s;
            text-decoration: none;
        }

        a:hover {
            color: var(--highlight);
        }
        /* Small Screens */
        @media (max-width: 599px) {
            .main-container {
                padding: 15px;
                gap: 20px;
            }

           

            .card {
                border-width: 6px;
            }

            .project-box {
                padding: 1rem;
                font-size: 0.95rem;
            }
        }

 .handwritten {
    font-family: Great Vibes;
    font-size: 25px;
     text-shadow: 2px 2px 5px #aaa;
}

.dotgothic16-regular {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*TOC*/

.toc-002 {
    margin-bottom: 30px;
    border: 2px solid var(--accent);
    border-radius: 3px;
    margin-top: 6rem;
}

.toc-002 div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 10px 0;
    background-color: var(--code);
    color: #fff;
    font-weight: 600;
    font-size: 1.1em;
}

.toc-002 div::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 5px;

}



.toc-002 > ol {
    padding: 1em 1em 1em ;
}

.toc-002 ol ol {
    margin-top: 5px;
    padding-left: 1.1em;
}

.toc-002 li {
   
    font-weight: 600;
}

.toc-002 ol ol li {
    font-weight: 500;
    font-size: .9em;
}

.toc-002 a {
    color: white;
    text-decoration: none;
    padding: 2rem;
}

/*Smaller - TOC*/

.toc-003 {
    margin-bottom: 3rem;
    border: 2px solid var(--accent);
    border-radius: 3px;
    margin-top: 3rem;
}

.toc-003 div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 1rem;
    background-color: var(--code);
    color: #fff;
    font-weight: 600;
    font-size: 1.1em;
}

.toc-003 div::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 5px;
    content: '';
}



.toc-003 > ol {
    padding: 1em 4em 1em ;
}

.toc-003 ol ol {
    margin-top: 5px;
    padding-left: 1.1em;
}

.toc-003 li {
   
    font-weight: 600;
}

.toc-003 ol ol li {
    font-weight: 500;
    font-size: .9em;
}

.toc-003 a {
    color: white;
    text-decoration: none;
    padding: 2rem;
}

/*end small TOC*/

.indent {
    text-indent: 2em;
}

.about-image {
  display: flex; 
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* optional parallax effect */
  height: 500px;
  image-rendering: crisp-edges; /* for sharp images */
  overflow: hidden; 
  
}

.about-page {
  padding: 1rem;
  overflow: hidden;
}

.image-center {
    display: flex;
    justify-content: center; /* centers horizontally */
    margin-top: 3rem;
}

.image-center img {
    max-width: 50%;      /* scales down for smaller screens */
    height: auto;        /* keeps aspect ratio */
   
    display: block;
}


.manImg {
  width: 365px;
  height: 20px;
  padding: 0;
  margin: 0;
}


.food-image {
  display: flex; 
  justify-content: center; 
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* optional parallax effect */
  height: 600px;
  image-rendering: crisp-edges; /* for sharp images */
}



/*Contact form*/
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: var(--paper);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--accent);
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding-left: max(20px, calc((100% - 600px) / 2));
  padding-right: max(20px, calc((100% - 600px) / 2));
}

.contact-form label {
  font-weight: bold;
  color: var(--text);
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
  display: block;
  margin-bottom: 4px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--tags);
  font-size: 1rem;
  color: var(--text);
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
  font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--highlight);
  background: var(--paper-light);
  box-shadow: 0 0 0 2px rgba(136, 192, 208, 0.1);
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
  font-family: inherit;
}

.h-captcha {
  display: flex;
  justify-content: center;
  margin: 10px 0;
  overflow: visible;
}

.h-captcha #anchor {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-size: clamp(12px, 2vw, 14px) !important;
}

.h-captcha #anchor svg {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

.h-captcha #anchor-wr {
  width: 100% !important;
}

.h-captcha #anchor-td,
.h-captcha #anchor-tc {
  width: 100% !important;
}

.h-captcha #anchor-state {
  width: auto !important;
  height: auto !important;
}

.h-captcha #checkbox {
  width: 24px !important;
  height: 24px !important;
}

.h-captcha .label-container {
  width: auto !important;
  flex: 1;
}

.h-captcha #label {
  font-size: clamp(12px, 2vw, 14px) !important;
}

.h-captcha iframe {
  max-width: 100% !important;
  width: 100% !important;
}

/* Scale captcha on very small screens */
@media (max-width: 319px) {
  .h-captcha #anchor {
    width: 280px !important;
    margin: 0 auto;
  }

  .h-captcha #anchor-state {
    width: 24px !important;
    height: 24px !important;
  }

  .h-captcha #checkbox {
    width: 20px !important;
    height: 20px !important;
  }
}

@media (max-width: 399px) {
  .h-captcha #anchor {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto;
  }

  .h-captcha #anchor-state {
    width: 26px !important;
    height: 26px !important;
  }

  .h-captcha #checkbox {
    width: 22px !important;
    height: 22px !important;
  }
}

@media (max-width: 499px) {
  .h-captcha #anchor {
    width: 100% !important;
    max-width: 350px !important;
    margin: 0 auto;
  }

  .h-captcha #anchor-state {
    width: 28px !important;
    height: 28px !important;
  }

  .h-captcha #checkbox {
    width: 24px !important;
    height: 24px !important;
  }
}

.submit-btn {
  background: var(--code);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.2s ease;
  width: 100%;
  min-height: 44px;
  font-family: inherit;
}

.submit-btn:hover {
  background: var(--highlight);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(136, 192, 208, 0.3);
}

.submit-btn:active {
  transform: translateY(0);
}

/* Extra small screens (under 320px) */
@media (max-width: 319px) {
  .contact-form {
    padding: 12px;
    gap: 10px;
  }

  .contact-form label {
    font-size: 0.75rem;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 8px;
    font-size: 14px;
  }

  .contact-form textarea {
    min-height: 100px;
  }

  .submit-btn {
    padding: 10px 12px;
    font-size: 0.9rem;
    min-height: 40px;
  }
}

/* Small mobile (320px to 599px) */
@media (min-width: 320px) and (max-width: 599px) {
  .contact-form {
    padding: 14px;
    gap: 12px;
  }

  .contact-form label {
    font-size: 0.8rem;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 10px;
    font-size: 16px;
  }

  .contact-form textarea {
    min-height: 110px;
  }

  .submit-btn {
    padding: 11px 14px;
    font-size: 0.95rem;
  }
}

/* Mobile (600px to 767px) */
@media (min-width: 600px) and (max-width: 767px) {
  .contact-form {
    padding: 20px;
    gap: 15px;
  }

  .contact-form label {
    font-size: 0.9rem;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 12px;
    font-size: 16px;
  }

  .contact-form textarea {
    min-height: 130px;
  }

  .submit-btn {
    padding: 12px 16px;
    font-size: 1rem;
  }
}

/* Tablet (768px and up) */
@media (min-width: 768px) {
  .contact-form {
    padding: 30px;
    gap: 20px;
    max-width: 600px;
  }

  .contact-form label {
    font-size: 0.95rem;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 14px;
    font-size: 1rem;
  }

  .submit-btn {
    padding: 14px 24px;
    font-size: 1rem;
    width: auto;
    align-self: flex-start;
  }
}

/* Large screens (1024px and up) */
@media (min-width: 1024px) {
  .contact-form {
    padding: 40px;
    gap: 25px;
    max-width: 700px;
  }

  .contact-form label {
    font-size: 1rem;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 16px;
    font-size: 1.05rem;
  }

  .submit-btn {
    padding: 16px 32px;
    font-size: 1.05rem;
  }
}

/* Success / Error boxes */
.form-success, .form-error {
  margin-top: 20px;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid;
  font-weight: 500;
}

.form-success {
  background: rgba(52, 211, 153, 0.1);
  border-left-color: var(--success);
  color: var(--success);
}

.form-success h3 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
}

.form-success p {
  margin: 0;
  font-size: 0.95rem;
}

.form-error {
  background: rgba(248, 113, 113, 0.1);
  border-left-color: var(--error);
  color: var(--error);
}

.form-error h3 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
}

.form-error p {
  margin: 0;
  font-size: 0.95rem;
}

/* Success / Error boxes */
.form-success, .form-error {
    margin-top: 20px;
    padding: 15px;
    border-radius: 10px;
}

.form-success {
    background: #2ecc71;
    color: white;
}

.form-error {
    background: #e7bf3c;
    color: white;
}


/*start Project Slider*/


* {
  box-sizing: border-box;
}



a {
  color: inherit;
}

.cards-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;  /* Add this */
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
  overflow-x: hidden;  /* Add this to prevent horizontal scroll */
}


.card {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  border: 4px solid var(--accent);
  border-radius: 1em;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  box-shadow: 0 1em 1em 1em rgba(63, 236, 227, 0.301);
  transition: all 0.3s ease;
  font-size: 0.9rem;
  padding: 0.75em;
  margin-bottom: 1rem;
  border-width: 6px;
  box-sizing: border-box;  /* CRITICAL: Add this */
}

.card-image {
    height: 240px;  /* Explicit height */
    overflow: hidden;
}

/* IMAGE FIX – more consistent scaling */
.card-image img {
  width: 50%;
  height: 240px;
  object-fit: contain;
}

.card img {
    width: 300px;
    max-height: 250px;
    min-height: 250px;
    
}

.card-content {
flex: 0 0 40%; /* Take up 40% of card height */
background: var(--card-top);
padding: 1em;
overflow: auto;
min-height: 200px;
}

.card.card-cover img {
  object-fit: cover; 
}

.card:hover img{

}


/* image wrap with text overlay */
.img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

}

.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-text {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 1.5rem;
  opacity: 0;
  transition: 0.3s ease;
}

.img-wrap:hover .overlay-text {
  opacity: 1;
}
/*end image wrap*/


.card .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    margin-top: 0.5em;
    
}

.card .tags .tag {
    font-size: clamp(1rem, 1.2vw, 1em);
    background: var(--card-top);
    border-radius: 0.3rem;
    padding: 0.25em 0.5em;
    line-height: 1.5em;
    transition: all 0.3s ease;
    color: var(--text-fade);
    border: 1px solid var(--accent);
    display: none;
}

.card:hover .tags .tag {
    background: var(--accent);
    color: var(--ink);
}

.card .date {
  position: relative;
  top: 0;
  right: 0;
  font-size: 0.75em;
  padding: 1em;
  line-height: 1em;
  opacity: .8;
}



.card:before {
    content: '';
    transform: scale(0);
    transform-origin: top left;
    border-radius: 50%;
    position: absolute;
    left: -50%;
    top: -50%;
    z-index: 0;
    transition: all 0.3s ease-in-out;


}

.card:after {
    content: '';
    transform: scale(0);
    transform-origin: top left;
    border-radius: 50%;
    position: absolute;
    left: -50%;
    top: -50%;
    z-index: 1;
    transition: all 0.3s ease-in-out;
    background: rgba(255, 255, 255, 0.11);

}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(248, 221, 67, 0.4);
}

.card:hover:before, .card:hover:after {
transform: scale(1);
}



.project-card-grid-space .num {
    display: block; /* make it a block element */
    text-align: center; /* center the text inside */
    width: 100%; /* take full width of parent */
    margin-bottom: 0.5rem; /* optional spacing from card */
}


.info {
  font-size: 1.2em;
  display: flex;
  padding: 1em 3em;
  height: 3em;
}

.info img {
  height: 3em;
  margin-right: 0.5em;
}

.info h1 {
  font-size: 1em;
  font-weight: normal;
  max-width: 300px;
}

.card h1 {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1em);
    line-height: 1.2em;
    color: white;
}

.card p {
    font-size: clamp(0.7rem, 1.5vw, 0.85em);
    margin-top: 0.5em;
    line-height: 1em;
    color: var(--text-fade);
}
    
    .card .tags .tag {
        font-size: 1em;
    }

   /* MEDIA QUERIES */

/* 2-column when wide */
@media (min-width: 600px) {
  .cards-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .cards-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Table-size */
@media screen and (max-width: 900px) {
  .cards-wrapper {
    grid-template-columns: 1fr;
  }
  .info {
    justify-content: center;
  }

}

.card-grid-space .num {
    display: block; /* make it a block element */
    text-align: center; /* center the text inside */
    width: 100%; /* take full width of parent */
    margin-bottom: 0.5rem; /* optional spacing from card */
    text-align: center;
}

/* MOBILE FIX — stops right-side cutoff */
@media screen and (max-width: 500px) {
  .cards-wrapper {
    padding: 0.5rem;
  }

  .card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.5em;
    border-width: 5px;
    box-sizing: border-box;
  }
}

/* tiny screens */
@media screen and (max-width: 450px) {
  .info {
    display: block;
    text-align: center;
  }
  .info h1 {
    margin: 0;
  }
}




/*end Project Slider*/


/*EMOJIS*/


        .fluent-emoji-flat--man-raising-hand-light {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none'%3E%3Cpath fill='%23ffd7c2' d='M9.467 10.958a6.7 6.7 0 0 1 1.044-1.574c.627-.681 1.196-1.17 1.206-1.179a.793.793 0 0 0 .085-1.132a.84.84 0 0 0-1.158-.083c-.028.028-.38.322-.835.773c-.066.065-.18.019-.17-.064c.151-1.51.284-2.624.388-3.416c.048-.396-.133-.792-.531-.893a.763.763 0 0 0-.92.516c0 .037-.077.874-.248 1.887c-.019.11-.037.23-.047.34c-.01.028-.038.056-.076.047c-.028-.01-.047-.037-.038-.055c.095-1.427.209-2.726.209-2.753a.73.73 0 0 0-.588-.856a.74.74 0 0 0-.883.57c-.02.056-.086 1.418-.209 2.597c0 .027-.047.027-.047 0L6.6 3.878a.74.74 0 0 0-.778-.69a.744.744 0 0 0-.721.782l.123 1.989c0 .055-.085.064-.085.01c-.086-.58-.143-.986-.143-.995a.756.756 0 0 0-.854-.626a.73.73 0 0 0-.636.82c.247 1.758.646 4.63.674 4.998c0 .019 0 .028.01.037c.085.59.38 1.151.863 1.584c1.12 1.003 2.885.939 3.93-.138c.199-.203.36-.442.483-.69'/%3E%3Cpath fill='%230092e7' d='M9 14H5v-1.578c0-.241.154-.422.337-.422h3.317c.192 0 .336.193.336.422V14z'/%3E%3Cpath fill='%2300a6ed' d='M21.5 21c2.5 0 7.5 3.5 7.5 9H11v-3.5a.67.67 0 0 0-.416-.625L7.5 24.5C5 23.5 4 21 4 19.302v-5.287C4 13.45 4.425 13 4.935 13h4.13c.52 0 .935.461.935 1.015V18c0 1.302 1 1.5 1 1.5l6 1.5z'/%3E%3Cpath fill='%23f4c6ad' d='M19.267 24.213A2.27 2.27 0 0 1 17 21.946v-2.679a2.268 2.268 0 0 1 4.535 0v2.679a2.27 2.27 0 0 1-2.268 2.267M15.75 14a2 2 0 1 1-4 0a2 2 0 0 1 4 0m11.438 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0'/%3E%3Cpath fill='%23ffd7c2' d='M18.985 5.447c-3.325 0-5.953 2.763-5.72 6.012l.464 6.526c.202 2.05 1.85 3.506 3.85 3.506h3.841c2.001 0 3.649-1.465 3.85-3.506l.466-6.526c.232-3.25-2.396-6.012-5.72-6.012z'/%3E%3Cpath fill='%23212121' d='m25.708 6.62l-.5-.234a3.7 3.7 0 0 1-.96-.65l-.98-.912c-.73-.687-1.82-.922-2.8-.602a3.17 3.17 0 0 1-1.961 0a2.34 2.34 0 0 0-2.58.395l-1.2 1.12c-.28.263-.61.48-.96.649l-.5.235c-.91.433-1.41 1.383-1.23 2.343l.67 3.434c.07.339.38.593.75.602c0 0-.07-.979-.11-1.609a1 1 0 0 1 .37-.847l.22-.178c.3-.255.47-.612.47-.988v-.97a.6.6 0 0 1 .48-.573c.76-.18 2.37-.48 4.62-.48s3.86.3 4.62.48a.6.6 0 0 1 .48.573v.96c0 .377.17.734.47.988l.23.198c.26.216.39.527.37.856c-.04.62-.11 1.59-.11 1.59a.77.77 0 0 0 .73-.602l.67-3.434c.17-.96-.34-1.91-1.26-2.343'/%3E%3Cpath fill='%23212121' d='M14.982 11.688a.66.66 0 0 0 .899.138c.02-.02.612-.445 1.481-.346a.642.642 0 0 0 .148-1.274c-1.392-.168-2.37.563-2.41.593a.64.64 0 0 0-.118.889m8.138.138a.62.62 0 0 0 .384.128a.68.68 0 0 0 .514-.247a.644.644 0 0 0-.119-.898c-.046-.035-1.012-.76-2.41-.593a.642.642 0 0 0 .148 1.274c.86-.108 1.453.306 1.482.336'/%3E%3Cpath fill='%23e5af93' d='m19.11 13.343l-.581 2.063c-.125.42.17.852.58.852h.876c.41 0 .706-.432.58-.852l-.591-2.063a.444.444 0 0 0-.865 0'/%3E%3Cpath fill='%23990838' d='M19.36 17.956c-.63 0-1.2-.215-1.624-.439c-.152-.08-.313.142-.196.281c.434.517.89 1.098 1.82 1.098c.929 0 1.41-.514 1.827-1.02c.118-.142-.074-.381-.228-.303a3.5 3.5 0 0 1-1.6.383'/%3E%3Cpath fill='%23fff' d='M17.857 14.006c.32 0 .583-.277.461-.574a1.777 1.777 0 0 0-3.288 0c-.121.297.14.574.462.574zm3.265 0c-.32 0-.583-.277-.461-.574a1.777 1.777 0 0 1 3.288 0c.121.297-.14.574-.461.574z'/%3E%3Cpath fill='%237d4533' d='M15.836 13.726q0 .145.036.28h1.985a.6.6 0 0 0 .186-.033q.027-.12.028-.247a1.117 1.117 0 0 0-2.235 0m7.307 0q0 .145-.036.28h-1.985a.6.6 0 0 1-.186-.033a1.117 1.117 0 1 1 2.207-.247'/%3E%3Cpath fill='%23000' d='M16.283 13.74q.001.132.047.247h1.303a.7.7 0 0 0 .047-.246a.69.69 0 0 0-.698-.685a.69.69 0 0 0-.699.685m6.413.013a.7.7 0 0 1-.047.252h-1.303a.698.698 0 1 1 1.35-.251'/%3E%3Cpath fill='%23fff' d='M16.954 13.168a.28.28 0 1 1-.559 0a.28.28 0 0 1 .559 0m4.581 0a.28.28 0 1 0 .558 0a.28.28 0 0 0-.558 0'/%3E%3C/g%3E%3C/svg%3E");


}

.fluent-emoji-flat--writing-hand {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none'%3E%3Cpath fill='%23d67d00' d='M9.995 15.583a2.5 2.5 0 0 1 5 0v8.42h6.95v-4h8.04v8.76c0 .68-.55 1.24-1.24 1.24h-9.24c-2.49 0-4.51-2.02-4.51-4.51v2.01a2.5 2.5 0 0 1-5 0z'/%3E%3Cpath fill='%23ffc83d' d='m13.045 9.653l15.85 6.88c.67.29 1.1.94 1.1 1.67v9.81h-6.81c-1.88 0-3.57-.86-4.62-2.3c-.49-.67-1.4-.85-2.12-.45l-3.26 1.82A3.005 3.005 0 0 1 9.095 26H8v-3.5l-1.325.013a2.52 2.52 0 0 1-2.17 1.25c-.43 0-.86-.11-1.25-.34c-1.2-.7-1.61-2.22-.92-3.42l5.2-8.68a4.42 4.42 0 0 1 5.51-1.67M8.125 20h4.125v.69l2.265-1.307q.228-.131.465-.218a3.487 3.487 0 0 0-3.475-3.162c-.67 0-1.29 1.36-1.62 1.95z'/%3E%3Cpath fill='%23f95725' d='m19.185 2.083l2.38 1.38c.3.17.4.55.23.85l-9.401 16.294l-2.21 1.276a3.005 3.005 0 0 0-.991 4.272l-.558.968c-.16.28-.39.53-.66.72l-2.75 2.08a.468.468 0 0 1-.73-.42l.38-3.44c.03-.34.13-.67.3-.96l13.16-22.79c.17-.3.55-.4.85-.23'/%3E%3Cpath fill='%23fbb8ab' d='m8.552 27.256l-3.43-2.058a2.3 2.3 0 0 0-.247.865L4.61 28.46l1.469.816l1.896-1.433c.226-.16.424-.361.577-.587'/%3E%3Cpath fill='%23000' d='m4.685 27.723l-.19 1.78c-.03.39.41.64.73.42l1.4-1.07z'/%3E%3Cpath fill='%23d3d3d3' d='m16.395 5.673l3.46 2l1.04-1.8l-3.46-2z'/%3E%3C/g%3E%3C/svg%3E");
}

.fluent-emoji-flat--link {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none'%3E%3Cpath fill='%239b9b9b' d='M21.148 21.148c-1.62-.43-2.847-.134-4.62.57l-3.41 3.41a4.52 4.52 0 0 1-6.4 0a4.52 4.52 0 0 1 0-6.4l3.41-3.41h.92l2.39-1.87c1.31-.14 2.68.27 3.68 1.28s1.42 2.37 1.28 3.68c.718.783 1.677.95 2.437.19l.872-2.06c-.27-1.54-1-3.02-2.19-4.21a7.86 7.86 0 0 0-4.21-2.19l-2.19-.674l-2.42 1.233c-.86.38-1.67.92-2.38 1.63l-4 4c-3.09 3.09-3.09 8.12 0 11.21s8.12 3.09 11.21 0l4-4a7.9 7.9 0 0 0 1.62-2.39'/%3E%3Cpath fill='%23bebebe' d='M27.528 4.318c-3.09-3.09-8.12-3.09-11.21 0l-4 4c-.7.71-1.24 1.52-1.62 2.38a8 8 0 0 1 4.62-.57l3.41-3.41a4.52 4.52 0 0 1 6.4 0c1.76 1.77 1.77 4.64 0 6.4l-3.41 3.41l-.59.59c-.76.76-1.73 1.17-2.72 1.28c-1.31.14-2.68-.27-3.68-1.28s-1.42-2.37-1.28-3.68c-1 .11-1.96.52-2.72 1.28l-.59.59c.27 1.54 1 3.02 2.19 4.21a7.86 7.86 0 0 0 4.21 2.19a7.99 7.99 0 0 0 7-2.2l4-4c3.08-3.07 3.08-8.1-.01-11.19'/%3E%3C/g%3E%3C/svg%3E");
}

.fluent-emoji-flat--heart-suit {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23f8312f' d='M21.008 5.162c-2.84.509-5.011 3.905-5.011 3.905s-2.18-3.396-5.012-3.905c-7.012-1.25-9.903 4.993-8.732 9.64c1.73 6.863 10.053 13.014 12.834 14.916c.55.376 1.27.376 1.83 0c2.791-1.902 11.113-8.053 12.834-14.916c1.16-4.647-1.73-10.89-8.743-9.64'/%3E%3C/svg%3E");
}


.fluent-emoji-flat--laptop {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none'%3E%3Cpath fill='%23d3d3d3' d='m28 20l-12-1l-12 1l-1.98 8.891c-.11.766.975.609 1.48.609h25c.505 0 1.59.157 1.48-.609z'/%3E%3Cpath fill='%237167a4' d='M27 2H5c-.55 0-1 .45-1 1v16.99h24V3c0-.55-.45-1-1-1'/%3E%3Cpath fill='%2326c9fc' d='M5 18.74V3.25c0-.14.11-.25.25-.25h21.5c.14 0 .25.11.25.25v15.49c0 .14-.11.25-.25.25H5.25c-.14 0-.25-.11-.25-.25'/%3E%3Cpath fill='%239b9b9b' fill-rule='evenodd' d='m27.27 21.28l.72 3.25a.38.38 0 0 1-.37.46H4.38c-.24 0-.42-.23-.37-.46l.72-3.25c.04-.17.19-.29.37-.29h21.8c.18 0 .33.12.37.29M8.186 24.5H6.753l.125-.75H8.28zm1.938 0H8.69l.094-.75h1.404zm1.838 0h-1.336l.062-.75h1.306zm1.85 0h-1.35l.032-.75h1.35zm1.938 0h-1.437l.031-.75h1.406zm1.937 0H16.25v-.75h1.406zm1.85 0h-1.35l-.03-.75h1.349zm1.837 0h-1.336l-.032-.75h1.306zm1.937 0h-1.435l-.063-.75h1.404zm1.936 0h-1.433l-.093-.75h1.4zm1.753 0h-1.247l-.125-.75h1.247zm-.333-2l.125.75h-1.247l-.125-.75zm-.167-1l.083.5h-1.246l-.084-.5zm-3.06 0h1.307l.083.5h-1.328zm-1.814 0h1.31l.062.5h-1.33zm-1.713 0h1.211l.042.5h-1.233zm-1.85 0h1.35l.02.5h-1.35zm-1.813 0h1.312l.021.5H16.25zm-1.812 0h1.312v.5h-1.333zm-1.85 0h1.35l-.022.5h-1.35zm-1.712 0h1.211l-.02.5h-1.233zm-1.812 0h1.31l-.042.5h-1.33zm-1.81 0H8.56l-.063.5H7.17zm-1.754 0h1.247l-.084.5H5.417zm-.292 1.75l.125-.75H6.58l-.125.75zM5 24.5l.125-.75h1.247l-.125.75zm20.038-1.25l-.125-.75h-1.349l.094.75zm-1.884 0l-.093-.75h-1.352l.063.75zm-1.884 0l-.062-.75h-1.254l.032.75zm-1.785 0l-.031-.75h-1.35l.032.75zm-1.85 0l-.031-.75H16.25v.75zM7.087 22.5l-.125.75h1.38l.094-.75zm1.852 0l-.093.75h1.382l.063-.75zm1.854 0l-.063.75h1.284l.032-.75zm1.753 0l-.031.75h1.35l.03-.75zm1.85 0l-.031.75h1.385v-.75z' clip-rule='evenodd'/%3E%3Cpath fill='%239b9b9b' d='M29.09 29a.9.9 0 0 0 .8-.49l.09.38l.003.023A.913.913 0 0 1 29.09 30H2.91c-.5 0-.91-.41-.91-.91c0-.07.01-.13.03-.19l.08-.38c.15.28.45.48.8.48zm-18.27-1.01h10.36c.16 0 .28-.15.24-.31l-.38-1.5a.255.255 0 0 0-.24-.19h-9.6c-.11 0-.21.08-.24.19l-.38 1.5c-.04.16.08.31.24.31'/%3E%3C/g%3E%3C/svg%3E");
}

.fluent-emoji-flat--locked-with-pen {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none'%3E%3Cpath fill='%23f9c23c' d='M2 14a3 3 0 0 1 3-3h2l1.5-1l1 1h7l1.5-1l1 1h2a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3z'/%3E%3Cpath fill='%23433b6b' d='M14.5 20.5a2.5 2.5 0 1 0-3 0V24a1.5 1.5 0 0 0 3 0z'/%3E%3Cpath fill='%23d3d3d3' d='M13 2a6 6 0 0 0-6 6v3h2.5V8a3.5 3.5 0 1 1 7 0v3H19V8a6 6 0 0 0-6-6m7 20v-6h9v6c0 .5-.25 1-.25 1l-3.25 6s-.294.59-.656.863c.055-.053-.069-.286-.183-.501c-.083-.156-.161-.302-.161-.362c0 .058-.08.204-.165.36c-.116.211-.241.44-.19.493c-.357-.278-.645-.853-.645-.853l-3.25-6s-.25-.5-.25-1'/%3E%3Cpath fill='%2300a6ed' d='M19 15.25c0-.69.56-1.25 1.25-1.25h8.5a1.25 1.25 0 1 1 0 2.5h-8.5c-.69 0-1.25-.56-1.25-1.25'/%3E%3Cpath fill='%23636363' d='M25 22.915a1.5 1.5 0 1 0-1 0V29.5a.5.5 0 0 0 1 0z'/%3E%3C/g%3E%3C/svg%3E");
}

.fluent-emoji-flat--fork-and-knife-with-plate {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none'%3E%3Cpath fill='%23cdc4d6' d='M16.5 28C22.851 28 28 22.851 28 16.5S22.851 5 16.5 5S5 10.149 5 16.5S10.149 28 16.5 28'/%3E%3Cpath fill='%23e1d8ec' d='M16.5 24.5a8 8 0 1 0 0-16a8 8 0 0 0 0 16'/%3E%3Cpath fill='%23998ea4' d='M6.82 6.31a.68.68 0 0 0-.68.68v2.69c0 .2-.16.35-.35.35c-.2 0-.35-.16-.35-.35V7.02c0-.37-.29-.7-.66-.71c-.39-.01-.71.3-.71.68v2.69c0 .2-.16.35-.35.35c-.2 0-.35-.16-.35-.35V7.02c0-.37-.29-.7-.66-.71c-.39-.01-.71.3-.71.68v4.58c0 .902.437 1.707 1.109 2.209c.601.339.601 1.891.601 1.891v10.02c0 .52.42.94.94.94h.23c.52 0 .94-.42.94-.94V15.67s0-1.491.601-1.891A2.76 2.76 0 0 0 7.53 11.57V6.99a.72.72 0 0 0-.71-.68m21.54 0c.9 0 1.63.73 1.63 1.63V25.7c0 .52-.42.94-.94.94h-.23c-.52 0-.94-.42-.94-.94v-8.617a3.15 3.15 0 0 1-1.85-2.883V8.65a2.32 2.32 0 0 1 2.33-2.34'/%3E%3C/g%3E%3C/svg%3E");
}

.fluent-emoji-flat--e-mail {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none'%3E%3Crect width='30' height='22' x='1' y='5' fill='%23b4acbc' rx='1.5'/%3E%3Crect width='28' height='18' x='2' y='7' fill='%23cdc4d6' rx='1'/%3E%3Cpath fill='%23e1d8ec' d='m30 23.4l-12.971-7.782a2 2 0 0 0-2.058 0L2 23.4V25a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1z'/%3E%3Cpath fill='%23998ea4' d='M2 9.766V8h28v1.766L17.544 17.24a3 3 0 0 1-3.088 0z'/%3E%3Cpath fill='%23f3eef8' d='M2 8.6V7a1 1 0 0 1 1-1h26a1 1 0 0 1 1 1v1.6l-12.971 7.783a2 2 0 0 1-2.058 0z'/%3E%3Cpath fill='%2300a6ed' d='M16 23a7 7 0 1 0 0-14a7 7 0 0 0 0 14'/%3E%3Cpath fill='%23f4f4f4' d='M16 11.5c-1.21-.02-2.36.44-3.22 1.3c-.87.85-1.34 1.99-1.34 3.2c0 2.48 2.02 4.5 4.5 4.5a.47.47 0 1 0 0-.94c-1.96 0-3.56-1.6-3.56-3.56c0-.96.38-1.86 1.06-2.53s1.59-1.03 2.55-1.03c1.93.03 3.51 1.65 3.51 3.62v.81a.67.67 0 0 1-1.34 0v-3.08a.47.47 0 0 0-.47-.47c-.26 0-.49.21-.49.47v.09c-.44-.35-.99-.57-1.6-.57c-1.4 0-2.54 1.14-2.54 2.54s1.14 2.54 2.54 2.54c.7 0 1.34-.29 1.8-.75c.28.5.81.84 1.42.84c.89 0 1.62-.73 1.62-1.62v-.81c0-2.47-1.99-4.52-4.44-4.55m-.39 5.96c-.88 0-1.6-.72-1.6-1.6s.72-1.6 1.6-1.6s1.6.72 1.6 1.6s-.72 1.6-1.6 1.6'/%3E%3C/g%3E%3C/svg%3E");
}
.fa-brands--linkedin {
  display: inline-block;
  width: 40px;
  height: 40px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3M135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5c0 21.3-17.2 38.5-38.5 38.5m282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7c-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5c67.2 0 79.7 44.3 79.7 101.9z'/%3E%3C/svg%3E");
  background-color: var(--text);
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fa-brands--linkedin:hover {
              background: rgb(64, 160, 184);

}

.fa-brands--youtube-square {
  display: inline-block;
  width: 40px;
  height: 40px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='m186.8 202.1l95.2 54.1l-95.2 54.1zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48m-42 176.3s0-59.6-7.6-88.2c-4.2-15.8-16.5-28.2-32.2-32.4C337.9 128 224 128 224 128s-113.9 0-142.2 7.7c-15.7 4.2-28 16.6-32.2 32.4c-7.6 28.5-7.6 88.2-7.6 88.2s0 59.6 7.6 88.2c4.2 15.8 16.5 27.7 32.2 31.9C110.1 384 224 384 224 384s113.9 0 142.2-7.7c15.7-4.2 28-16.1 32.2-31.9c7.6-28.5 7.6-88.1 7.6-88.1'/%3E%3C/svg%3E");
  background-color: var(--text);
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.material-symbols--outgoing-mail-outline {
  display: inline-block;
  width: 50px;
  height: 50px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m18 20l-1.4-1.4l1.575-1.6H14v-2h4.175L16.6 13.4L18 12l4 4zM4 17q-.825 0-1.412-.587T2 15V5q0-.825.588-1.412T4 3h13q.825 0 1.413.588T19 5v5.1q-.25-.05-.5-.075T18 10t-.5.013t-.5.062V6.4L10.4 11L4 6.425V15h8.075q-.05.25-.062.5T12 16t.025.5t.075.5zM5.45 5l4.95 3.55L15.5 5zM4 15V5z'/%3E%3C/svg%3E");
  background-color: var(--paper-light);
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.cib--mastodon {
  display: inline-block;
  width: 40px;
  height: 40px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M30.921 10.505c0-6.943-4.547-8.975-4.547-8.975C24.082.473 20.145.03 16.051-.001h-.099C11.863.03 7.925.472 5.635 1.53c0 0-4.553 2.032-4.553 8.975c0 1.588-.031 3.489.021 5.505c.167 6.792 1.245 13.479 7.521 15.14c2.896.767 5.38.928 7.38.819c3.631-.204 5.667-1.297 5.667-1.297l-.12-2.636s-2.593.819-5.505.719c-2.885-.099-5.932-.307-6.396-3.853a7 7 0 0 1-.067-.995s2.832.692 6.427.859c2.192.099 4.249-.129 6.344-.38c4.005-.473 7.5-2.948 7.937-5.203c.687-3.552.629-8.677.629-8.677zm-5.364 8.948h-3.328v-8.161c0-1.719-.724-2.595-2.172-2.595c-1.599 0-2.401 1.037-2.401 3.084v4.469h-3.312v-4.469c0-2.047-.803-3.084-2.401-3.084c-1.448 0-2.172.876-2.172 2.595v8.156H6.443v-8.401Q6.442 8.469 7.76 6.954c.907-1.011 2.089-1.532 3.563-1.532c1.704 0 2.995.657 3.849 1.969L16 8.782l.828-1.391c.855-1.312 2.145-1.969 3.849-1.969c1.473 0 2.661.521 3.568 1.532q1.312 1.516 1.312 4.093z'/%3E%3C/svg%3E");
  background-color: var(--text);
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.cib--mastodon:hover {
              background: #6665fd;

}

.fa-brands--tiktok {
  display: inline-block;
  width: 40px;
  height: 40px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M448 209.91a210.06 210.06 0 0 1-122.77-39.25v178.72A162.55 162.55 0 1 1 185 188.31v89.89a74.62 74.62 0 1 0 52.23 71.18V0h88a121 121 0 0 0 1.86 22.17A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14Z'/%3E%3C/svg%3E");
   background-color: var(--paper-light);
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fa7-brands--x-twitter {
  display: inline-block;
 width: 40px;
  height: 40px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M357.2 48h70.6L273.6 224.2L455 464H313L201.7 318.6L74.5 464H3.8l164.9-188.5L-5.2 48h145.6l100.5 132.9zm-24.8 373.8h39.1L119.1 88h-42z'/%3E%3C/svg%3E");
  background-color: var(--paper-light);
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.cib--github {
  display: inline-block;
  width: 40px;
  height: 40px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M16 .396c-8.839 0-16 7.167-16 16c0 7.073 4.584 13.068 10.937 15.183c.803.151 1.093-.344 1.093-.772c0-.38-.009-1.385-.015-2.719c-4.453.964-5.391-2.151-5.391-2.151c-.729-1.844-1.781-2.339-1.781-2.339c-1.448-.989.115-.968.115-.968c1.604.109 2.448 1.645 2.448 1.645c1.427 2.448 3.744 1.74 4.661 1.328c.14-1.031.557-1.74 1.011-2.135c-3.552-.401-7.287-1.776-7.287-7.907c0-1.751.62-3.177 1.645-4.297c-.177-.401-.719-2.031.141-4.235c0 0 1.339-.427 4.4 1.641a15.4 15.4 0 0 1 4-.541c1.36.009 2.719.187 4 .541c3.043-2.068 4.381-1.641 4.381-1.641c.859 2.204.317 3.833.161 4.235c1.015 1.12 1.635 2.547 1.635 4.297c0 6.145-3.74 7.5-7.296 7.891c.556.479 1.077 1.464 1.077 2.959c0 2.14-.02 3.864-.02 4.385c0 .416.28.916 1.104.755c6.4-2.093 10.979-8.093 10.979-15.156c0-8.833-7.161-16-16-16z'/%3E%3C/svg%3E");
  background-color: var(--text);
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  
}

.cib--github:hover {
              background: #832b93;

}

/* Projects Page */


/* wrapper so grid doesn't overflow */
.project-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.project-box {
    position: relative;
    border: 2px solid var(--accent);
    border-radius: 7px 7px 0 0;
    text-align: left;
    margin: 1rem;
    padding-left: clamp(5rem, 2vw, 1rem);
    padding-top: clamp(1.5rem, 2vw, 1.5rem);
    padding-bottom: clamp(1.5rem, 2vw, 1.5rem);
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: bold;
    background: var(--paper);
    color: var();
    letter-spacing: 1px;
    box-sizing: border-box;
}

.project-cards-wrapper {
  display: grid;
  
  gap: 1.5rem;
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
}



.project-card {
width: 120%;
max-width: 100%;
height: 400px;
display: flex;
flex-direction: column;
border: 4px solid var(--accent);
border-radius: 20%;
text-decoration: none;
color: var(--text);
overflow: hidden;
box-shadow: 0 1em 1em 1em rgba(63, 236, 227, 0.301);
transition: all 0.3s ease;
border-radius: 1em;
font-size: 0.9rem;
padding: 0.75em;
border-width: 6px;


}

.project-card-image {
    height: 240px;  /* Explicit height */
    overflow: hidden;
    
}

/* IMAGE FIX – more consistent scaling */
.card-image img {
  width: 50%;
  height: 240px;
  object-fit: cover;
}

.project-card img {
    width: 300px;
    height: 250px;
    object-fit: fit;
    padding-bottom: 2rem;
}

.project-card-content {
flex: 0 0 40%; /* Take up 40% of card height */
background: var(--card-top);
padding: 1em;
overflow: auto;

}

.project-card.card-cover img {
  object-fit: cover; /* only this card */
}


.project-card:hover img{
    filter: brightness(1);
}



.project-card .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    margin-top: 0.5em;
    
}

.project-card .tags .tag {
    font-size: clamp(1rem, 1.2vw, 1em);
    background: var(--card-top);
    border-radius: 0.3rem;
    padding: 0.25em 0.5em;
    line-height: 1.5em;
    transition: all 0.3s ease;
    color: var(--text-fade);
    border: 1px solid var(--accent);
    display: none;
}

.project-card:hover .tags .tag {
    background: var(--accent);
    color: var(--ink);
}

.project-card .date {
  position: relative;
  top: 0;
  right: 0;
  font-size: 0.75em;
  padding: 1em;
  line-height: 1em;
  opacity: .8;
}



.project-card:before {
    content: '';
    transform: scale(0);
    transform-origin: top left;
    border-radius: 50%;
    position: absolute;
    left: -50%;
    top: -50%;
    z-index: 0;
    transition: all 0.3s ease-in-out;


}

.project-card:after {
    content: '';
    transform: scale(0);
    transform-origin: top left;
    border-radius: 50%;
    position: absolute;
    left: -50%;
    top: -50%;
    z-index: 1;
    transition: all 0.3s ease-in-out;
    background: rgba(255, 255, 255, 0.11);

}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(248, 221, 67, 0.4);
}

.project-card:hover:before, .card:hover:after {
transform: scale(1);
}

/* PROJECT CARD GRID SPACE */
/* CARD GRID SPACE */
.project-card-grid-space {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    text-align: center;
}



.info {
  font-size: 1.2em;
  display: flex;
  padding: 1em 3em;
  height: 3em;
}

.info img {
  height: 3em;
  margin-right: 0.5em;
}

.info h1 {
  font-size: 1em;
  font-weight: normal;
}



/* MEDIA QUERIES */
  @media (min-width: 600px) {
      .project-cards-wrapper {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  @media (min-width: 1000px) {
      .project-cards-wrapper {
          grid-template-columns: repeat(2, 1fr);
      }
  }

.project-card h1 {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1em);
    line-height: 1.2em;
    color: white;
}

.project-card p {
    margin-top: 1em;
    line-height: 1em;
    color: var(--text-fade);
}
    
    .project-card .tags .tag {
        font-size: 1em;
    }

@media screen and (max-width: 450px) {
    .project-cards-wrapper {
        padding: 1rem 0.5rem;
    }
    
    .project-card {
        border-width: 5px;
        padding: 0.5em;
    }
}
@media screen and (max-width: 1285px) {
  .project-cards-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 900px) {
  .project-cards-wrapper {
    grid-template-columns: 1fr;
  }
  .info {
    justify-content: center;
  }
  .project-card-grid-space .num {
    margin-left: 0;
    text-align: center;
  }
}

@media screen and (max-width: 500px) {
  .project-cards-wrapper {
    padding: 4rem 2rem;
  }
  .project-card {
    max-width: calc(100vw - 4rem);
  }
}

@media screen and (max-width: 450px) {
  .info {
    display: block;
    text-align: center;
  }
  .info h1 {
    margin: 0;
  }
}
/* EXTRA SMALL DEVICES - Below 450px */
@media screen and (max-width: 400px) {
  .project-wrapper {
    gap: 0.8rem;
  }

  .project-box {
    margin: 0.5rem;
    padding-left: clamp(1rem, 2vw, 1.5rem);
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  }

  .project-cards-wrapper {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0.75rem;
  }

  .project-card {
    width: 100%;
    min-height: 350px;
    border-width: 4px;
    padding: 0.5em;
    font-size: 0.85rem;
  }

  .project-card-image {
    height: 180px;
  }

  .card-image img {
    width: 100%;
    height: 180px;
  }

  .project-card img {
    width: 100%;
    height: 180px;
  }

  .project-card-content {
    min-height: 150px;
    padding: 0.75em;
  }

  .project-card h1 {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
  }

  .project-card p {
    font-size: clamp(0.65rem, 1.3vw, 0.8rem);
  }

  .info {
    padding: 0.75em 1.5em;
    height: auto;
    flex-direction: column;
  }

  .info img {
    height: 2.5em;
  }

  .project-card .date {
    padding: 0.75em;
    font-size: 0.7em;
  }

  .project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(248, 221, 67, 0.3);
  }
}

/* ULTRA SMALL DEVICES - Below 350px */
@media screen and (max-width: 350px) {
  .project-wrapper {
    gap: 0.6rem;
  }

  .project-box {
    margin: 0.25rem;
    padding-left: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    letter-spacing: 0.5px;
  }

  .project-cards-wrapper {
    gap: 0.75rem;
    padding: 0.5rem;
  }

  .project-card {
    width: 100%;
    min-height: 320px;
    border-width: 3px;
    padding: 0.4em;
    font-size: 0.8rem;
    border-radius: 0.8em;
  }

  .project-card-image {
    height: 160px;
  }

  .card-image img,
  .project-card img {
    height: 160px;
  }

  .project-card-content {
    min-height: 120px;
    padding: 0.6em;
  }

  .project-card h1 {
    font-size: clamp(0.8rem, 1.8vw, 1rem);
    line-height: 1.1em;
  }

  .project-card p {
    font-size: clamp(0.6rem, 1.2vw, 0.75rem);
    margin-top: 0.3em;
  }

  .project-card .tags .tag {
    font-size: 0.85em;
    padding: 0.2em 0.4em;
  }

  .info {
    padding: 0.5em 1em;
    gap: 0.5em;
  }

  .info img {
    height: 2em;
    margin-right: 0.3em;
  }

  .info h1 {
    font-size: 0.9em;
  }

  .project-card .date {
    padding: 0.5em;
    font-size: 0.65em;
  }

  .project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(248, 221, 67, 0.2);
  }
}

/* MINIMAL DEVICES - Below 300px (Edge case) */
@media screen and (max-width: 300px) {
  .project-wrapper {
    gap: 0.5rem;
  }

  .project-box {
    margin: 0;
    padding: 0.5rem;
    font-size: clamp(0.8rem, 1.2vw, 0.95rem);
    border-radius: 5px 5px 0 0;
  }

  .project-cards-wrapper {
    gap: 0.5rem;
    padding: 0.25rem;
  }

  .project-card {
    min-height: 300px;
    border-width: 2px;
    padding: 0.3em;
    font-size: 0.75rem;
  }

  .project-card-image {
    height: 140px;
  }

  .card-image img,
  .project-card img {
    height: 140px;
  }

  .project-card-content {
    min-height: 100px;
    padding: 0.5em;
  }

  .project-card h1 {
    font-size: clamp(0.75rem, 1.5vw, 0.95rem);
    margin: 0.25em 0;
  }

  .project-card p {
    font-size: 0.7rem;
    margin-top: 0.2em;
  }

  .info {
    padding: 0.4em 0.8em;
  }

  .info img {
    height: 1.8em;
  }
}

/*=======jekyll-blog front page================*/
/* Blog index page cards */
.blog-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
  padding: 0;
  
}

.blog-card {
  position: relative;
  border: 2px solid var(--accent);
  border-radius: 7px;
  background: var(--ink);
  padding: 1.5rem 1.5rem 1.5rem 5rem; /* space for vertical tag */
  box-sizing: border-box;
  overflow: hidden;
  min-height: 200px;
  
}

.blog-card::before {
  content: attr(data-tag); /* ← dynamic tag text */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 2rem;
  writing-mode: vertical-rl;
  text-orientation: upright;
  background-color: var(--tags);
  color: var(--tag-text);
  padding: 0.5rem 0;
  font-size: 0.7rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 1;
}

.blog-card-content h3 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-size: 1.2rem;
}

.blog-card-content .post-meta {
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 0.5rem;
  width: 50%;

}

.blog-card-content p {
  margin: 0;
  line-height: 1.4;
}




/* link-love cards*/ 
.link-love-card {
    position: relative;
    min-height: 250px;
    border: 2px solid var(--accent);
    border-radius: 7px;
    text-align: left;
    padding: clamp(1.5rem, 2vw, 1.5rem);
    padding-left: clamp(5rem, 2vw, 1rem); /* space for vertical tag */
    font-size: clamp(1rem, 2vw, 1rem);
    font-weight: bold;
    background-color: var(--ink);
    color: var(--text-color);
    letter-spacing: 1px;
    box-sizing: border-box;
}

/* link-love card vertical tag */
.link-love-card::before {
    content: attr(data-tag);   /* reads the post-specific tag */
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 4rem;
    writing-mode: vertical-rl;
    text-orientation: upright;
    background-color: var(--tags);
    color: var(--tag-text);
    padding: 0.5rem 0;
    font-size: 1.3rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;  /* keeps the vertical tag centered */
    box-sizing: border-box;
    z-index: 1;
}

.link-love-card-content h3 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-size: 1.2rem;
}

.link-love-card-content .post-meta {
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 0.5rem;

}

.link-love-card-content p {
  margin: 0;
  line-height: 1.4;
}



/*===================================*/

/* Blog list cards (project-box) improved style */
.project-box {
    background: var(--content-bg, #1c1c1c);
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
    margin-bottom: 1.2rem;

    /* prevents overflowing */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* content area can't push outside the page */
.content {
    flex: 1;
    max-width: 100%;
    overflow-x: hidden;
}

/*Button Collection*/

.container-button-collection {
   margin-top: 5px;
    padding: 20px 20px 20px 20px;
    border: 2px solid var(--bg-primary)
}

.href {
    color: red;
}

/*Disclaimer page*/

/* TAB NAVIGATION */
.nav-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--card-bg);
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    font-weight: 600;
    color: var(--text-fade);
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
    margin-bottom: -2px;
    font-family: 'chirp-medium';
}

.tab-btn:hover {
    color: var(--text);
}

.tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.content-section {
    display: none;
    animation: fadeIn 0.3s ease-in;
}

.content-section.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* COOKIE CONTROLS */
.cookie-section {
    background: var(--code);
    padding: 1.5rem;
    border-radius: 4px;
    border-left: 4px solid var(--accent);
    margin: 2rem 0;
}

.cookie-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

@media (min-width: 600px) {
    .cookie-controls {
        grid-template-columns: 1fr 1fr;
    }
}

.cookie-item {
    background: var(--paper-light);
    padding: 1rem;
    border-radius: 4px;
    border: 1px solid var(--card-bg);
}

.cookie-item label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cookie-item input[type="checkbox"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.cookie-item p {
    margin: 0 0 0 28px;
    font-size: 0.85rem;
    color: var(--text-fade);
}

.button-group {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

button.primary, button.secondary {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background 0.3s;
    font-family: 'chirp-medium';
}

button.primary {
    background: var(--accent);
    color: var(--ink);
}

button.primary:hover {
    background: var(--highlight);
}

button.secondary {
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--accent);
}

button.secondary:hover {
    background: var(--code);
}

.status-message {
    padding: 1rem;
    border-radius: 4px;
    margin-top: 1rem;
    display: none;
    font-size: 0.95rem;
}

.status-message.success {
    background: rgba(52, 211, 153, 0.2);
    color: #34d399;
    border: 1px solid #34d399;
    display: block;
}

.last-updated {
    color: var(--text-fade);
    font-size: 0.85rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--card-bg);
}

/*Footer!!*/
/* FOOTER */
footer {
    background: var(--ink);
    border-top: 2px solid var(--accent);
    padding: clamp(20px, 3vw, 30px);
    text-align: center;
    margin-top: 60px;
    color: var(--text-fade);
    font-size: 0.9rem;
}

footer a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.25s;
}

footer a:hover {
    color: var(--highlight);
}

footer p {
    margin: 10px 0;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 15px 0;
    font-size: 0.85rem;
    text-decoration: none;
}

.footer-links a {
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}
/*End Footer!*/
/*End Disclaimer Page*/



        /* Make the whole sidebar stay on screen after 50px */
.sidebar.left {
    position: relative;
}

.sidebar.left.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;  /* adjust this to your sidebar’s actual width */
    height: 100vh;
    overflow-y: auto;
    background: var(--paper);
    z-index: 9999;
    padding-right: 10px; /* prevents layout jump */
}

/*Back To Top*/
.back-to-top-container {
  position: fixed;
  bottom: 60px;
  right: 40px;
  width: 60px;
  height: 60px;
  z-index: 1000;
}

#backToTop {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 50%;
  background-image: url(/assets/icons/back-to-top-cyber.png);
  background-size: contain;
  background-color: transparent;
  cursor: pointer;
  transition: transform 0.3s ease;
}

#backToTop:hover {
  transform: scale(1.2);
}

.back-to-top-overlay-text {
  position: absolute;
  top: 25px; /* above the button */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 2px 6px;
  font-size: 0.8rem;
  opacity: 0;              /* hide by default */
  pointer-events: none;    /* don't block button clicks */
  transition: opacity 0.3s ease, top 0.3s ease;
}

.back-to-top-container:hover .back-to-top-overlay-text {
  opacity: 1;
  top: -35px; /* move up when visible */
}

/* Tablet and smaller (below 768px) */
@media (max-width: 767px) {
  .back-to-top-container {
    width: 50px;
    height: 50px;
    bottom: 40px;
    right: 30px;
  }

  .back-to-top-overlay-text {
    font-size: 0.7rem;
    padding: 2px 5px;
  }

  .back-to-top-container:hover .back-to-top-overlay-text {
    top: -30px; /* adjust for smaller button */
  }
}

/* Mobile (below 480px) */
@media (max-width: 479px) {
  .back-to-top-container {
    width: 45px;
    height: 45px;
    bottom: 20px;
    right: 20px;
  }

  #backToTop:hover {
    transform: scale(1.1); /* less aggressive scaling on small screens */
  }

  .back-to-top-overlay-text {
    display: none; /* hide text on very small screens to save space */
  }
}

/* Very small mobile (below 360px) */
@media (max-width: 359px) {
  .back-to-top-container {
    width: 40px;
    height: 40px;
    bottom: 15px;
    right: 15px;
  }
}


/*STEPS SECTIONS WITH MARGINS AND PADDING - this is for adding space for the headings without div*/

    .section-block {
        margin: 3rem 0;
        padding: 1rem 0;
    }
    .section-block h2,
    .section-block h3,
    .section-block ol,
    .section-block ul,
    .section-block p,
    .section-block div {
        margin: 1rem 0;
        padding: .5rem 0;
    }


    /* PSP Slideshow */
    /*==============*/
.PSP-slideshow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* two columns on large screens */
  gap: 1rem; /* space between slides */
  margin: 2rem auto;
  max-width: 900px; /* adjust overall width */
  position: relative; /* keep arrows relative if needed */
}

/* Individual slides */
.PSP-slide {
  display: none;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease;
  height: 180px; /* uniform height for small boxes */
  position: relative;
}

.PSP-slide.active {
  display: block;
}

.PSP-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill the slide nicely */
  border-radius: 8px;
}

.PSP-slide:hover {
  transform: scale(1.05);
}

/* Slideshow navigation arrows */
.PSP-prev,
.PSP-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 2rem;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}

.PSP-prev { left: -20px; }
.PSP-next { right: -20px; }

/* Lightbox overlay */
.PSP-lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.95);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Fullscreen image */
.PSP-lightbox-img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 8px;
}

/* Close button */
.PSP-lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10000;
}

/* Lightbox arrows */
.PSP-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: #fff;
  cursor: pointer;
  user-select: none;
  padding: 0 1rem;
  z-index: 10000;
}

.PSP-lightbox-arrow.left { left: 20px; }
.PSP-lightbox-arrow.right { right: 20px; }

/* Optional caption */
.PSP-lightbox-caption {
  color: #fff;
  font-size: 1rem;
  margin-top: 1rem;
  text-align: center;
}


/*End slide show PSP*/


/* 404 Page Fullscreen Layout */

/* Wrapper */
.f404-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: none;
  justify-content: center;
}

/* Background image */
.f404-bg {
  position: absolute;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;       /* fill width */
  height: auto;      /* maintain aspect ratio */
  max-height: 100vh; /* don’t exceed viewport height */
  object-fit: fill;
  z-index: 1;
}

/* Dark overlay to make text readable */
.f404-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 2;
}

/* Text overlay */
.f404-text {
  position: fixed;
  top: 15%;
  left: 5rem;
  z-index: 5;
  color: #ffffff !important; /* override any site CSS */
  max-width: 500px;
}

.f404-text h3 {
  margin: 0 0 0.4em 0;
  font-size: 4rem;
}

.f404-text p {
  margin: 0.2em 0;
  font-size: 1.2rem;
}

/* Header on top of image */
.f404-wrapper .page-header-top {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 6;
}

/* Sidebar on top of image */
.f404-wrapper .sidebar {
  position: absolute !important;
  top: 100px;  /* adjust to avoid header overlap */
  right: 20px;
  z-index: 6;
  display: flex !important;
}

/* Footer on top of image */
.f404-wrapper footer {
  position: absolute !important;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 6;
  background: rgba(0,0,0,0.5); /* optional for readability */
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .f404-text {
    top: 1rem;
    left: 1rem;
    max-width: 90%;
  }

  .f404-text h3 {
    font-size: 2.5rem;
  }

  .f404-text p {
    font-size: 1rem;
  }

  .f404-wrapper .sidebar {
    top: auto;
    bottom: 60px;
    right: 10px;
  }
}

.f404-btn {
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background: #ff007f;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.f404-btn:hover {
  background: #ff33aa;
}

.heading-with-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 3rem;
}

.heading-with-icon img {
  height: 6em;
  width: auto;
  
}

.psp-header-icon {
  display: flex; 
  justify-content: center;
}


/*Spark Button w/ animation*/
.voltage-button {
 white-space: nowrap;
 position: relative;
justify-content: center;
}

.voltage-button button {
  color: white;
  background: #123a31;
  margin: 0rem 1rem 1rem 1rem;
  padding: 1rem 4rem;
  border-radius: 5rem;
  border: 5px solid #8ad4a5;
  font-size: 1rem;
  line-height: 1em;
  width: 200px;
  transition: background 0.3s;
  text-decoration: none;
  font-family: var(--main-font);
  display: flex;
  justify-content: center;
}

.voltage-button button:hover {
  cursor: pointer;
  background-image: url(/assets/gif/linux-toy-cmatrix-animated.gif);
  background-repeat: none;
  background-size: fill;
   margin: 0rem 1rem 1rem 1rem;
   padding: 1rem 4rem;
   font-size: 1.2rem;
 
}

.voltage-button button:hover + svg, .voltage-button button:hover + svg + .dots {
  opacity: 1;
}

.voltage-button svg {
  display: block;
  position: absolute;
  top: -1.3em;
  left: -0.25em;
  width: calc(100% + 0.5em);
  height: calc(100% + 1.5em);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  transition-delay: 0.1s;
}

.voltage-button svg path {
  stroke-dasharray: 100;
  filter: url("#glow");
}

.voltage-button svg path.line-1 {
  stroke: #f6de8d;
  stroke-dashoffset: 0;
  animation: spark-1 3s linear infinite;
}

.voltage-button svg path.line-2 {
  stroke: #6bfeff;
  stroke-dashoffset: 500;
  animation: spark-2 3s linear infinite;
}

.voltage-button .dots {
  opacity: 0;
  transition: opacity 0.3s;
  transition-delay: 0.4s;
}

.voltage-button .dots .dot {
  width: 1rem;
  height: 1rem;
  background: white;
  border-radius: 100%;
  position: absolute;
  opacity: 0;
}

.voltage-button .dots .dot-1 {
  top: 0;
  left: 20%;
  animation: fly-up 3s linear infinite;
}

.voltage-button .dots .dot-2 {
  top: 0;
  left: 55%;
  animation: fly-up 3s linear infinite;
  animation-delay: 0.5s;
}

.voltage-button .dots .dot-3 {
  top: 0;
  left: 80%;
  animation: fly-up 3s linear infinite;
  animation-delay: 1s;
}

.voltage-button .dots .dot-4 {
  bottom: 0;
  left: 30%;
  animation: fly-down 3s linear infinite;
  animation-delay: 2.5s;
}

.voltage-button .dots .dot-5 {
  bottom: 0;
  left: 65%;
  animation: fly-down 3s linear infinite;
  animation-delay: 1.5s;
}

@keyframes spark-1 {
  to {
    stroke-dashoffset: -1000;
  }
}

@keyframes spark-2 {
  to {
    stroke-dashoffset: -500;
  }
}

@keyframes fly-up {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.2);
  }

  5% {
    opacity: 1;
    transform: translateY(-1.5rem) scale(0.4);
  }

  10%, 100% {
    opacity: 0;
    transform: translateY(-3rem) scale(0.2);
  }
}

@keyframes fly-down {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.2);
  }

  5% {
    opacity: 1;
    transform: translateY(1.5rem) scale(0.4);
  }

  10%, 100% {
    opacity: 0;
    transform: translateY(3rem) scale(0.2);
  }
}

/*spark button end*/

/*Language BUTTONS*/
.lang-switcher {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 15px;
}

.lang-btn {
  background: #123a31;
  color: #fff;
  border: 1px solid #444;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--main-font);
  font-size: 0.9rem;
  transition: 0.25s ease;
}

.lang-btn:hover {
  background: #123a31;
  color: #ffffff;
  border-color: #8ad4a5;
  font-weight: bold;
}

.lang-btn.active-lang {
  background: #8ad4a5;  /* Highlight background */
  color: #123a31;       /* Highlight text */
  font-weight: bold;    /* Bold text for active */
  border-color: #8ad4a5; 
}

/* button back,forward whatever*/
.button-back {
  background-color: initial;
  background-image: linear-gradient(-180deg, #123a31, #17502a);
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Inter,-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  height: 40px;
  line-height: 40px;
  outline: 0;
  overflow: hidden;
  padding: 0 20px;
  pointer-events: auto;
  position: fixed
  text-align: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: top;
  white-space: nowrap;
  z-index: 9;
  border: 0;
  transition: box-shadow .2s;
}

.button-back:hover {
  box-shadow: rgba(233, 211, 84, 0.5) 0 3px 8px;
}

.back-button-article {
  margin: 2rem;
  margin-left: 0;
}

/*Next Button or tosnother page*/
.button-next {
  background-color: initial;
  background-image: linear-gradient(-180deg, #123a31, #17502a);
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Inter,-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  height: 40px;
  line-height: 40px;
  outline: 0;
  overflow: hidden;
  padding: 0 20px;
  pointer-events: auto;
  position: absolute;
  text-align: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: top;
  white-space: nowrap;
  z-index: 9;
  border: 0;
  transition: box-shadow .2s;
  bottom: 20px;
  right: 0px;
  
}

.next-back:hover {
  box-shadow: rgba(233, 211, 84, 0.5) 0 3px 8px;
}

.button-container {
  position: relative; 
  margin-top: 3rem;
  margin-bottom: 0;
  padding: 30px;
  width: 700px;
  
}