:root {
	--bs-font-sans-serif: Arial, "Helvetica Neue", sans-serif;

	--bs-body-font-size:  13px;
	--bs-body-line-height:  1.4rem;
	--bs-body-font-weight:  700;
	--bs-body-color: black;
	--bs-body-line-height:  20px;
	
	--karlkarl-link-color:  black; /* rgb( 36, 48, 48 ); */
	--karlkarl-link-color-hover:  rgba( 0,0,0,0.8 ); /* rgba( 36, 48, 48, 0.8 ); */
}

@font-face { font-family: Roboto; font-weight: 100; font-style: normal; src: url('fonts/Roboto-Thin.ttf') format('truetype'); }
@font-face { font-family: Roboto; font-weight: 100; font-style: italic; src: url('fonts/Roboto-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: Roboto; font-weight: 300; font-style: normal; src: url('fonts/Roboto-Light.ttf') format('truetype'); }
@font-face { font-family: Roboto; font-weight: 300; font-style: italic; src: url('fonts/Roboto-LightItalic.ttf') format('truetype'); }
@font-face { font-family: Roboto; font-weight: 400; font-style: normal; src: url('fonts/Roboto-Regular.ttf') format('truetype'); }
@font-face { font-family: Roboto; font-weight: 400; font-style: italic; src: url('fonts/Roboto-Italic.ttf') format('truetype'); }
@font-face { font-family: Roboto; font-weight: 500; font-style: normal; src: url('fonts/Roboto-Medium.ttf') format('truetype'); }
@font-face { font-family: Roboto; font-weight: 500; font-style: italic; src: url('fonts/Roboto-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: Roboto; font-weight: 700; font-style: normal; src: url('fonts/Roboto-Bold.ttf') format('truetype'); }
@font-face { font-family: Roboto; font-weight: 700; font-style: italic; src: url('fonts/Roboto-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: Roboto; font-weight: 900; font-style: normal; src: url('fonts/Roboto-Black.ttf') format('truetype'); }
@font-face { font-family: Roboto; font-weight: 900; font-style: italic; src: url('fonts/Roboto-BlackItalic.ttf') format('truetype'); }

header .collapse 	{ margin-top: auto;  }
header .navbar 	{ padding-bottom: 0px; }
header .nav-link { padding-bottom: 0px; }
.navbar-light .navbar-nav .nav-link { color:  black; }
main	{ min-height: calc( 100vh - 355px ); } 		/* 355px header + footer */
footer	{ font-weight: 400; }

a 			{ color: var(--karlkarl-link-color); text-decoration: none; }
a:hover 	{ color: var(--karlkarl-link-color-hover); text-decoration: underline; }

.project figure:hover img,
a:hover img 		{ filter: brightness(110%); cursor: pointer; }


.navbar-brand 		{ font-size: 1.45rem; font-weight: 700; line-height: 1.5rem; }
.navbar-brand:hover { text-decoration: none; }

.projectlist 		{ --bs-gutter-y: 12px; }
.projectlist figure { margin-bottom: 0px; }

h1, h2 					{ font-size: var(--bs-body-font-size); font-weight:  700; text-transform: uppercase; }

@media screen and (max-width: 991px) {
	.nav-item 			{ font-size: 18px; }
}

@media screen and (min-width: 992px) {
	.row 				{ --bs-gutter-x: 50px; }
	.projectlist 		{ --bs-gutter-y: 30px; }
	.project 	 		{ --bs-gutter-y: 30px; }
	header .collapse	{ margin-left: calc(var(--bs-gutter-x)/2); margin-right: -calc(var(--bs-gutter-x)/2); }
}

.btn-dark  				{ font-weight: bold; font-size: 13px; }
.btn-dark:hover			{ background: white; color: black; text-decoration: none; }

.contact 				{ font: bold 12px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif; }