:root {
  --background: linear-gradient(DeepSkyBlue, lightblue);
  --text-color: #000000;
  --primary-color-start: #f5f5f5;
  --primary-color-end: #ccc;
}

:root .topnav {
  --primary-color-start: #f5f5f5;
  --primary-color-end: #ccc;
}

:root .buttontype1:hover{
  --primary-color-start: #bfbfbf;
  --primary-color-end: #8c8c8c;
}

:root .stream-container {
--primary-color-rgb: 255, 255, 255;
}

:root .footer-bar {
  --primary-color-start: #f5f5f5;
  --primary-color-end: #ccc;
}

:root .chat-container {
  --primary-color-start: #f5f5f5;
  --primary-color-end: #ccc;
}

/* Dark theme variables, applied when the body has the 'dark-theme' class */
.dark-theme {
  --background: linear-gradient(DeepSkyBlue, darkblue);
  --text-color: #ffffff;
}

.dark-theme .buttontype1 {
  --primary-color-start: #cccccc;
  --primary-color-end: #737373;
}

.dark-theme .buttontype1:hover{
  --primary-color-start: #8c8c8c;
  --primary-color-end: #333333;
}

.dark-theme .topnav {
  --primary-color-start: #cccccc;
  --primary-color-end: #737373;
}

.dark-theme .stream-container {
  --primary-color-rgb: 100, 100, 100;
}

/* Note: I found out it won't work here, I have to
  specify this in footerchat.css instead. */
.dark-theme .footer-bar {
  --primary-color-start: #cccccc;
  --primary-color-end: #737373;
}

.dark-theme .footer-bar:hover {
  --primary-color-start: #8c8c8c;
  --primary-color-end: #333333;
}

/* Second dark theme, grayscale. */
.dark-theme-2 {
  --background: linear-gradient(darkgray, darkblue);
  --text-color: #ffffff;
}