:root {
	--kb-background: #fffdf8;
	--kb-text: #1a1f26;
	--kb-cta: #c65a27;

	--kb-canvas: #fffdf8
	}


body {
	background-color: var(--kb-canvas);
	color: var(--kb-text);
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	margin: 0;
	padding: 0;
	}

header, main, footer, section,
h1, h2, h3, h4, h5, h6,
p, button, nav, ul {
	margin: 0;
	padding: 0;
	}


header {
	background-color: #eeece7;
	border-bottom: 1px solid #cccac5;
	margin: 0;
	margin-bottom: 1rem;
	padding: 0.2rem;
	}
header a {
	color: #1a1f26;
	text-decoration: none;
	}
header a:hover {
	color: #666434;
	}
header h1 {
	color: #1a1f26;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6rem;
	font-weight: 700;
	margin: 0;
	padding: 0.1rem;
	}



footer {
	background-color: var(--kb-background);
	margin: 0;
	margin-top: 2rem;
	padding: 0.5rem;
	}

footer div.version p {
	color: var(--kb-text);
	font-family: 'Roboto', sans-serif;
	font-size: 0.75rem;
	font-weight: normal;
	margin: 0;
	padding: 0;
	text-align: center;
	}

main {
	color: var(--kb-text);
	margin: 0;
	padding: 0.3rem;
	}

main section.block h1 {
	border-top: 2px solid #1a1f26;
	border-bottom: 2px solid #1a1f26;
	color: var(--kb-cta);
	font-family: Montserrat, sans-serif;
	font-size: 2.0rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	margin: 1rem 20% 2rem;
	padding: 0.2rem 0;
	text-align: center;
	text-transform: uppercase;
	}


section.card {
	border: 1px solid #c0c0c0;
	border-radius: 5px;
	margin-top: 1rem;
	margin-bottom : 1rem;
	}

section.card h1 {
	background-color: #f3f3f3;
	border-bottom: 1px solid #c0c0c0;
	border-radius: 5px 5px 0 0;
	margin-bottom: 0.4rem;
	padding: 0.6rem 1rem;
	text-align: left;
	}

div.navigation {
	margin: 0.8rem 1rem;
	text-align: center;
	}

section#advert-container {
	margin: 2rem 0 0.8rem;
	max-width: 100%;
	text-align: center;
	}

section#advert-container img {
	max-width: 100%;
	object-fit: scale-down;
	}

button,
a.button {
	background-color: #f3f3f3;
	border: 1px solid #293241;
	border-radius: 5px;
	color: #293241;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 700;
	margin: 0 0.1em;
	padding: 1px 4px 0;
	text-decoration: none;
	text-transform: uppercase;
	}

button {
	padding-bottom: 1px;
	}

button:hover,
a.button:hover {
//	border-color: #ff8c00;
	background-color: #ff8c00;
	color:  #fffbf7;
	cursor: pointer;
	}





/* ---- START OF MISCELLANEOUS STYLES ---- */

/* Tooltip container */
.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;

  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;

	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
	}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
	visibility: visible;
	}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.material-symbols-outlined {
	font-variation-settings:
		'FILL' 0,
		'wght' 400,
		'GRAD' 0,
		'opsz' 24
	}

/* ---- END OF MISCELLANEOUS STYLES ---- */