:root {
  /* Font variables */
  --font-logo: 'BungeeShade';
  --font-secondary: 'Bungee';
  --font-anton: 'Anton';
  --font-anton-sc: 'Anton SC';
  --font-raleway: 'Raleway';
  --font-oswald: 'Oswald';
  --font-bayon: 'Bayon';
  --font-dm-sans: 'DMSans';

  /* Shoelace theme variables */
  --sl-color-primary-50: #e6f3ff;
  --sl-color-primary-100: #cce7ff;
  --sl-color-primary-200: #99cfff;
  --sl-color-primary-300: #66b7ff;
  --sl-color-primary-400: #339fff;
  --sl-color-primary-500: #489BDC;
  --sl-color-primary-600: #0073e6;
  --sl-color-primary-700: #005cb3;
  --sl-color-primary-800: #004580;
  --sl-color-primary-900: #002e4d;

  --theme-form-element-width: 280px;
}

/* Dark theme */
.sl-theme-dark {
  --theme-background-color: #404243;
  --theme-base-color: #404243;
  --theme-contrast-color: #FEFEFE;
  --theme-accent-color: #489BDC;

  --theme-font-color: #404243;
  --theme-font-contrast-color: #FEFEFE;

  --theme-input-background-color: #FEFEFE;
  --theme-input-contrast-background-color: #404243;

  --theme-button-color: #489BDC;
  --theme-inactiv-eanswer-button-color: #e0e0e0;
  --theme-button-font-color: #404243;
  
  --theme-border-color: #ffffff;

  --theme-footer-new-game-background-color: #D9D9D9;
  --theme-footer-new-game-dot-color: #BBB6B6;

  --theme-footer-question-in-play-background-color: #585858;
  --theme-footer-question-in-play-dot-color: #BBB6B6;
  
}

/* Light theme */
.sl-theme-light {
  --theme-background-color: #FEFEFE;
  --theme-base-color: #FEFEFE;
  --theme-contrast-color: #404243;
  --theme-accent-color: #489BDC;

  --theme-font-color: #404243;
  --theme-font-contrast-color: #404243;

  --theme-input-background-color: #ffffff;
  --theme-input-contrast-background-color: #FEFEFE;

  --theme-button-color: #FEFEFE;
  --theme-inactive-answer-button-color: #e0e0e0;
  --theme-butto-font-color: #404243;

  --theme-border-color: #ffffff;

  --theme-footer-background-color: #707070;
  --theme-footer-dot-color: #D9D9D9;

  --theme-footer-question-in-play-background-color: #D9D9D9;
  --theme-footer-question-in-play-dot-color: #BBB6B6;
}

body {
  transition: opacity 0.5s ease-in-out;
}

body.fade-out {
  opacity: 0;
}