:root {
  --max-content-width-large: 1200px;
  --max-content-width-small: 1000px;
  --content-padding: 10px;
  --small-margin: 10px;
  --medium-margin: 20px;
  --large-margin: 40px;
  --very-large-margin: 50px;
  --section-top-padding: 20px;
  --section-bottom-padding: 20px;
  --max-list-width: 300px;
  --max-community-width: 600px;
  --max-faq-width: 900px;

  --mobile-breakpoint: 600px;

  --padding-small: 8px;
  --padding-extra-small: calc(var(--padding-small) / 2);
  --padding-standard: calc(var(--padding-small) * 2);
  --padding-large: calc(var(--padding-small) * 3);
  --padding-extra-large: calc(var(--padding-small) * 4);
  --padding-extra-extra-large: calc(var(--padding-small) * 5);

  --color-black: #111218;
  --color-white: #ffffff;
  --color-blue: #1e21f4;
  --color-gray: #1e2021;

  --bg-color: var(--color-black);
  --bg-light-color: var(--color-gray);
  --text-color: var(--color-white);
  --bg-button: var(--color-blue);

  --font-size-very-large: max(min(8vw, 80px), 50px);
  --font-size-large: 40px;
  --font-size-medium: min(3vw, 30px);
  --font-size-normal: 20px;
  --font-size-small: 16px;

  --button-padding: 12px 35px;
  --button-border-radius: 5px;
  --button-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  --menu-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);

  --skew-angle: 5deg;
	--skew-padding: calc(100vw * 0.04374433176);
  --skew-margin: calc(100vw * 0.04374433176);
}

@media screen and (max-width: 1024px) {
  :root {
    --header-logo-size: 35px;
    --font-size-large: 35px;
    --font-size-medium: 25px;
    --font-size-normal: 18px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  :root {
    --header-logo-size: 35px;
    --font-size-large: 30px;
    --font-size-medium: 20px;
    --font-size-normal: 15px;
  }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
  :root {
    --header-logo-size: 30px;
    --font-size-large: 25px;
    --font-size-medium: 20px;
    --font-size-normal: 15px;
  }
}