/* Footer styles */
.footer__copyright p {
  text-align: center;
  color: #74829c;
  font-size: var(--font-size-small);
}

.footer__copyright {
  background-color: var(--background-light);
  background-image: linear-gradient(62deg, var(--background-light) 0%, #E0C3FC 100%);
  padding: var(--spacing-medium) 0;
  margin-bottom: 4em;
}

/* Footer Dark */
body.dark .footer__copyright {
  background: #29273E;
}

#theme-toggle {
  text-align: center;
  transition: var(--transition-speed);
  color: black;
  box-shadow: 0 0 10px var(--shadow-color);
  border-radius: var(--border-radius);
  display: block;
  border: 1px solid;
}

body.dark #theme-toggle {
  background: #030735;
  color: white;
}

.chart-desc{
  text-align: center;
  color: #a59cff;
}

/*Hero text styles*/
.hero__text .title.gradient {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, var(--text-light)), color-stop(57%, rgba(10, 10, 10, 0.9)), to(rgba(115, 115, 115, 0)));
  background: linear-gradient(180deg, rgba(4, 4, 4, 1) 10%, rgba(0, 0, 0, 0.9) 57%, rgba(0, 0, 0, 0.33) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

body.dark .hero__text .title.gradient {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, var(--text-light)), color-stop(57%, rgba(245, 245, 245, 0.9)), to(rgba(115, 115, 115, 0)));
  background: linear-gradient(180deg, rgba(245, 245, 245, 1) 10%, rgba(245, 245, 245, 0.9) 57%, rgba(115, 115, 115, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.hero__text .title span {
  background: -webkit-linear-gradient(left, #fa5560 0%, #b14bf4 52%, var(--primary-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.dark .hero__text .title span {
  background: -webkit-linear-gradient(left, #fa5560 0%, #b14bf4 52%, var(--primary-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__text .title {
  color: var(--text-light);
  margin-bottom: 0;
}

body.dark .hero__text .title {
  color: var(--text-light);
}

.hero__text {
  visibility: visible;
  animation-delay: 0.2s;
  animation-name: fadeInUp;
  position: relative;
  max-width: 770px;
  z-index: 1;
  margin: auto;
}

.hero__text .desc {
  font-size: var(--font-size-medium);
  line-height: 27px;
  letter-spacing: 0.5px;
  color: #74829c;
  max-width: 668px;
  margin: 24px auto 0;
  text-align: center;
  margin-bottom: 2em;
}

body.dark .hero__text .desc {
  color: var(--text-light);
}