@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,400;1,700&display=swap');
:root {
	--my-white:              #fff;
	--pale-grey:             #f5f8fa;
	--pale-grey-two:         #e6ecf0;
	--pinkish-grey:          #cbcbcb;
	--white-two:             #d4d4d4;
	--light-grey:            #ddd;
	--battleship-grey-light: #8597a6;
	--battleship-grey:       #657786;
	--battleship-grey-two:   #456;
	--my-black:              #202833;
	--black:                 #000;
	--tealish-light:         #aee;
	--tealish:               #33caca;
	--tealish-dark:          #0bb;
	--tealish-dark-two:      #088;
	--marigold:              #ffc705;
	--marigold-2:            #ffb705;
	--tangerine:             #ff9605;
	--pastel-red:            #ea5151;
	--reddish-pink:          #ff265d;
	--reddish-pink-light:    #ffdddd;
	--clear-blue:            #2684ff;
	--aqua-marine:           #35d8eb;
	--honey-dew:             #f0fff0;
	--info-bg:               #e1fafc;
	--violet:                #80f;
	--grey-blue:             #069;

	--selected:    var(--tealish);
	--warning:     var(--tangerine);
	--type-review: var(--marigold);
	--type-test:   var(--aqua-marine);
	--type-story:  var(--tangerine);
	--type-news:       #4fdfd0;
	--type-pros-cons:  #b5cb74;
	--type-tech-specs: #7394cd;
	--type-user-menu:  var(--battleship-grey); /*#2e3d51;*/
	--type-ranking:    #ea5151;
	--type-by-model:   #000000;
	--type-about:      #aaee55;
	--checkbox-on: var(--tealish-dark);
	--checkbox-on-dark: var(--tealish-dark-two);
	--checkbox-off: var(--battleship-grey);
	--checkbox-off-dark: var(--battleship-grey-two);

	/* poměr stran obrázků */
	/* POZOR !!! - na Safari 9 a starším neumí použít zde uvedený calc(),
		 protože tato proměnná se používá v jiných calc() [a calc(calc()) už staré prohlížeče nezvládnou]
		 a je tedy nutno hodnotu přímo vyčíslit */
	--main-image-ratio: 1.5; /*calc(3 / 2);*/

	--width-multiplier: 1; /* u mobilu bude hodnota 1, pro tablet 2, pro desktop 3 - idea je, že se touto hodnotou bude moct přímo v CSS definicích násobit hodnoty závislé na zařízení */
	--type-banner-height: 40px; /* výška proužku s popisem typu článku nad nebo přes titulní obrázek */
	--rating-mini-height: 50px; /* výška malé verze proužku s hodnocením */
	--rating-maxi-height: 70px; /* výška velké verze proužku s hodnocením */
	--big-user-icon: 100px;
	--max-width: 1200px;  /* maximální šířka celé stránky */

	/* standardně používané zlomy - NEDÁ SE POUŽÍT V MEDIA-QUERIES :-( */
	/* --media-mobil-max:   "639px";
	--media-tablet-min:  "640px";
	--media-tablet-max:  "959px";
	--media-desktop-min: "960px"; */
	
	/* na některých stránkách používám nižší hladiny zlomu - NEDÁ SE POUŽÍT V MEDIA-QUERIES :-( */
	/* --media-mini-mobil-max:   "599px";
	--media-mini-tablet-min:  "600px";
	--media-mini-tablet-max:  "799px";
	--media-mini-desktop-min: "800px"; */

	--bar-height: 50px;
	--h1-font-size: 24px;
	--h2-font-size: 22px;
	--h3-font-size: 19px;
	--h4-font-size: 16px;
	--base-font-size: 16px;
	--h-padding: 10px;

	--hoverable: 0;
}
* {
	outline-color: var(--selected);
}
::placeholder {
  color: var(--pinkish-grey);
  opacity: 1; /* Firefox */
}

@media (hover: hover) {
	:root {
		--hoverable: 1;
	}
}

@media (min-width: 640px) {
	:root {
		--width-multiplier: 2;
		--bar-height: 70px;
		--base-font-size: 18px;
		--h1-font-size: 30px;
		--h2-font-size: 24px;
		--h3-font-size: 22px;
		--h4-font-size: 18px;
		--h-padding: 20px;
	}
}
@media (min-width: 960px), print {
	:root {
		--width-multiplier: 3;
	}
}