@charset "UTF-8";

:root {

  --color-blue: #3c486b;
  --color-red: #bd3b25; 

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

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

  --link-color: var(--color-red);
  --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: 5rem; 
  --input-color: #f3f3f3;
  --input-border-color: transparent;
  --input-border: 2px solid var(--input-border-color);
  --input-active-border: 2px solid var(--color-red);
  --input-padding: var(--span-small) var(--span);

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

  --button-height: 5rem;
  --button-color: var(--color-red);
  --button-text-color: white;
  --button-icon-color: white;
  --button-hover-color: black;
  --button-hover-text-color: white;
  --button-hover-icon-color: white;

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

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

}

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

@media screen and (max-width: 640px) {
}

@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; }
}