:root {
	--var_font_boja: #f67;
}

#clanak_tekst img {
	max-width:  200px;
	border:     none;
	box-shadow: none;
}

.kategorija_fontova_primer {
	margin-top:    1rem;
	margin-bottom: 1rem;
}

#kategorija_fontova_primer_01 {
	width: 190px;
}

#kategorija_fontova_primer_02 {
	width: 120px;
}

#kategorija_fontova_primer_03 {
	width: 160px;
}

#kategorija_fontova_primer_04 {
	width: 140px;
}

#kategorija_fontova_primer_05 {
	width: 160px;
}

.primer_mono_proporcionalni {
	width:  160px;
	margin: 0.618rem 0 1rem 0;
}

#fontovi_primer_div {
	background:    #40404c;
	padding:       16px 20px 12px 20px;
	margin:        0 0 24px 0;
	border-radius: 8px;
}

/* #fontovi_primer_div_klizaci { */
/**/
/* } */

#fontovi_primer_div_klizaci fieldset{
	padding: 8px 0 24px 8px;
	margin:  0 0 8px 0;
	border: solid 1px #a0a0a0;
	border-radius: 12px;
}

#fontovi_primer_div_klizaci legend{
	padding: 0 4px 0 4px;
	margin:  0 0 0 10px;
	color:   #b6cce8;
}

#fontovi_primer_div_klizaci label{
	color:  #fff;
	margin: 0 4px 0 4px;
}

#fontovi_primer_div_klizaci input[type="range"] {
	appearance: none;
	height:     2px;
	cursor:     pointer;
}

#fontovi_primer_div_klizaci input[type="range"]::-moz-range-thumb {
	appearance: none;
	background: #40404c;
	border:     solid 3px #fff;
	height:     16px;
	width:      16px;
	border-radius: 12px;
}

#fontovi_primer_div_h1 {
	color:       #588ed5;
	text-align:  left;
	font-family: OpenSans-Regular, Arial, sans-serif;
	font-weight: bold;
	font-size:   24pt;
	margin:      4px 0 12px 0;
}

#fontovi_primer_div_p {
	color: #fff;
	text-align: left;
	font-size:   12pt;
}

#fontovi_primer_div_code {
	text-align: left;
	color: #fbb64e;
	font-size:   11pt;
	tab-size:    4;
}

.slika_aside {
	margin-bottom: 1em;
	max-width:     160px;
}

@font-face {
	font-family:  'RobotoFlex-Variable';
	src:          url('../../fontovi/RobotoFlex-Variable.ttf') format('truetype');
	font-weight:  100 900;
	font-display: swap;
}

.var_primer_clanak_inline {
	font-family:   RobotoFlex-Variable, OpenSans-Variable, sans-serif;
	font-size:     1.27rem;
	margin-bottom: 0.5rem;	
	color:         #f67;
	color:         var(--var_font_boja);
}

#var_font_primer_legend {
	padding: 0 4px 0 4px;
}

#var_font_primer_tekst {
	font-family: RobotoFlex-Variable, OpenSans-Variable, sans-serif;
	color:         #f67;
	color:         var(--var_font_boja);
	margin-bottom: 1rem;
	font-size:     5rem;
	font-weight:   150;
	font-variation-settings: "slnt" 0, "wdth" 100;
	word-break:    break-word;
}

#var_font_primer_okvir {
	padding:       16px;
	border-radius: 4px;
	margin-bottom: 1.12rem;
	border:        solid 1px #bbb;
}

#var_font_primer_css_pre {
	/* font-family: Inconsolata-Variable, monospace; */
	margin-top:  1rem;
	white-space: break-spaces;
	word-break:  break-word;
}

#var_font_primer_code {
	border-radius: 4px;
	background:    #313444;
	color:         #fff;
	width:         100%;
	padding:       0 1.618rem 0 1.618rem;
	tab-size:      4;
	-moz-tab-size: 4;
}

.var_font_primer_klizac {
	width: 100%;
}

table {
	margin-bottom: 1.12rem;
}

tr {
	font-weight: 300;
}

td {
	font: inherit;
}

td+td {
	padding-left: 8px;
}

/* ------------------------------ */
/* ---       RESPONSIVE      ---- */
/* ------------------------------ */

@media only screen and (min-width: 300px) {
	#clanak_tekst img {
		max-width: 240px;
	}

	article li img {
		max-width: 240px;
	}

	.slika_aside {
		max-width: 200px;
	}

	.primer_mono_proporcionalni {
		width: 200px;
	}
}

@media only screen and (min-width: 360px) {
	.slika_aside {
		max-width: 240px;
	}

	#kategorija_fontova_primer_01 {
		width: 200px;
	}

	#kategorija_fontova_primer_02 {
		width: 140px;
	}

	#kategorija_fontova_primer_03 {
		width: 180px;
	}

	#kategorija_fontova_primer_04 {
		width: 160px;
	}

	#kategorija_fontova_primer_05 {
		width: 205px;
	}

	.primer_mono_proporcionalni {
		width: 240px;
	}
}

@media only screen and (min-width: 768px) {
	#clanak_tekst img {
		max-width: auto;
	}

	.slika_aside {
		max-width: 320px;
	}

	#kategorija_fontova_primer_01 {
		width: 220px;
	}

	#kategorija_fontova_primer_02 {
		width: 170px;
	}

	#kategorija_fontova_primer_03 {
		width: 220px;
	}

	#kategorija_fontova_primer_04 {
		width: 190px;
	}

	#kategorija_fontova_primer_05 {
		width: 240px;
	}

	.primer_mono_proporcionalni {
		min-width: 260px;
	}
}