html{height:100%;}
body {background-color:#000000;color:#eeee22;margin:0px;background-image: url("images/TRbgnew1-1.png"); background-size:50%;
font-family: Arial, Helvetica, sans-serif;}

/*text layouts*/
p {font-family: Arial, Helvetica, sans-serif;}

.comicdate {background-color:#000000; color:#eeee22; font-size:smaller; text-align:center;padding:5px;}
#lowertext {padding:10px;}
#comiclinks {margin-left:20px; padding-bottom:20px;}

.blackbox {text-align:center; padding:0px; background-color:#000000;
padding:20px; margin-top: 1.5em; margin-bottom: 1.5em;
width: 95%; margin-left: auto; margin-right: auto; border-radius: 15px;}

@font-face {
  font-family: impact;
  src: url(impact.ttf); 
}
 /* unvisited link */
a:link {
  color: be9ae2 ;
}

/* visited link */
a:visited {
  color: 9963cf ;
}

/* mouse over link */
a:hover {
  color: 642f99;
}

/* selected link */
a:active {
  color: blue;
} 

#sitenav {text-align:center; padding:0px; background-color:#000000;
padding:20px; margin-top: 0.5em; 
font-family: impact, sans-serif; font-size:2rem; color:#999900;}
#sitenav a:link {color:#eeee22 !important;  text-decoration:none;}
#sitenav a:visited {color:#eeee22 !important;  text-decoration:none;}
#sitenav a:hover {color:#eeee22 !important;  text-decoration:none;}
#sitenav a:active {color:#eeee22 !important;  text-decoration:none;}

/*section layouts*/
#title {text-align:center; height:93px; padding:0px; margin:0px; width:100%}
.nav {text-align:center; width:100%; background-color:#000000}
.nav img {padding:10px;}

#content { width:100%; align:center;
  margin: auto; padding-top:5px;}

#comic {position:relative; top:0px; left: 0px; text-align:center;}
img.centered{    display: block;
    margin-left: auto;
    margin-right: auto}
	
#bottomtext {background-color:#000000; color:#eeee22; font-size:smaller; text-align:center;}

#yapgallery img{max-width: 200px; padding:2px;}

/*responsive two column layout*/

.container {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.column {
  flex: 1 1 0;
  min-width: 0; /* VERY IMPORTANT */
  padding: 20px;
  background: #000000;
  border-radius: 15px;
}

/*little boxes that were created for wallpaper but can be used for whatever. 
if you want it to flex with other elements (columns) nest it in a wallpaper-row, otherwise use as-is*/
.wallpaper-row {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.wallpaperbox {
  padding-left:10px;
  padding-right:10px;
  background: transparent;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  font-size: 18px;
  text-align:center;
  flex: 1 1 200px; /* !!!this will auto-resize images to a minimum of 200px before wrapping!!! */
  min-width: 0;
}
.wallpaperbox img {
  max-width: 100%;
  height: auto;
  display: block;
}
.column > .container {
  flex-wrap: wrap;
}

/* Stack columns on smaller screens */
@media (max-width: 768px) {
  .container {
	flex-direction: column;
  }
}


/*pushes down the footer. that's it!*/
body {min-height: 100vh; /* Ensure body takes at least viewport height */
  display: flex;
  flex-direction: column; /* Stack children vertically */}

/*footer that stays at the bottom of the page*/
#content {
  flex: 1; /* Critical: Takes remaining space, pushing footer down */}