@font-face { font-family: 'Inter'; src: url(webfonts/Inter-Light.woff2) format('woff2'); font-weight: 300; font-style: normal }
@font-face { font-family: 'Inter'; src: url(webfonts/Inter-ExtraBold.woff2) format('woff2'); font-weight: 800; font-style: normal }
@font-face { font-family: 'IBM Plex Serif'; src: url(webfonts/IBMPlexSerif-Regular.woff2) format('woff2'); font-weight: 400; font-style: normal }
@font-face { font-family: 'IBM Plex Serif'; src: url(webfonts/IBMPlexSerif-Bold.woff2) format('woff2'); font-weight: 700; font-style: normal }
@font-face { font-family: 'IBM Plex Serif'; src: url(webfonts/IBMPlexSerif-Italic.woff2) format('woff2'); font-weight: 400; font-style: italic }
@font-face { font-family: 'IBM Plex Serif'; src: url(webfonts/IBMPlexSerif-BoldItalic.woff2) format('woff2'); font-weight: 700; font-style: italic }

body { font-family: 'IBM Plex Serif', 'Times New Roman', Times, serif !important; padding-top: 100px }

h1, h2, h3, h4, h5, h6 { font-family: 'Inter', Helvetica, Arial, sans-serif !important }
h1 { font-weight:bold }

@media screen {
	body {
		background-image: 
			linear-gradient(rgba(255, 255, 255, 0.01), rgb(255, 255, 255) 85%), 
			radial-gradient(at left top, rgba(82, 183, 193, 0.5), transparent 50%), 
			radial-gradient(at right top, rgba(45, 60, 75, 0.5), transparent 50%), 
			radial-gradient(at left center, rgba(45, 60, 75, 0.5), transparent 50%);
		background-repeat: no-repeat;
		background-size: 100% 500px
	}
}

@media (prefers-color-scheme:dark) {
	body {
		background-image: 
			linear-gradient(rgba(33, 37, 41, 0.01), rgb(33, 37, 41) 85%), 
			radial-gradient(at left top, rgba(82, 183, 193, 0.5), transparent 50%), 
			radial-gradient(at right top, rgba(45, 60, 75, 0.5), transparent 50%), 
			radial-gradient(at left center, rgba(45, 60, 75, 0.5), transparent 50%);
		background-color: #212529
	}
	.mflogo-flow { font-weight:300; color:#fff !important }
	.table-primary { --bs-table-bg: #343a40; --bs-table-color: rgba(173, 181, 189, 0.75) }
}




article p:first-child::first-letter {
  padding: 0 .3rem;
  margin: 0 .3rem 0 0;
  font-size: 4rem;
  float: left;
  line-height: 1;
}


nav .active { font-weight:bold }


.navbar { background-color: #52b7c1; box-shadow:0 0 14px 0 #2d3c4b; font-family: 'Inter' }
.navbar-dark { --bs-navbar-color:#FFF }

.table-mini-button { --bs-btn-font-size: .75rem; --bs-btn-padding-y: 0; --bs-btn-padding-x: .7rem }
.table-mini-button2 { --bs-btn-font-size: .75rem; --bs-btn-padding-y: 0; --bs-btn-padding-x: .25rem }

.avatar { display: inline-block; text-align: center; background-color: #424242; margin-left:.1rem; transition: transform .2s }
.avatar a, .avatar span { text-decoration: none; color: #fff }
.avatar:hover { box-shadow: rgba(0, 0, 0, 0.88) 0px 1px 4px, var(--bs-secondary) 0px 0px 0px 2px; transform: scale(1.08) translateY(-.13rem); font-weight: bold }
.avatar-small { height: 2rem; width: 2rem; line-height:2rem; font-size:.8rem }
.avatar-large { height: 3rem; width: 3rem; line-height:3rem; font-size:1.3rem }
.avatar-huge { height: 7rem; width: 7rem; line-height:7rem; font-size:3.3rem }
.avatar-round { border-radius: 50% }
.avatar-square { border-radius: 0 }
.avatar-leaf { border-radius: 50% 0 50% 0 }
.avatars-padded .avatar { margin:0 .16rem .3rem .16rem }

a.search-result-link { text-decoration: none }
a.search-result-link:hover { text-decoration: underline }

a.anchor { display: block; position: relative; top: -50px; visibility: hidden }

td .null { font-size:.8rem; color:#b2b2b2 }

.btn-flow, .btn-flow:focus { border-color:#E83181; color:#E83181 }
.btn-flow:hover { border-color:#b52664; color:#b52664 }

.hoverableTweet:hover { background-color:var(--bs-tertiary-bg) }