:root {
  /* --- Fonts --- */
  --font-family: Arial, sans-serif;
  --title-font-family: 'Courier New', Courier, monospace;
  /* --- Colors --- */
  --background-color-light: #f0f0f0;
  --text-color-light: #1a1a1a;
  --background-color-dark: #1a1a1a;
  --text-color-dark: #f0f0f0;
  --tile-border-color: #ccc;
  --key-color: black;
  --key-background-color: #d3d6da;
  --key-hover-background-color: #bbb;
  --correct-color: #6aaa64;
  --present-color: #c9b458;
  --absent-color: #787c7e;
  /* setting- */
  --settings-background-color-light: #f9f9f9;
  --settings-background-color-dark: #2a2a2a;
  --setting-select-border-color: #ccc;
  --setting-select-background-color-light: #fff;
  --setting-select-color-light: #333;
  --setting-select-background-color-dark: #3a3a3a;
  --setting-select-color-dark: #f0f0f0;
  --setting-select-border-color-dark: #555;
  /* content-button- */
  --content-button-background-color: #d3d6da;
  --content-button-color: #1a1a1a;
  --content-button-border-color: #ccc;
  --content-button-hover-background-color: #bbb;
  --content-button-background-color-dark: #3a3a3a;
  --content-button-color-dark: #f0f0f0;
  --content-button-border-color-dark: #555;
  --content-button-hover-background-color-dark: #4a4a4a;
  --content-button-hover-color-dark: #ffffff;
  /* --- Sizes --- */
  --game-title-font-size: min(34px, 8vw, 4vh);
  /* top-bar- */
  --top-bar-height: min(60px, 15vw, 8vh);
  --top-bar-margin-bottom: 20px;
  --top-bar-buttons-div-gap: min(10px, 3vw);
  --top-bar-button-size: min(30px, 8vw, 4vh);
  --top-bar-button-padding: min(4px, 1vw);
  --settings-group-margin-bottom: min(15px, 4vw, 2vh);
  /* setting- */
  --setting-select-width: min(130px, 35vw);
  --setting-select-padding: min(8px, 2vw);
  --setting-select-font-size: min(16px, 4vw);
  --setting-select-border-radius: 5px;
  --setting-label-font-size: min(24px, 6vw);
  /* content-button- */
  --content-button-margin-top: min(20px, 8vw);
  --content-button-padding: min(10px, 4vw) min(20px, 8vw);
  --content-button-font-size: min(18px, 7vw);
  /* Keyboard */
  --keyboard-gap: min(5px, 1vw);
  --key-size: min(40px, 8vw, 6vh);
  --key-font-size: min(24px, 6vw);
  --enter-key-font-size: min(32px, 8vw);
  --game-board-gap: min(5px, 1vw);
  --game-board-margin-bottom: 20px;
  --tile-width: min(60px, 15vw, 8vh);
  --tile-height: min(60px, 15vw, 8vh);
  --tile-font-size: min(32px, 8vw, 4vh);
  --content-max-width: 450px;
  /* Stats */
  --stats-grid-gap: min(20px, 5vw);
  --stats-grid-margin-bottom: min(20px, 5vw);
  --stat-box-border-radius: 5px;
  --stat-box-padding: min(10px, 3vw);
  --stat-number-font-size: min(24px, 8vw);
  --stat-number-margin-bottom: 5px;
  --stat-label-font-size: min(16px, 5vw);
  /* guess- */
  --guess-distribution-gap: 5px;
  --guess-label-width: min(20px, 5vw);
  --guess-label-margin-right: 10px;
  --guess-label-font-size: min(16px, 4vw);
  --guess-bar-height: min(30px, 8vw);
  --guess-bar-border-radius: 5px;
  --guess-bar-fill-border-radius: 4px;
  --guess-count-right: 5px;
  --guess-count-font-size: min(16px, 4vw);
  /* Notifications */
  --notification-top: 10%;
  --notification-background-color: rgba(0, 0, 0, 0.8);
  --notification-color: white;
  --notification-padding: 10px 20px;
  --notification-border-radius: 5px;
  --notification-game-over-top: 50%;
  --notification-game-over-background-color: rgba(0, 0, 0, 0.95);
  --notification-game-over-padding: 20px 40px;
  --notification-game-over-border-radius: 10px;
  --notification-game-over-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  --notification-game-over-font-size: 1.2em;
  /* Animations */
  --animation-pop-duration: 0.15s;
  --animation-flip-duration: 0.6s;
  --animation-shake-duration: 0.5s;
}