@charset "UTF-8";

:root {

  --color-blue: #2464a3;
  --color-yellow: #fff206;
  --color-red: #e30202; 

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

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

  --color-line: #dcdcdc;

  --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: 1300px;

  --input-height: 6rem; 
  --input-font-size: 1.8rem; 
  --input-color: white;
  --input-border-color: #7c7c7c;
  --input-border: 1px solid var(--input-border-color);
  --input-active-border: 1px solid var(--color-blue);
  --input-padding: var(--span-small) var(--span);

  --filter-shadow: drop-shadow(0 0 1rem #0004);

  --button-height: 6rem;
  --button-color: var(--color-yellow);
  --button-text-color: black;
  --button-icon-color: black;
  --button-hover-color: black;
  --button-hover-text-color: white;
  --button-hover-icon-color: white;

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

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

}

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

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

@media screen and (min-width: 2000px) {
	:root {
	  --page-width: 1650px;
 	  --main-font-size: 2.4rem;	
	}

}