@-webkit-keyframes bg-scrolling-reverse {
  100% { background-position: 50px 50px; }
}
@-moz-keyframes bg-scrolling-reverse {
  100% { background-position: 50px 50px; }
}
@-o-keyframes bg-scrolling-reverse {
  100% { background-position: 50px 50px; }
}
@keyframes bg-scrolling-reverse {
  100% { background-position: 50px 50px; }
}

@-webkit-keyframes bg-scrolling {
  0% { background-position: 50px 50px; }
}
@-moz-keyframes bg-scrolling {
  0% { background-position: 50px 50px; }
}
@-o-keyframes bg-scrolling {
  0% { background-position: 50px 50px; }
}
@keyframes bg-scrolling {
  0% { background-position: 50px 50px; }
}

[data-theme="light"] .pingpong-background {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;
  
  -webkit-animation: bg-scrolling-reverse .92s infinite;
  -moz-animation: bg-scrolling-reverse .92s infinite;
  -o-animation: bg-scrolling-reverse .92s infinite;
  animation: bg-scrolling-reverse .92s infinite;
  
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
}

[data-theme="light"] #particle-canvas {
  display: none !important;
}

[data-theme="light"] .content--canvas {
  display: none !important;
}

html[data-theme="light"] body,
html[data-theme="light"] body *,
html[data-theme="light"] main,
html[data-theme="light"] main *,
html[data-theme="light"] section,
html[data-theme="light"] section *,
html[data-theme="light"] footer,
html[data-theme="light"] footer * {
  color: #000000 !important;
}

html[data-theme="light"] .timer,
html[data-theme="light"] .time-value,
html[data-theme="light"] #project-timer,
html[data-theme="light"] #world-timer,
html[data-theme="light"] .hero-content .timer,
html[data-theme="light"] .hero-content .time-value,
html[data-theme="light"] .hero-content #project-timer,
html[data-theme="light"] .hero-content #world-timer,
html[data-theme="light"] main .timer,
html[data-theme="light"] main .time-value,
html[data-theme="light"] main #project-timer,
html[data-theme="light"] main #world-timer {
  color: #000000 !important;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="light"] .music-title,
html[data-theme="light"] #music-title-footer,
html[data-theme="light"] .music-section .music-title,
html[data-theme="light"] .modern-footer .music-title,
html[data-theme="light"] footer .music-title {
  color: #000000 !important;
}

html[data-theme="light"] .footer-link,
html[data-theme="light"] .social-link,
html[data-theme="light"] .footer-nav .footer-link,
html[data-theme="light"] .modern-footer .footer-link,
html[data-theme="light"] footer .footer-link,
html[data-theme="light"] .social-section .social-link,
html[data-theme="light"] .modern-footer .social-link,
html[data-theme="light"] footer .social-link {
  color: #000000 !important;
}

html[data-theme="light"] .music-btn,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .music-controls .music-btn,
html[data-theme="light"] .modern-footer .music-btn,
html[data-theme="light"] footer .music-btn {
  color: #000000 !important;
}

html[data-theme="light"] svg,
html[data-theme="light"] svg *,
html[data-theme="light"] .music-btn svg,
html[data-theme="light"] .music-btn svg *,
html[data-theme="light"] .theme-toggle svg,
html[data-theme="light"] .theme-toggle svg *,
html[data-theme="light"] .social-link svg,
html[data-theme="light"] .social-link svg * {
  color: #000000 !important;
  fill: #000000 !important;
  stroke: #000000 !important;
}

html[data-theme="light"] .server-title,
html[data-theme="light"] .server-info,
html[data-theme="light"] .server-concept,
html[data-theme="light"] .logo-text-overlay .server-title,
html[data-theme="light"] .logo-text-overlay .server-info,
html[data-theme="light"] .logo-text-overlay .server-concept {
  color: #000000 !important;
}

html[data-theme="light"] .server-title .glow {
  color: #8a2be2 !important;
  text-shadow: 0 0 10px #8a2be2, 0 0 20px #8a2be2, 0 0 30px #8a2be2 !important;
}

html[data-theme="light"] * {
  color: #000000 !important;
}

html[data-theme="light"] .hero-content {
  border: 2px solid #000000 !important;
  box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="light"] .modern-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="light"] .music-btn,
html[data-theme="light"] .social-link,
html[data-theme="light"] .theme-toggle {
  border: 2px solid rgba(0, 0, 0, 0.3) !important;
  background: rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] .music-btn:hover,
html[data-theme="light"] .social-link:hover,
html[data-theme="light"] .theme-toggle:hover {
  background: rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(0, 0, 0, 0.5) !important;
}