@charset "UTF-8"; 

:root {
    --bear-background: #f0f0f0;
    --bear-separation: #d0d0d0;
    --bear-highlight: #d9230f;
    --bear-foreground: #212529;
    --bear-foreground-faded: #585b5e;

    --bear-body-font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --bear-monospace-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;

    scroll-behavior: smooth;

    --bear-footer-height: 2.5rem;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bear-background: #212529;
        --bear-separation: #404040;
        --bear-highlight: #d9230f;
        --bear-foreground: #f0f0f0;
        --bear-foreground-faded: #c0c0c0;
    }

}

.navbar {
    color: var(--bear-foreground);
    background: var(--bear-separation);
}

.text-muted {
  color: var(--bear-foreground-faded) !important;
}

body {
    font-family: var(--bear-body-font-family);
    margin: 0;
    font-size: var(--bear-font-size);
    font-weight: 400;
    line-height: 1.5;
    color: var(--bear-foreground);
    background: var(--bear-background);
}

.banner_img {
	width: 100% !important;
	vertical-align: middle;
}

.page_container {
	position: relative;
	min-height: 100vh;
}

blockquote {
    background: var(--bear-separation);
}

main {
	padding-bottom: var(--bear-footer-height);
}

footer {
    color: var(--bear-foreground);
    background: var(--bear-separation);
	position: absolute;
	bottom: 0;
	width: 100%;
	height: var(--bear-footer-height);
}

.navbar_links{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    list-style: none;
	align-items: center;
}


.nav_item {
	padding: 5px;
	margin-top: 10px;
	font-weight: bold;
	text-align: center;
}

.pagination {
    display: flex;
    list-style: none;
}

.tag_box {
    margin-right: 0.25em;
}

.container {
	max-width: 1320px;
}

.section_header {
    text-transform: uppercase !important;
    font-weight: 700 !important;
    margin-top: 3rem !important;
    border-bottom: 3px solid var(--bear-highlight) !important;
    font-size: calc(var(--bear-font-size) * 1.5);
    margin-bottom: 0.5rem;
    line-height: 1.2;
    color: var(--bs-heading-color);
    box-sizing: border-box;
}

.row div {
	margin: 1em;
}

.md_page_block {
	margin: 1em;
}

.page_title {
	font-size: calc(var(--bear-font-size) * 2.5);
}

.page_tags {
	font-size: calc(var(--bear-font-size) * 0.75);
}

.tags_table th {
    text-align: left;
}

.author_link {
	text-decoration: none;
}

.author_box {
	min-height: 7rem;
    border-top: 3px solid var(--bear-highlight) !important;

}

.author_image {
	margin-left: 0 !important;
}

.author_image img {
	max-width:100%;
	max-height:100%;
}

code {
  font-family: var(--bear-monospace-font-family);
  word-wrap: break-word;
}

.row {
  display: flex;
  flex-wrap: nowrap;
}

a.nav_link:link {
	color: var(--bear-foreground);
	text-decoration: none;
	font-style: italic;
}
a.nav_link:visited {
	color: var(--bear-foreground);
	text-decoration: none;
	font-style: italic;
}
a.nav_link:hover {
	color: var(--bear-foreground);
	text-decoration: underline;
	font-style: italic;
}
a.nav_link:active {
	color: var(--bear-foreground);
	text-decoration: none;
	font-style: italic;
} 


a.home_link:link {
	color: var(--bear-foreground);
	text-decoration: none;
}
a.home_link:visited {
	color: var(--bear-foreground);
	text-decoration: none;
}
a.home_link:hover {
	color: var(--bear-foreground);
	text-decoration: underline;
}
a.home_link:active {
	color: var(--bear-foreground);
	text-decoration: none;
} 

.card_title_link {
	font-size: calc(var(--bear-font-size) * 1.5);
}
a.int_link:link {
	color: var(--bear-foreground-faded);
	text-decoration: none;
}
a.int_link:visited {
	color: var(--bear-foreground-faded);
	text-decoration: none;
}
a.int_link:hover {
	color: var(--bear-foreground-faded);
	text-decoration: none;
}
a.int_link:active {
	color: var(--bear-foreground-faded);
	text-decoration: none;
} 

a.author_link:link {
	color: var(--bear-foreground-faded);
	text-decoration: none;
}
a.author_link:visited {
	color: var(--bear-foreground-faded);
	text-decoration: none;
}
a.author_link:hover {
	color: var(--bear-foreground-faded);
	text-decoration: underline;
}
a.author_link:active {
	color: var(--bear-foreground-faded);
	text-decoration: none;
} 

footer a:link {
	color: var(--bear-foreground);
	text-decoration: none;
	font-style: italic;
}
footer a:visited {
	color: var(--bear-foreground);
	text-decoration: none;
	font-style: italic;
}
footer a:hover {
	color: var(--bear-foreground);
	text-decoration: underline;
	font-style: italic;
}
footer a:active {
	color: var(--bear-foreground);
	text-decoration: none;
	font-style: italic;
} 

a.tag_link:link {
	color: var(--bear-foreground-faded);
	text-decoration: none;
}
a.tag_link:visited {
	color: var(--bear-foreground-faded);
	text-decoration: none;
}
a.tag_link:hover {
	color: var(--bear-foreground-faded);
	text-decoration: underline;
}
a.tag_link:active {
	color: var(--bear-foreground-faded);
	text-decoration: none;
} 


.card {
	position: relative;
	display: flex;
	flex-direction: row;
	min-width: 0;
	word-wrap: break-word;
	background-clip: border-box;
	flex-wrap: nowrap;
	margin-left: 0px !important;
	margin-bottom: 0px !important;
}
.card-body {
  flex: 1 1 auto;
}

.card_title {
	margin: 0;
}

.card_text {
	margin: 0;
}

.card_img_block {
	width: 30%;
    flex: 0 0 auto;
	margin-left: 0px !important;
	margin-bottom: 0px !important;
	margin-right: 0px !important;
}
.card_img {
	width: 100%;
    flex: 0 0 auto;
}
.card_text_w_img {
	width: 70%;
    flex: 0 0 auto;
	margin-bottom: 0px !important;
    margin-left: 1rem;
}
.card_text_no_img {
	width: 70%;
    flex: 0 0 auto;
	margin-left: 0px !important;
	margin-bottom: 0px !important;
}

/* Column widths for various screen sizes.
 * Default to 1-% width per size increment (set in the content/_index.md fromt-matter)
 * But fling that away and go full width for small screens.
 * */

@media all and (min-device-width: 900px) and (orientation: landscape) {
    :root {
        --bear-font-size: 120%;
    }
    main {
        margin-left: 3rem;
        margin-right: 3rem;
    }

    .section {
        flex-direction: row;
    }

	.col-md-1 {
		flex: 0 0 auto;
		width: 10%;
	}
	
	.col-md-2 {
		flex: 0 0 auto;
		width: 20%;
	}
	
	.col-md-3 {
		flex: 0 0 auto;
		width: 30%;
	}
	
	.col-md-4 {
		flex: 0 0 auto;
		width: 40%;
	}
	
	.col-md-5 {
		flex: 0 0 auto;
		width: 50%;
	}
	
	.col-md-6 {
		flex: 0 0 auto;
	   	width: 60%;
	}
	
	.col-md-7 {
		flex: 0 0 auto;
		width: 70%;
	}
	
	.col-md-8 {
		flex: 0 0 auto;
		width: 80%;
	}
	
	.col-md-9 {
		flex: 0 0 auto;
		width: 90%;
	}
	
	.col-md-10 {
		flex: 0 0 auto;
		width: 100%;
	}
} /* end full sized screen */

@media (max-device-width: 899px) or  (orientation: portrait) {
    :root {
        --bear-font-size: 160%;
    }
    main {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .section {
        flex-direction: column;
    }

	.col-md-1 {
		flex: 0 0 auto;
		width: 90%;
	}
	
	.col-md-2 {
		flex: 0 0 auto;
		width: 90%;
	}
	
	.col-md-3 {
		flex: 0 0 auto;
		width: 90%;
	}
	
	.col-md-4 {
		flex: 0 0 auto;
		width: 90%;
	}
	
	.col-md-5 {
		flex: 0 0 auto;
		width: 90%;
	}
	
	.col-md-6 {
		flex: 0 0 auto;
	   	width: 90%;
	}
	
	.col-md-7 {
		flex: 0 0 auto;
		width: 90%;
	}
	
	.col-md-8 {
		flex: 0 0 auto;
		width: 90%;
	}
	
	.col-md-9 {
		flex: 0 0 auto;
		width: 90%;
	}
	
	.col-md-10 {
		flex: 0 0 auto;
		width: 90%;
	}
} /* end small screen */