@charset "UTF-8";

:root {

  --color-violet: #414181;
  --color-yellow: #ffcc00; 

  --color-white: #ffffff; 
  --color-black: #000000;

  --color-gray: #efefef;
  --color-light-gray: #f7f7f7;
  --color-dark-gray: #333;
  --color-red: #b82626;

  --button-color: var(--color-yellow);
  --button-text-color: black;
  --button-hover-color: var(--color-light-gray);
  --button-hover-text-color: black;

  --link-color: var(--color-violet);
  --text-color: black;
  --background-color: white;
  --heading-color: var(--color-violet);
  
  --span: 2rem;
	--span-small: calc(var(--span) / 2);
  --span-large: calc(var(--span) * 2);

  --block-padding: calc(var(--span) * 4);
  --block-inner-padding: 6rem;
  --block-width-small: 110rem;

  --page-width: 1400px;

  --input-color: white;
  --input-border-color: var(--color-gray);
  --input-border: 2px solid var(--color-gray);
  --input-active-border: 2px solid var(--color-violet);
  --input-padding: var(--span-small) var(--span);

  --border-radius: 0; 
  --shadow: 0 0 15px 0 #00000020;

  --font: "Roboto", sans-serif;

}

@media screen and (min-width: 2000px) {
	:root {
		--page-width: 1800px; 
	}
}

@media screen and (min-width: 3000px) {
	:root {
		--page-width: 2400px; 
	}
}