#body {
    background-color:black ;
}

.texts {
    color: blue;
}

@keyframes rgbCycle {
  0%   { color: #ff0000; }
  17%  { color: #ff8800; }
  33%  { color: #ffff00; }
  50%  { color: #00ff00; }
  67%  { color: #00ffff; }
  83%  { color: #0000ff; }
  100% { color: #ff00ff; }
}
@keyframes brgbCycle {
  0%   { background-color: #ff0000; }
  17%  { background-color: #ff8800; }
  33%  { background-color: #ffff00; }
  50%  { background-color: #00ff00; }
  67%  { background-color: #00ffff; }
  83%  { background-color: #0000ff; }
  100% { background-color: #ff00ff; }
}
@keyframes rgbGlowBox {
  0%   { box-shadow: 0 0 20px #ff0000; }
  33%  { box-shadow: 0 0 20px #00ff00; }
  67%  { box-shadow: 0 0 20px #0000ff; }
  100% { box-shadow: 0 0 20px #ff0000; }
}
.paragraph {
    font-family: fantasy;
    font-size: x-large;
    text-align: center;
    animation: rgbCycle 4s linear infinite;
}
html {
  scroll-behavior: smooth;
}
#target-section {
    padding-left: 5%;
    padding-right: 5%;
}
#card {
  animation: rgbGlowBox 4s linear infinite;
}

.hidden-section {
  display: none;
  padding: 40px;
  border-radius: 12px;
  margin: 60px 0;
}

.hidden-section.visible {
  display: block;
}

/* the brief glow effect when it appears */
.hidden-section.glow {
  animation: revealGlow 1.5s ease-out;
}

@keyframes revealGlow {
  0%   { box-shadow: 0 0 0px rgba(0, 255, 255, 0); }
  20%  { box-shadow: 0 0 40px rgba(0, 255, 255, 0.8); }
  100% { box-shadow: 0 0 0px rgba(0, 255, 255, 0); }
}
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}