/* Palette */
:root{
  --gb-bg:#282828; --gb-bgh:#1d2021; --gb-bg1:#3c3836; --gb-bg2:#504945; --gb-bg3:#665c54; --gb-bg4:#7c6f64;
  --gb-fg4:#a89984; --gb-fg3:#bdae93; --gb-fg2:#d5c4a1; --gb-fg1:#ebdbb2; --gb-fg0:#fbf1c7;
  --gb-red:#cc241d; --gb-green:#98971a; --gb-yellow:#d79921; --gb-yellow2:#fabd2f; --gb-blue:#458588;
  --gb-purple:#b16286; --gb-aqua:#689d6a; --gb-orange:#d65d0e;

  /* Layout tokens (kept from your original so print layout stays identical) */
  --page-margin:1cm;
  --content-margin:0.8em;
  --content-margin-2:.5em;

  /* Role mapping */
  --accent-color:var(--gb-yellow2);
  --primary-color:var(--gb-fg0);
  --primary-color-light:var(--gb-fg3);
  --divider-color:var(--gb-bg4);
}

html, body{
  background:var(--gb-bgh);
  color:var(--primary-color);
  margin:0;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  -webkit-print-color-adjust:exact;
          print-color-adjust:exact;
}

/* PAGE CANVAS (A4, fixed) */
page{
  background:var(--gb-bgh);
  color:var(--primary-color);
  display:block;
  margin:0 auto .5cm auto;
  box-shadow:0 0 .5cm rgba(0,0,0,.5);
  overflow:hidden;
}
page[size="A4"]{ width:21cm; height:29.7cm; }

/* HEADER */
.header{
  /* background:linear-gradient(90deg,var(--gb-bg1) 55%,var(--gb-orange) 140%); */
  background:var(--gb-bg1);
  padding:.7rem 0 .5rem 0;
}

/* Small attention bar */
.notice-bar{
  width:100%;
  text-align:center;
  background:linear-gradient(90deg,var(--gb-yellow2),var(--gb-orange));
  color:var(--gb-bg);
  font-weight:700;
  font-size:.75em;
  letter-spacing:.03em;
  padding:.3em 0;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  position:relative;
  overflow:hidden;
  transition:background-color .6s ease,color .6s ease;
  cursor:pointer;
}

.notice-bar::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-120%);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.35) 45%,rgba(255,255,255,.7) 55%,rgba(255,255,255,0) 100%);
  opacity:0;
  pointer-events:none;
  z-index:0;
}

.notice-bar.is-swooshing::after{
  animation:noticeBarSwoosh 1.6s ease-out forwards;
}

.notice-bar__text{
  position:relative;
  z-index:1;
  display:inline-block;
}

.notice-bar--contact{
  background:linear-gradient(90deg,var(--gb-blue),var(--gb-purple));
  color:var(--gb-fg0);
  cursor:auto;
}

.notice-bar__mailto{
  color:inherit;
  font-weight:700;
  text-decoration:underline;
}

.notice-bar__mailto:hover,
.notice-bar__mailto:focus{
  color:var(--gb-yellow2);
}

.header-fill{
  /* background:var(--accent-color); */
  width:100%;
  height:1cm;

  display:flex;
  align-items:center;
  justify-content:center;
}
.header-icons{
  display:flex;
  align-items:center;
  gap:.5cm; /* spacing between icons */
}
.header-icons i{
  font-size:.8cm;   /* fit inside 1cm bar */
  line-height:1;
  -webkit-print-color-adjust:exact;
          print-color-adjust:exact;
}

.header-icons img{ width:.8cm; height:.8cm; }

.header-icons i:not(.colored){ color:var(--gb-blue); }

.devicon-dance-ready{
  display:inline-block;
  cursor:pointer;
  transform-origin:center;
  --dance-duration:.8s;
  --dance-iteration-count:1;
  --dance-delay:0s;
}

.devicon-dance-ready.is-dancing{
  animation-name:deviconDance;
  animation-duration:var(--dance-duration);
  animation-timing-function:ease-in-out;
  animation-iteration-count:var(--dance-iteration-count);
  animation-delay:var(--dance-delay);
}

.devicon-dance-ready.is-looping{
  --dance-duration:.95s;
  --dance-iteration-count:infinite;
}

/* Accessibility helper (screen-reader only) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.page-margin{ margin-left:var(--page-margin); margin-right:var(--page-margin); }
.center{ display:flex; flex-direction:column; align-items:center; }
.name{
  font-size:1em; letter-spacing:.15em; color:var(--accent-color); text-align:center;
  /* text-shadow:0 1px 4px #0003; */
}
.subtitle{ font-size:1em; color:var(--primary-color-light); }
.h-line{ width:100%; height:.2em; margin-top:.5em; background:var(--divider-color); }
.contact-inline{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.35em;
  margin-top:.35em;
  color:var(--primary-color);
}
.contact-inline a{ color:var(--accent-color); }
.contact-inline .separator{ opacity:.35; }

/* GRID */
.container{ display:flex; flex-direction:column; height:100%; }
.content{
  display:flex;
  flex-direction:column;
  flex:1;
  margin-bottom:var(--page-margin);
  /* gap:var(--content-margin); */
}
.single-column{ }
.left-column{ display:flex; flex-direction:column; flex:1; margin-right:var(--content-margin); overflow:hidden; }
.right-column{
  display:flex; flex-direction:column; flex:3; padding-left:var(--content-margin);
  border-left:.1em solid var(--divider-color); overflow:hidden;
}

/* TYPO */
.text{ font-size:.75em; text-align:justify; text-justify:inter-word; color:var(--primary-color); }
b{ font-weight:600; }
a{ color:var(--accent-color); text-decoration:underline; }
a:hover{ color:var(--gb-orange); }
.icon{ font-size:1.5em !important; color:var(--gb-blue); opacity:.9; }
.experience-icon{ font-size:.75em !important; color:var(--accent-color); }

/* SECTION */
.section{ display:flex; flex-direction:column; margin-top:var(--content-margin); break-inside:avoid; page-break-inside:avoid; }
.section-title{
  font-size:1.5em; color:var(--primary-color-light);
  border-bottom:.05em solid var(--divider-color);
}
.section-body{
  margin-top:var(--content-margin);
  line-height:1.6;
}
.skill-inline{ margin-top:.35em; }
.bullet-list{
  margin:var(--content-margin) 0 0 0;
  padding-left:1.1em;
}
.bullet-list li{
  margin-top:.35em;
  color:var(--gb-fg0);
  line-height:1.55;
}

/* TAGS / HIGHLIGHTS */
.highlight{
  /* background:var(--gb-bg2);  */
  color:var(--gb-yellow2); 
  padding:0 .25em; 
  border-radius:.2em;
}
.exp-tags{ margin-top:.35em; }
.exp-tag{
  display:inline-block; background:var(--gb-bg1); color:var(--primary-color);
  padding:.12em .55em; border-radius:.3em; font-size:.9em; margin:.08em .14em .08em 0; font-weight:500;
}
.exp-tag.red{color:var(--gb-red);} .exp-tag.orange{color:var(--gb-orange);} .exp-tag.yellow{color:var(--gb-yellow2);}
.exp-tag.green{color:var(--gb-green);} .exp-tag.blue{color:var(--gb-blue);} .exp-tag.purple{color:var(--gb-purple);}
.exp-tag.aqua{color:var(--gb-aqua);} .exp-tag.fg{color:var(--primary-color);}

/* EXPERIENCE CARDS */
.experience-elm{
  margin-top:var(--content-margin);
  /* padding:1.05rem 1.1rem .95rem 1.15rem; */
  padding-left: 0.5em;
  /* background:var(--gb-bg); */
  border-left:6px solid transparent;
  border-image:linear-gradient(to bottom,var(--gb-orange) 0%,var(--gb-yellow2) 35%,var(--gb-green) 70%,var(--gb-blue) 100%) 1 100%;
  /* border-image:linear-gradient(to bottom, var(--gb-orange)) 1; */
  break-inside:avoid; page-break-inside:avoid;
}
.experience-title{ font-size:1.25em; font-weight:600; color:var(--gb-orange); display:flex; align-items:center; gap:.3em; }
.experience-title a{ color:var(--gb-red); }
.experience-title a:hover{ color:var(--gb-blue); }
.experience-subtitle{ color:var(--gb-blue); margin-top:var(--content-margin-2); font-weight:600; letter-spacing:.02em; }
.experience-description{ color:var(--gb-fg0); margin-top:var(--content-margin-2); line-height:1.55;
     /* text-shadow:0 1px 4px #0002;  */
    }

/* LIST BLOCKS */
.contact-elm{ display:flex; align-items:center; margin-top:var(--content-margin); }
.education-elm{ display:flex; flex-direction:column; margin-top:var(--content-margin); }
.skill-list-elm{ margin-top:var(--content-margin); color:var(--gb-green); }

.material-icons.icon {
    margin-right: 0.5em;
}

.fireworks-container{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:999;
}

.firework{
  position:absolute;
  top:50%;
  left:50%;
  width:1.2rem;
  height:1.2rem;
  border-radius:50%;
  opacity:0;
  background:var(--firework-color,var(--gb-yellow2));
  box-shadow:0 0 1.6rem rgba(255,255,255,.55);
  transform:translate(-50%,-50%) scale(.2);
  mix-blend-mode:screen;
  animation:fireworkBurst 1.8s cubic-bezier(.18,.64,.34,1.4) forwards;
  animation-delay:var(--firework-delay,0s);
}

.firework:nth-child(odd){
  width:1.6rem;
  height:1.6rem;
}

.devicon-bubble{
  --bubble-bg:rgba(40,40,40,.94);
  --bubble-border:rgba(214,93,14,.45);
  position:fixed;
  max-width:18rem;
  padding:.55rem .85rem;
  border-radius:.65rem;
  background:var(--bubble-bg);
  border:1px solid var(--bubble-border);
  color:var(--gb-fg0);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.35;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
  z-index:1200;
}

.devicon-bubble__image{
  display:block;
  width:100%;
  max-width:100%;
  border-radius:.55rem;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}

.devicon-bubble__text{
  margin-top:.55rem;
  display:block;
}

.devicon-bubble--no-text .devicon-bubble__image{
  margin-bottom:0;
}

.devicon-bubble--no-image .devicon-bubble__text{
  margin-top:0;
}

.devicon-bubble::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-11px;
  transform:translateX(-50%);
  border:9px solid transparent;
  border-top-color:var(--bubble-bg);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.4));
}

.devicon-bubble.devicon-bubble--below::after{
  bottom:auto;
  top:-11px;
  border-top-color:transparent;
  border-bottom-color:var(--bubble-bg);
  filter:drop-shadow(0 -3px 4px rgba(0,0,0,.35));
}

.devicon-bubble--hidden{
  opacity:0;
  transform:translateY(10px) scale(.94);
}

.devicon-bubble--hide{
  opacity:0;
  transform:translateY(-6px) scale(.96);
}

/* PRINT: keep exact sizing and colors; hide mobile-only page to avoid duplication */
@page{ size:A4; margin:0; }
@media print{
  html,body{ background:transparent !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  body,page{ margin:0 !important; box-shadow:none !important; }
  page[size="A4"]{ width:21cm !important; height:29.7cm !important; }
  .section,.experience-elm,.education-elm{ break-inside:avoid; page-break-inside:avoid; }
}

@keyframes noticeBarSwoosh{
  0%{ transform:translateX(-120%); opacity:0; }
  20%{ opacity:1; }
  60%{ transform:translateX(0); opacity:1; }
  100%{ transform:translateX(120%); opacity:0; }
}

@keyframes fireworkBurst{
  0%{ transform:translate(-50%,-50%) scale(.15); opacity:0; }
  20%{ opacity:1; }
  55%{ transform:translate(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px))) scale(1.65); opacity:1; }
  100%{ transform:translate(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px))) scale(.8); opacity:0; }
}

@keyframes deviconDance{
  0%{ transform:translateY(0) rotate(0deg) scale(1); }
  15%{ transform:translateY(-4px) rotate(-12deg) scale(1.1); }
  30%{ transform:translateY(4px) rotate(12deg) scale(1.1); }
  45%{ transform:translateY(-3px) rotate(-10deg) scale(1.08); }
  60%{ transform:translateY(3px) rotate(10deg) scale(1.06); }
  75%{ transform:translateY(-2px) rotate(-6deg) scale(1.03); }
  90%{ transform:translateY(2px) rotate(6deg) scale(1.01); }
  100%{ transform:translateY(0) rotate(0deg) scale(1); }
}