@charset "UTF-8";

:root {


	--item-width: 30rem;

  --color-blue: #2e97ef;
  --color-red: #c4262a;
  --color-wood: #ded7c0;
  --color-white-wood: #efefef;
  --color-yellow: #ffd200;
  --color-white: #ffffff; 
  --color-black: #000000;
  --color-gray: #efefef;
  --color-light-gray: #f4f4f1;
  --color-dark-gray: #d1d0cf;

  --gradient-blue: #025ea7, #35b8ad;

  --link-color: var(--color-blue);
  --text-color: #333;
  --background-color: white;
  --heading-color: var(--color-black);
  
  --span: 2rem;

  --block-padding: 6rem;
  --block-inner-padding: 6rem;

  --page-width: 1300px;

  --input-height: 6rem; 
  --input-color: #f3f3f3;
  --input-border-color: transparent;
  --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-red);
  --button-text-color: white;
  --button-icon-color: white; 
  --button-hover-color: var(--color-black);
  --button-hover-icon-color: white;
  --button-hover-text-color: white;

  --border-radius: 1rem; 

  --shadow: 0 0 1rem 0 #0003;
  --font: "Roboto", sans-serif;

  --texture-white-wood: url(../img/bg-white-wood.jpg) center repeat;
  --texture-wood: url(../img/bg-wood.jpg) center repeat;

}

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

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

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