:root {
  --header-height: 80px;
}

/* Bulletin‑board wrapper */
#experience {
  /* 1. Include padding & border within the element’s width */
  box-sizing: border-box;

  /* 2. Never exceed 95% of the viewport */
  width: min(95vw, 100%);
  max-width: clamp(320px, 95vw, 900px);  /* or whatever your ideal “desktop” max is */

  /* 3. Center it with some vertical breathing room */
  margin: 1rem auto 1rem;

  /* 4. Give it padding similar to your CRT frame for consistency */
  padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px) clamp(15px, 3vw, 30px);

  /* your existing properties below… */
  background: radial-gradient(
    circle at center,
    #312a2a 0%,
    #000000 70%,
    #0f0e11 100%
  );
  border: 25px solid;
  border-color: #474747 #888 #474747 #888;
  border-radius: 12px;
  box-shadow:
    inset 0 0 10px rgba(0,0,0,0.32),
    inset -2px -2px 5px rgba(0,0,0,0.4),
    0 0 0 2px #211c1d,
    0 0 0 13px #383838,
    0 0px 26px rgb(28, 31, 27);
  background-clip: padding-box;
  z-index: 2;
}



/* Section title sits "on" the board */
#experience h2 {
  position: relative;
  font-family: 'Comic Sans MS';
  letter-spacing: 0.15em;
  font-size: 4rem;
  color: #ddfff7;
  text-align: center;
  margin-bottom: 18px;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

/* Note‑grid styling */
#experience-container {
  font-family: 'Inter', sans-serif;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 0;
}

/* Sticky‑note styling — pastel gradient variants with matching shading */
.experience-bubble {
  position: relative;
  border-radius: 0.05rem;
  width: 200px;
  aspect-ratio: 1 / 1;
  padding-top: 2.5rem;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.25rem;
  overflow-y: auto;
  transform: rotate(var(--rotate, 0deg));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 2;
  background: var(--note-bg);
  .experience-bubble {
  overscroll-behavior: none;
}

}

#experience-container .experience-bubble:nth-child(7n+1) {
  --note-bg: linear-gradient(#836020, #ae873d, #ae873d, #ae873d, #a27c35);
  --rotate: -2deg;
}
#experience-container .experience-bubble:nth-child(7n+2) {
  --note-bg: linear-gradient(#9d5c6c, #c28897, #c28897, #c28897, #a86b7c);
  --rotate: 1.5deg;
}
#experience-container .experience-bubble:nth-child(7n+3) {
  --note-bg: linear-gradient(#4c6b70, #6c8f95, #6c8f95, #6c8f95, #54797e);
  --rotate: -1deg;
}
#experience-container .experience-bubble:nth-child(7n+4) {
  --note-bg: linear-gradient(#5c5a83, #8885b0, #8885b0, #8885b0, #706e98);
  --rotate: 2deg;
}
#experience-container .experience-bubble:nth-child(7n+5) {
  --note-bg: linear-gradient(#775e83, #a37fa7, #a37fa7, #a37fa7, #8d6c91);
  --rotate: -1deg;
}
#experience-container .experience-bubble:nth-child(7n+6) {
  --note-bg: linear-gradient(#6c7b43, #8c9d60, #8c9d60, #8c9d60, #798a4e);
  --rotate: 1deg;
}
#experience-container .experience-bubble:nth-child(7n) {
  --note-bg: linear-gradient(#7f6243, #a98360, #a98360, #a98360, #936e4f);
  --rotate: -2deg;
}

.experience-bubble::before {
  content: "";
  position: absolute;
  top: 0.05rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.25rem;
  height: 2.25rem;
  display: block;
  background: url('../assets/images/pin.png') no-repeat center/contain;
  z-index: 3;
}

/* Hover — lift the note */
.experience-bubble:hover {
  transform: translateY(-2px) rotate(var(--rotate, 0deg));
  box-shadow: 0 7px 11px rgba(0, 0, 0, 0.2);
}

/* Reset default margins */
.experience-bubble h3,
.experience-bubble h4,
.experience-bubble .dates,
.experience-bubble .description {
  margin: 0;
}

/* Headings and text styling */
.experience-bubble h3 {
  margin-top: 1rem;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: rgb(0, 24, 121);
  line-height: 1.2;
}

.experience-bubble h4 {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: #3d0101;
  line-height: 1.3;
}

.experience-bubble .dates {
  font-size: 0.8rem;
  color: #000;
  opacity: 0.75;
}

.experience-bubble .description {
  font-family: 'Comic Sans MS', 'Comic Sans';
  font-size: 0.8rem;
  line-height: 1.5;
  line-break: strict;
}

/* Firefox scrollbar */
.experience-bubble {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

/* WebKit scrollbar */
.experience-bubble::-webkit-scrollbar {
  width: 3px;
}

.experience-bubble::-webkit-scrollbar-track {
  background: transparent;
}

.experience-bubble::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 2px;
}

@media (max-width: 600px) {
  #experience {
    border-width: 16px;
    border-radius: 8px;
    margin: 1rem 1rem 1rem 1rem;

    /* background and contents remain unchanged */
  }
}
body {
  padding: 20px;
  box-sizing: border-box;
}