:root{
  --bg: #d6d6d6;
  --text-main: #181818;
  --text-accent: #e10600; /* krvareni crveni akcenat */
  --muted: #c7c7c7;
  --ink: #0a0a0a;
  --red: #ff1111;
  --gap: 18px;
  --radius: 2px;
  --border-width: 4px;
  --max-width: 1100px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body {

	background-color: var(--bg);
	background-color: #e5e5f7;
opacity: 1;
background: 
  linear-gradient(135deg, #99999955 25%, transparent 25%) -10px 0/ 20px 20px, 
  linear-gradient(225deg, #999999 25%, transparent 25%) -10px 0/ 20px 20px, 
  linear-gradient(315deg, #99999955 25%, transparent 25%) 0px 0/ 20px 20px, 
  linear-gradient(45deg, #999999 25%, #e5e5e5 25%) 0px 0/ 20px 20px;
}
.container {	
	background: linear-gradient(to right top, 
	$scroller-color 50%, 
	$scroller-background 50%);
	background-size: 100% calc(100% - 100vh + #{$scroller-height}); 
	background-repeat: no-repeat;
}

.container:before {
	content:'';
	position: fixed;
	top: $scroller-height;
	bottom: 0;
	width: 100%;
	z-index: -1;
	background: $body-background;
}
.container {
	margin: 0 auto;
	max-width: 60vw;
	color: var(--paper);
	font-family: var(--mono);
	padding: 2rem;
}

.header {
}

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	border: 5px solid rgb(36, 36, 36);
	background: var(--muted);
	flex-wrap: wrap;
}

.navbar ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	flex-wrap: wrap;
}

.navbar ul li {
	margin-right: 1.3rem;
}

.navbar a, .navbar a:hover, .navbar a:active, .navbar a:target  {
	text-decoration: none;
}

.navbar a, .navbar h1 {
	font-family: var(--mono);
	color: var(--red);
	text-transform: uppercase;
}

.navbar h1 {
	filter: drop-shadow(3px 3px var(--ink));
}

.navbar ul a {
	font-size: 0.8rem;
	border: 3px solid red;
	background-color: whitesmoke;
	padding: 5px;
	transition-duration: 0.3s;
}

.navbar ul a:hover {
	color: var(--ink);
	text-decoration: underline;
	filter: drop-shadow(8px 8px);
}
.navbar ul a:active {
	text-decoration: dotted;
}

.block ul {
	list-style: none;
}


.block {
	margin-top: 2rem;
	padding: 1rem;
	border: 5px solid rgb(36, 36, 36);
	background: var(--muted);
	transition-duration: 0.3s;
}

.block:hover {
	filter: drop-shadow(8px 8px);
	transform: scale(1.01);
}

.text-center {
	text-align: center;
}

.block a {
	color:var(--ink);
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
	background-color: rgba(255,0,0,0.8);
	padding: 3px;
}

.block a:hover {
	text-decoration: underline;
}

.btn-cta {
	background-color: red;
	border: 1px solid black;
	text-transform: uppercase;
	margin: 0 auto;
	padding: 0.8rem 1.6rem;
}

.btn-cta a {
	text-decoration: none;
	color:black;
	width: 100%;
	height:100%;
	display: inline-block;
}

.btn-cta:hover {
	background-color: whitesmoke;
	color: red;
	transform: scale(1.1);
	mix-blend-mode: difference;
}

.btn-cta a:hover {
	color: red;
}

.footer {
}