/* CSS Document */

:root {
	
	--themergb: 	32, 86, 216;
/* light contrast */
	--bxrad: 		2px;							/* box border radius */
	--bxpad: 		25px;							/* box padding */
	--bxmarg: 		30px auto 30px auto;							/* box top-bottom margin */
	--bxback: 		linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);				/* box background */
	--bxbrdr: 		dotted 0 rgba(255,255,255,0);	/* box border */
	--bxcolor: 		#222;
/* dark contrast */
	--bxbackw: 		linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);				/* box dark background */
	--bxbrdrw: 		dotted 0 rgba(255,255,255,0);	/* box dark border */
	--bxcolorw: 	#222;							/* box dark font color */			
}

* { scroll-margin-top: 200px !important; scroll-behavior: smooth; }
:target:before {
content: "";
display: none;
height: auto;
margin: auto;
}

div.bbbl { 
	padding: var(--bxpad); 
	border-radius: var(--bxrad); 
	display: block;	clear: both;
	margin: var(--bxmarg);
	font-size: 1rem; 
	background: var(--bxback);
	color: var(--bxcolor);
	border: var(--bxbrdr);
	max-width: none;
	position: relative;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .15);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	overflow: hidden;
}
div.bbbl::before {
	content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 5px;
    width: 100%;
    background: linear-gradient(90deg, rgba(var(--themergb), 1) 0%, rgba(var(--themergb), 0.5) 70%, rgba(var(--themergb), 0) 100%);
	border: 0;
}
div.bbbl::after {
    content: "";
    position: absolute;
    right: -180px;
    top: -180px;
    width: 360px;
    height: 360px;
    border-radius: 999px;
    background: radial-gradient(circle at center, rgba(var(--themergb), 0.18), rgba(var(--themergb), 0.08), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    opacity: .9;
}
div.bbbl .page-summary__title {
	text-transform: uppercase;
	letter-spacing: 0.125rem; 
	font-size: 0.85rem;
	border-bottom: var(--bxbrdr);
	padding: 5px 5px 15px 5px;
	display: block; 
	font-variation-settings: "wght" 600;
	font-weight: bold;
}
div.bbbl li { /*padding: 5px 0; line-height: 1.25;*/ }

.whitetxt div.bbbl { background: var(--bxbackw); color: var(--bxcolorw); border: var(--bxbrdrw); }
.whitetxt div.bbbl:before { border-bottom: var(--bxbrdrw) }

div.bbbl ul {
	margin: 8px 0 0 0 !important;
	padding: 0 !important;
	list-style: none;
	display: grid;
	gap: 5px;
}
div.bbbl li {
	position: relative;
	padding: 3px 0 3px 18px !important;
	margin: 0 0 0 10px !important;
	font-size: 0.85rem;
	line-height: 1.25 !important; 
	text-shadow: none;
}
div.bbbl li::before{
	position: absolute !important;
    left: 0 !important;
    top: .75em !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: rgba(var(--themergb), 1) !important;
    box-shadow: 0 0 0 3px rgba(var(--themergb), .18) !important;
    content: "" !important;
    padding: 0 !important;
    margin: 0 !important;
}

div.bbbl a{
	font-weight: 700; color: rgba(var(--themergb), 1) !important;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
div.bbbl a:hover{ 
	color: rgba(var(--themergb), 1);
	border-bottom-color: rgba(var(--themergb),.5);
}

@media (max-width: 680px){
div.bbbl{
  padding: 16px 14px;
  border-radius: var(--bxrad);
  backdrop-filter: blur(8px);
}
div.bbbl li{
  font-size: 15px;
}
}