body {
  /* padding: 50px;*/
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  min-height: 100vh;
  height: 100vh;
}

a {
  color: #00B7FF;
}

/* Grid Layout */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding-bottom: 2rem;
}

.grid-item {
    background-color: #f8f8f8;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 2rem;
    border-radius: 8px;
}

.grid-item:hover {
  transition: transform 0.3s ease;
  transform: scale(1.1);
}

.content-section-b {

  height: 100%;

}
/* 1. Define the appearance animation */
@keyframes fade-reveal {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.reveal-box {
  /* 2. Link the animation to the scroll progress */
  animation: fade-reveal linear;
  animation-timeline: view();
  
  /* 3. Fine-tune when it starts and ends */
  /* entry 0%: start as soon as it touches the bottom of the screen */
  /* cover 40%: complete the animation when it's 40% up the viewport */
  animation-range: entry 0% cover 30%;

}