/* CSS Document */

:root {
/* light contrast */
	--bxrad: 		15px;							/* box border radius */
	--bxpad: 		25px;							/* box padding */
	--bxmarg: 		50px;							/* box top-bottom margin */
	--bxback: 		rgba(0,0,0,0.85);				/* box background */
	--bxbrdr: 		dotted 1px rgba(255,255,255,0.25);	/* box border */
/* dark contrast */
	--bxbackw: 		rgba(0,0,0,0.75);				/* box dark background */
	--bxbrdrw: 		dotted 1px rgba(255,255,255,0.25);	/* box dark border */
	--bxcolorw: 	#fff;							/* box dark font color */			
}

* { scroll-margin-top: 200px !important; scroll-behavior: smooth; }

div.bbbl { 
	padding: var(--bxpad); 
	border-radius: var(--bxrad); 
	display: block;	clear: both;
	margin: 0 auto var(--bxmarg) auto;
	font-size: 1rem; 
	background: var(--bxback);
	color: inherit;	
	border: var(--bxbrdr);
	max-width: none;
	position: relative;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
	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(255,255,255,.28),
      rgba(255,255,255,.06),
      rgba(255,255,255,.22)
    );
  }
div.bbbl::after{
    content:"";
    position:absolute;
    right: -140px;
    top: -140px;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: radial-gradient(
      circle at center,
      rgba(242, 98, 36,.22),
      rgba(242, 98, 36,.10),
      rgba(0,0,0,0) 70%
    );
    pointer-events: none;
  }
div.bbbl .page-summary__title {
	text-transform: uppercase;
	letter-spacing: 0.125rem; 
	font-size: 0.65rem;
	border-bottom: var(--bxbrdr);
	padding: 5px 5px 15px 5px;
	display: block; color: var(--bxcolorw);
	font-variation-settings: "wght" 600;
}
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;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 5px;
}
div.bbbl li {
	position: relative;
	padding-left: 18px;
	font-size: 0.85rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
div.bbbl li::before{
	content:"";
	position:absolute;
	left: 0;
	top: .78em;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: rgba(242, 98, 36,.95);
	box-shadow: 0 0 0 3px rgba(242, 98, 36,.18);
}

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

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