@charset "UTF-8";

:root {

  --color-blue: #727e8f;
  --color-dark-blue: #4e5969;
  --color-yellow: #c59822;
  --color-red: #d32222; 

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

  --color-gray: #efefef;
  --color-light-gray: #f4f4f4;
  --color-dark-gray: #333;

  --link-color: var(--color-blue);
  --text-color: #333;
  --background-color: white;
  --heading-color: black;
  
  --span: 2rem;
  --span-small: 1rem;
  --span-large: 4rem; 
  --span-x-large: 8rem; 

  --container-gap: var(--span-large);

  --block-padding: var(--span-x-large);
  --block-inner-padding: var(--span-x-large);

	--item-width: 35rem;
  --page-width: 1400px;

  --input-height: 5rem; 
  --input-color: #f3f3f3;
  --input-border-color: var(--color-gray);
  --input-border: 2px solid var(--input-border-color);
  --input-active-border: 2px solid var(--color-blue);
  --input-padding: var(--span-small) var(--span);

  --button-height: 6rem;
  --button-color: var(--color-blue);
  --button-text-color: white;
  --button-icon-color: white; 

  --button-hover-color: black;
  --button-hover-text-color: white;
  --button-hover-icon: white;

  --border-radius: 0; 
  --shadow: 0 0 8px 0 #0003;

  --font: "Roboto", sans-serif;
  --root-font-size: 10px;

}

@media screen and (max-width: 768px) {
	:root {
		--block-padding: var(--span);
		--container-gap: 2rem; 
	}
}

@media screen and (max-width: 640px) {
	:root {
		--button-height: 4rem;
	  --input-height: 4rem; 
	}
}

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

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