/* Setting default style values */
:root {
  /* palette */
  --palette-1: #26547C;
  --palette-1: #ECECCA;
  --palette-1-font: white;
  --palette-1-font: #1c1c1c;
  --palette-2: #94E9E7;
  --palette-2-font: #1c1c1c;
  --palette-3: #39B3A2;
  --palette-3-shade: #54C9BA;
  --palette-3-font: #1c1c1c;
  --palette-4: #EF6F6C;
  --palette-4-font: #1c1c1c;
  --palette-5: #820933;
  --palette-5-shade: #AC0C44;
  --palette-5-font: white;

  /* colors */
  --gray-100: rgb(28, 28, 28);
  --gray-200: rgb(50, 50, 50);
  --gray-300: rgb(90, 90, 90);
  --gray-500: rgb(128, 128, 128);
  --gray-600: rgb(145, 145, 145);
  --gray-700: rgb(165, 165, 165);
  --gray-800: rgb(185, 185, 185);
  --gray-850: rgb(210, 210, 210);
  --gray-900: rgb(236, 236, 236);

  --black: #1c1c1c;
  --white: white;

  --highlight-gray: rgba(127, 127, 127, .15);
  --highlight-white: rgba(255, 255, 255, .15);

  --color-gradient-1: rgb(236, 236, 202);
  --color-gradient-2: rgb(148, 233, 231);

  --box-highlight: var(--palette-1);
  --navbar-box-highlight: var(--highlight-white);
  --highlight-text-color: var(--black);
  --text-color: var(--black);
  --link-color: var(--palette-3);
  --background-color: var(--white);
  --navbar-background-color: var(--palette-5);
  --navbar-text-color: var(--palette-5-font);
  --svg-color: var(--text-color);
  --anchor-color: var(--palette-3);
  --footer-text-color: var(--text-color);
  --body-color: var(--gray-900);
  --button-color: var(--palette-3);
  --button-color-hover: var(--palette-3-shade);
  --select-color: var(--gray-900);
  --input-underline-color: var(--gray-500);
  --mobile-title-color: var(--gray-600);
  --error-color: var(--lighter-red);
  --success-color: var(--light-blue);
  --page-select-color: var(--black);
  --page-notselected-color: var(--black);
  --toolbar-button-color: var(--white);
  --toolbar-button-text-color: var(--black);
  --toolbar-seperator-color: var(--gray-800);
  --button-cancel-color: var(--gray-800);
  --button-cancel-text-color: var(--black);
  --button-cancel-color-hover: var(--gray-850);
  --podium-profile-background: var(--white);
  --winner-color: rgb(255, 206, 45);
  --second-color: silver;
  --third-color: rgb(255, 176, 103);

  /* shadow */
  --shadow: 0px 0px 15px 6px rgba(0, 0, 0, 0.05);
  --offset-shadow: 0px 20px 15px 6px rgba(0, 0, 0, 0.05);

  /* Background */
  --bg-gradient: radial-gradient(circle at 130%, var(--color-gradient-1) 40%, var(--color-gradient-2) 100%);

  /* font */
  --font-family: "Segoe UI", Tahoma, "Avenir Next", sans-serif;
  --text-col-light: var(--gray-300);
  --highlight-text-weight: 600;

  --body-width: 90vw;
  --max-width: 1200px;

  /* border radius */
  --border-radius: 20px;

  /* variables for mobile and desktop scaling */
  --page-margin: 0.7em;
  --h1-font-size: 2.8em;
  --h2-font-size: 2.3em;
  --h3-font-size: 1.5em;
  --bottom-margin: 1em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --black: #1c1c1c;
    --white: white;
  }
}

@media screen and (min-width: 300px) {
  :root {
    --h1-font-size: 3.5em;
    --h2-font-size: 3em;
  }
}

@media screen and (min-width: 650px) {
  :root {
    --page-margin: 1.5em;
    --h1-font-size: 4em;
    --h2-font-size: 3.5em;
    --h3-font-size: 2em;
    --anchor-color: var(--text-color);
  }
}

@media screen and (min-width: 900px) {
  :root {
    --h1-font-size: 5em;
    --h2-font-size: 4.5em;
    --h3-margin: 2em;
    --bottom-margin: 5em;
  }
}