body {
    margin: 0px;
    padding: 0px;
    display: flexbox;
    background-color: black;
    max-width: 1440px;
    margin: auto;
}

/* Section Titles */
.section-title {
    padding-bottom: 20px;
    text-decoration: underline;
    text-underline-offset: 20px;
}

/* Hero Section */
#hero-section {
    min-height: 500px;
    width: 100%;
    background-color: white;
}

#hero-name {
    text-shadow: 2px 2px 4px black
}

#hero-image {
    padding: 0px;
    margin: 0px;
    box-shadow: 3px 3px 6px black;
}

/* Slide in Animation */
.slide-in {
  opacity: 0;
  transform: translateX(-150px);
  animation: slideIn 1s ease-out forwards;
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.delay-0 {
  animation-delay: 0s;
}

.delay-1 {
  animation-delay: 0.3s;
}

.delay-2 {
  animation-delay: 0.6s;
}

.delay-3 {
  animation-delay: 0.8s;
}

@media (max-width: 500px) {
  .flex-column-custom {
    flex-direction: column !important;
    align-items: center;
    text-align: center;
  }

  #hero-image {
    margin-top: 1rem;
  }
}






/* About Seciton */
#about-section {
    min-height: 500px;
    width: 100%;
    background-color: white;
}

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

#about-carousel {
    padding: 0px;
    border-radius: 10px;
    box-shadow: 2px 2px 4px black;
}

#about-carousel .card-img {
  height: 500px;
  object-fit: cover;
  width: 100%;
}

/* Card Fade In Animation */
.fade-slide-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-slide-up.visible {
  opacity: 1;
  transform: translateY(0);
}

#about-dev {
    background-color: rgba(0, 0, 0, 0.5);
}

#about-gamer {
    background-color: rgba(0, 0, 0, 0.5);
}

#about-growth {
    background-color: rgba(0, 0, 0, 0.5);
}


/* Resume Section */
#resume-section {
    min-height: 500px;
    width: 100%;
    background-color: white;
}

#resume-summary-section {
    box-shadow: 4px 4px 8px black;
}

#resume-history-description {
    box-shadow: 4px 4px 8px black;
}

#resume-education-section {
    box-shadow: 4px 4px 8px black;
}

#resume-certs-section {
    box-shadow: 4px 4px 8px black;
}



/* Project Section */
#project-section {
    min-height: 500px;
    width: 100%;
    background-color: white;
}

/* Project Summary Shining Gradient Effect */
.shining-gradient {
  font-weight: bold;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #f8d7ff 30%,
    #a64bf4 50%,
    #f8d7ff 70%,
    #ffffff 100%
  );
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: shine 2.5s linear infinite;
}

@keyframes shine {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}


#current-project {
    border-width: 0px;
    border-top: 2px;
    border-bottom: 2px;
    border-style: groove;
    border-color: black;
}

#project-card-img {
    min-height: 500px;
    box-shadow: 4px 4px 8px gray;
}

/* Project Card Animation */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}



/* Contact Section */
#contact-section {
    min-height: 500px;
    width: 100%;
    background-color: white;
}

#contact-section-left {
    min-height: 500px;
    box-shadow: 4px 4px 8px gray;
}

#contact-section-right {
    min-height: 500px;
    box-shadow: 4px 4px 8px gray;
}

/* Contact section Animation */
.fade-pulse {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Visible state */
.fade-pulse.visible {
  opacity: 1;
  transform: scale(1);
}