:root {
  --primary: #38174a;
  --secondary: #e9bae5;
  --third: #70ffff;
  --fourth: #3d9f9f;
  --fifth: #beeded;
}

body {
  font-family: "Noto Sans TC", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  margin: 0;
  padding: 0;
}

#header {
  z-index: 999;
  position: relative;
}

.primary-color {
  color: var(--primary);
}

.secondary-color {
  color: var(--secondary);
}

.third-color {
  color: var(--third);
}

.fourth-color {
  color: var(--fourth);
}

.clip-center-right-home {
  clip-path: polygon(77% 0%, 40.3% 100%, 77% 100%);
}

.clip-top-left {
  clip-path: polygon(300px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 300px);
}

.clip-bottom-right {
  clip-path: polygon(100% 0%, 64.3% 100%, 100% 100%);
}

.clip-top-center {
  clip-path: polygon(36% 0%, 64.4% 0%, 50% 30%);
}

.clip-top-left-bottom {
  clip-path: polygon(30% 0%, 0% 100%, 0% 0%);
}

/* Custom Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.justify-content {
  justify-content: left;
}

/* Stagger animation delays for cards */
.animate-fade-in:nth-child(1) {
  animation-delay: 0.1s;
}
.animate-fade-in:nth-child(2) {
  animation-delay: 0.2s;
}
.animate-fade-in:nth-child(3) {
  animation-delay: 0.3s;
}
.animate-fade-in:nth-child(4) {
  animation-delay: 0.4s;
}
.animate-fade-in:nth-child(5) {
  animation-delay: 0.5s;
}

@media screen {
}

/* Tailwind Responsive Custom Classes */

/* 2xl */
@media only screen and (max-width: 1536px) {
}

/* xl */
@media only screen and (max-width: 1280px) {
}

/* lg */
@media only screen and (max-width: 1024px) {
}

/* md */
@media only screen and (max-width: 768px) {
  .clip-center-right-home {
    clip-path: polygon(77% 0%, 26% 100%, 80% 100%)
  }

  .clip-top-left {
    clip-path: polygon(160px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 160px);
  }

  .clip-bottom-right {
    clip-path: polygon(100% 0%, 75% 25%, 100% 25%);
  }

  .clip-top-center {
    clip-path: polygon(30% 0%, 70% 0%, 50% 35%);
  }
  .clip-top-left-bottom {
    clip-path: polygon(50% 0%, 0% 70%, 0% 0%);
  }
}

/* sm */
@media only screen and (max-width: 640px) {
  .justify-content-left-article1 {
    justify-content: left;
  }
  .clip-center-right-home {
    clip-path: polygon(87% 0%, 70% 17%, 87% 17%);
  }
  .clip-top-left {
    clip-path: polygon(100px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100px);
  }
  .clip-bottom-right {
    clip-path: polygon(100% 0%, 70% 20%, 100% 20%);
  }
  .clip-top-center {
    clip-path: polygon(30% 0%, 70% 0%, 50% 30%);
  }
  .justify-content-space-evenly
  {
    justify-content: space-evenly;
  }
  .clip-top-left-bottom {
    clip-path: polygon(50% 0%, 0% 30%, 0% 0%);
  }
}

@media only screen and (max-width: 320px) {
  .clip-center-right-home {
    clip-path: polygon(85% 0%, 63% 14%, 85% 14%);
}
}