/* nejsme vcerejsi, pouzivame moderni box model */
html { box-sizing: border-box; }
*, :after, :before { box-sizing: inherit; }


body {
	margin: 0;
	padding: 30px;
	font-family:  'Alice', serif;
	font-size: 18px;
	line-height: 1.5;
}

h1, h2, h3 {
	font-family: 'Kaushan Script', cursive;
	font-weight: normal;
	margin: 0;
}

blockquote {
	font-family: 'Kaushan Script', cursive;
}

/* --------------------------------------------------- */

/* barvy */
:root {
	--svetla: #edf3f5;
	--seda: #b2bec3;
	--tmava: #636e72;
	--oranzova: #ee5a24;
	--cervena: #ea2027;
	--zluta: #f79f1f;
	--zelena: #a3cb38;
	--limetka: #c4e538;
}

/*
	Všimni si, jak jsou zde nadefinované barvy.
	Potřebný kód barvy si odtamtud můžeš vyzobnout a použít
	ve svém kódu, ale existuje i lepší způsob.

  CSS custom properties, někdy také označované jako CSS
	variables (CSS proměnné), je způsob, jak si	pojmenovat
	nějakou hodnotu a potom ji v kódu opakovaně používat.
	Často se používá právě pro barvy a další "nastavení".

	Když si chci nějakou hodnotu nadefinovat, použiji zápis
	--mujnazev: hodnota
	Když chci, abych mohl hodnotu používat všude v CSS,
	založím ji uvnitř selektoru :root, takže např.:
	:root {
		--mojebarva: #ff8800;
	}

	Chci-li potom dál v CSS hodnotu použít, stačí použít funkci var a v závorce název proměnné.Např.:
	.odstavec {
		color: var(--mojebarva);
	}

	Nemusím si tak pamatovat kódy barev nebo neustále v CSS jezdit nahoru a dolů, abych si je odněkud zkopíroval.

	Více o CSS custom properties:
	- https://www.w3schools.com/css/css3_variables.asp
	- https://css-tricks.com/patterns-for-practical-css-custom-properties-use/
	- https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/
*/




.blog{
	display: grid;
	grid-template-columns: 1fr 4fr 2fr;
	/* grid-template-rows: auto; */
	column-gap: 40px;
}

header{
	grid-column: 2 / 3;
}

h1{
	font-size: 80px;
	color: var(--zelena);
	margin-bottom: 50px;
}

h2{
	grid-column: 2 / 3;
	color: var(--limetka);
	font-size: 50px;
}

p{
	grid-column: 2 / 3;
}

.tip-vlevo{
	grid-column: 1 / 2;
	text-align: right;
}

.tip-vlevo img{
	width: 150px;
}

figure{
	grid-column: 1 / -1;
	margin: 0;
}

figure img{
	width: 100%;
	height: 550px;
	object-fit: cover;
}

figcaption{
	color: var(--seda);
}

.tip-vpravo{
	grid-column: 3 / 4;
}

blockquote{
	grid-column: 1 / -1;
	text-align: center;
	font-size: 40px;
	color: var(--seda);
}

footer{
	grid-column: 2 / 3;
	color: var(--seda);
}

footer a {
	color: var(--seda);
}

.tip a {
	color: var(--oranzova);
}

.tip p{
	background-color: var(--svetla);
	padding: 10px;
	border-right: 4px solid var(--zluta);
	margin: 0;
}


.tip-palacinky{
	background-color: var(--svetla);
	padding: 10px;
	border-right: 4px solid var(--zluta);	
	max-height: max-content;
}

blockquote::after, blockquote::before{
	content:"";
	display: block;
	height: 3px;
	width: 100px;
	background-color: var(--limetka);
	margin: 10px auto;
}