:root {
  --bg-primary: #000000;
  --bg-header-nav:#86868B;
  --text-light: #FFFFFF;
  --text-dark: #1D1D1F;
  --title-primary-color: #F5F5F7;
  --subtitle-color: #6E6E73;
  --action-color: #2997FF;
  --spirited-main-color: #DED2B9;
}
header {
  background-color: var(--bg-primary);
  position: sticky;
  z-index: 999;
  opacity: 99%;
  margin-bottom: 12px;
}
header nav ul {
  display: flex;
  justify-content: space-around;
  gap: 2rem;
  width: 100%;
  max-width: 1024px;
  margin: auto;
  padding: 22px 0;
}
header nav ul a{
  color: var(--text-light);
}
header section {
  background-color: var(--bg-primary);
  color: var(--text-light);
  text-align: center;
  margin-top: 50px;
}

.section-title {
  position: absolute;
  width: 100%;
  margin: auto;
}
.section-title h1 {
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
}
.section-title p {
  color: var(--subtitle-color);
  font-size: 1.4rem;
  font-weight: 500;
  padding-top: 8px;
}
.section-title a {
  color: var(--action-color);
  font-size: 0.8rem;
}
.section-title a:hover {
 text-decoration: underline;
}
.section-shopping-event img{
  width: 100%;
  margin-top: -50px;
}

.main-section-bg {
  width: 100%;
  
}
.main-section-name {
  display: flex;
  color: var(--text-light);
  gap: 600px;
  margin-left: 200px;
  justify-content: space-around;
  margin-top: 104px;
  position: absolute;
}

.main-spirited-background img {
  width: 100%;
  
}
.main-spirited-background p {
  color: var(--text-light);
  margin-top: -100px;
  text-align: center;
}
.main-spirited-background span {
  color: var(--text-light);
  display: block;
  text-align: center;
  margin-top: 14px;
}