body {
    margin: 0;
    font-family: Bahnschrift, sans-serif;
	color: white;
    
	
	/* Base background that will be visible behind the center panel gaps */
	background-image: url("assets/background/transparent_static.gif");
	background-color: #4b3350;
	background-repeat: repeat;
	background-position: left top;

}



/* This is using the coral red for the links */
a {
    color: #ff4f3a;
}

a:hover {
    color: #ff7a66;
}





.site-header {
    padding: 20px;
    text-align: center;

}



.layout {
	
    display: grid;
    grid-template-columns: 1fr min(90%, 1100px) 1fr;
    gap: 15px;
    padding: 20px;
    align-items: start;

}

.sidebar {
	background: transparent;
	margin-top: 200px;
}

.content {
	background: transparent;

}

.content-panel {
	 

	background: #55627d;       /* your middle color */
	border: 2px solid white; /* optional */
	padding: 15px;

	/* Separation from top and bottom */
	margin-top: 30px;
	margin-bottom: 30px;
}




.box {
	 
	background: #48546e;
	border: 2px solid white;
	padding: 15px;
	margin-bottom: 15px;

}

.box h2, .box h3 {
    margin-top: 0;
}



















/* this is the vic romano and the kenny blankenship
/* Container that stays fixed at bottom, on top of the page */
.bottom-float {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  pointer-events: none; /* clicks go through to the page */
  z-index: 9999; /* ensure it sits above everything */
}

/* Shared image styling */
.bottom-img {
  position: fixed;
  bottom: 0;
  max-height: 250px; /* adjust */
  width: auto;
}

/* One on bottom-left */
.bottom-img.left {
  left: 0;
}

/* One on bottom-right */
.bottom-img.right {
  right: 0;
}






/* styling for the webring box */

.webring-box a {
	display: inline-block;     /* or block if stacked vertically */
	line-height: 0;
	font-size: 0;              /* nukes any leftover inline spacing */
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	text-decoration: none;
	vertical-align: top;
}

.webring-box img {
	display: block;
	width: 88px;
	height: 31px;
	border: 0;
}


.livestream-box {
	
	text-align: center;
}

.half-box {
	padding: 6px;            /* smaller padding than normal boxes */
	display: flex;
	align-items: center;
	justify-content: center;
}

.half-box img {
	
	
	display: block;          /* removes inline baseline gap */
	max-width: 100%;         /* prevents overflow */
	height: auto;            /* keeps aspect ratio */
}

.box-row {
    display: flex;
    gap: 10px;
}

.box-row .half-box {
    flex: 1;
}







/*This is some stuff from chatgpt. once the page is a certain # of pixels wide it will switch to a vertical layout  */

/* Make widths behave predictably when padding is involved */
* { box-sizing: border-box; }

/* Let sidebar boxes shrink instead of forcing a width */
.sidebar .box { width: 100%; }

/* Mobile and narrow screens */
@media (max-width: 1500px) {
  .layout {
    grid-template-columns: 1fr;   /* stack everything */
    padding: 12px;
    gap: 12px;
  }

  /* Put the center content first, then sidebars */
  .content { order: 1; }
  .layout > .sidebar:first-of-type { order: 2; }
  .layout > .sidebar:last-of-type  { order: 3; }

  /* Remove the manual vertical offset on sidebars (if you added one) */
  .sidebar { margin-top: 0; }

  /* Make the center panel not waste space on small screens */
  .content-panel {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  /* Optional: keep your logo from overflowing */
  .site-header img {
    max-width: 100%;
    height: auto;
  }
}