@font-face {
  font-family: 'Noto Serif SC';
  src: local('Noto Serif SC');
}
@layer utilities {
  .bg-star {
    background-image: radial-gradient(#3b2e70 1px, transparent 1px);
    background-size: 30px 30px;
  }
  .text-shadow {
    text-shadow: 0 0 8px #8b5cf680;
  }
  .hover-glow:hover {
    box-shadow: 0 0 16px #8b5cf670;
  }
  .hero-bg{
    background-image: url('../img/banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}
*{box-sizing: border-box;margin:0;padding:0;}
:root{
  --primary:#8b5cf6;
  --darkbg:#0f0f1a;
  --cardbg:#171729;
  --textlight:#e4e4f7;
}
body{
  background-color: var(--darkbg);
  background-image: radial-gradient(#3b2e70 1px, transparent 1px);
  background-size:30px 30px;
  color:var(--textlight);
  font-family: "Noto Sans SC",sans-serif;
}
.container{width:100%;max-width:1200px;margin:0 auto;}
.text-primary{color:var(--primary);}
.bg-darkbg{background-color:var(--darkbg);}
.bg-cardbg{background-color:var(--cardbg);}
.bg-primary/20{background-color:rgba(139,92,246,0.2);}
.bg-primary/10{background-color:rgba(139,92,246,0.1);}
.bg-primary/80{background-color:rgba(139,92,246,0.8);}
.bg-primary{background-color:var(--primary);}
.border-primary/20{border:1px solid rgba(139,92,246,0.2);}
.border-primary/40{border:1px solid rgba(139,92,246,0.4);}
.text-shadow{text-shadow:0 0 8px rgba(139,92,246,0.5);}
.hover-glow:hover{box-shadow:0 0 16px rgba(139,92,246,0.4);}
.transition{transition: 0.3s all;}
.article-content p{margin:1em 0;}
.leading-loose{line-height:1.8;}
.leading-relaxed{line-height:1.6;}
.rounded-lg{border-radius: 0.5rem;}
.rounded-xl{border-radius:0.75rem;}
.px-4{padding-left:1rem;padding-right:1rem;}
.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.px-10{padding-left:2.5rem;padding-right:2.5rem;}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem;}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
.py-12{padding-top:3rem;padding-bottom:3rem;}
.py-20{padding-top:5rem;padding-bottom:5rem;}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
.mb-2{margin-bottom:0.5rem;}
.mb-4{margin-bottom:1rem;}
.mb-6{margin-bottom:1.5rem;}
.mb-8{margin-bottom:2rem;}
.mb-10{margin-bottom:2.5rem;}
.mt-2{margin-top:0.5rem;}
.mt-4{margin-top:1rem;}
.mt-6{margin-top:1.5rem;}
.mt-10{margin-top:2.5rem;}
.mt-12{margin-top:3rem;}
.mt-1{margin-top:0.25rem;}
.mr-2{margin-right:0.5rem;}
.gap-3{gap:0.75rem;}
.gap-4{gap:1rem;}
.gap-6{gap:1.5rem;}
.gap-8{gap:2rem;}
.grid{display:grid;}
.flex{display:flex;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.flex-wrap{flex-wrap:wrap;}
.h-40{height:10rem;}
.h-fit{height:fit-content;}
.space-y-2 > * + *{margin-top:0.5rem;}
.space-y-1 > * + *{margin-top:0.25rem;}
.block{display:block;}
.inline-block{display:inline-block;}
.sticky{position:sticky;}
.top-0{top:0;}
.z-50{z-index:50;}
.backdrop-blur{backdrop-filter:blur(8px);}
.border-b{border-bottom-width:1px;}
.border-t{border-top-width:1px;}
.overflow-hidden{overflow:hidden;}
.text-center{text-align:center;}
.text-sm{font-size:0.875rem;}
.text-lg{font-size:1.125rem;}
.text-xl{font-size:1.25rem;}
.text-2xl{font-size:1.5rem;}
.text-3xl{font-size:1.875rem;}
.font-bold{font-weight:700;}
.font-serif{font-family:"Noto Serif SC",serif;}
.opacity-70{opacity:0.7;}
.opacity-80{opacity:0.8;}
.opacity-90{opacity:0.9;}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--primary);}
@media(min-width:768px){
  .md:flex{display:flex;}
  .md:hidden{display:none;}
  .md:px-10{padding-left:2.5rem;padding-right:2.5rem;}
  .md:text-xl{font-size:1.25rem;}
}
@media(min-width:1024px){
  .lg:grid-cols-4{grid-template-columns:repeat(4, minmax(0,1fr));}
  .lg:col-span-3{grid-column:span 3 / span 3;}
}
@media(max-width:767px){
  .md:hidden{display:block;}
  .md:flex{display:none;}
}