body {font-family: sans-serif;text-shadow: 1px 1px black;color: white;background-color: black;background-image: url('/img/2026/backgrounds/dkpurple_lattice.png');}
.mySlides .ytSlides {display: none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}

.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 800px;
  box-shadow: 0px 0px 10px black;
}

.btb_bg {
		background-color: #2C2636;
}

.btb_showbtn {
		background-color: #493858;
		box-shadow: 1px -1px 1px 0px #E22000;
}

.youtube-container {
  width: 100%;
  aspect-ratio: 16 / 9; /* For a standard 16:9 widescreen video */
}

.youtube-container iframe {
  width: 100%;
  height: 100%;
}

#header_bg {
  position: relative;
  overflow: hidden;
}

/* Two layers stacked behind content */
#header_bg .bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 3s ease-in-out; /* fade duration */
  z-index: -1; /* behind content */
  pointer-events: none;
}

/* The visible layer */
#header_bg .bg-layer.visible {
  opacity: 1;
}

.mediaLink {
	background-color:none;
	width:100%;
	min-height:80px;
	margin:auto;
	text-align: center;
	padding:3px;
	display:flex;
	justify-content:center;
	flex-flow:row wrap;
	box-shadow:2 2 5;
}

.mediaLink a {
	display:inline-block;
	width:23%;
	min-width:150px;
	margin:3px;
}

.mediaLink a:hover div {
	background-color:white;
	box-shadow:2px 2px 5px #4FEC10;
}

.mediaLink a:active div {
	background-color:white;
	box-shadow:2px 2px 5px #4FEC10;
}

.mediaLink div{
	background-color:#F0F5FA;
	padding:10px;
	height:55px;
	border-radius:10px;
	box-shadow:2px 2px 5px black;
}

.mediaLink img{
	width:100%;
	max-height:80px;
}

.cdLinkDiv {
	position: fixed;
	z-index: 999;
	right:0px;
	top:50px;
}

.cdLink {
	text-decoration: none;
	position: fixed;
	z-index: 999;
	right:0px;
	top:50px;
	display:block;
}

.cdLink:hover {
	color: #ccc;
}

.cdLink div {
	border-radius:10px;
	box-shadow: 1px 1px 3px black;
	background-image: linear-gradient(#ccc, #444);
	width:250px;
	padding:0px;
	margin:0px 0px 0px auto;
	color:yellow;
	font-size:1em;
	
	
	
}

.cdLink div:hover {
	background-image: linear-gradient(#ccc, #223A5E);
	box-shadow: 1px 1px 5px black;
}

/* Make the custom element inline and vertically centered with text */
paypal-cart-button {
  display: inline-flex;        /* keep it inline, but able to center children */
  align-items: center;         /* vertical center */
  vertical-align: middle;      /* fallback for inline alignment */
  gap: 6px;                    /* small spacing if internal elements exist */
  margin-left: 6px;            /* space from preceding text */
  line-height: 1;              /* prevent extra vertical space */
}

/* safety: prevent default margins/padding from pushing it around */
paypal-cart-button, paypal-cart-button * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}