html{height:100%;}
body {background:url('bg.png');color:#96eefd;margin:0px;
font-family: Arial, Helvetica, sans-serif;}

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

.comicdate {background-color:#000000; color:#96eefd; 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: masterpiece;
  src: url(Masterpiece.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: masterpiece, sans-serif; font-size:2rem; color:#5ba5ce;}
#sitenav a:link {color:#96eefd !important;  text-decoration:none;}
#sitenav a:visited {color:#96eefd !important;  text-decoration:none;}
#sitenav a:hover {color:#96eefd !important;  text-decoration:none;}
#sitenav a:active {color:#96eefd !important;  text-decoration:none;}

#footer {text-align:center; padding:0px; background-color:#000000;
padding:5px; font-size:0.8rem; color:#5ba5ce;}

/*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:#96eefd; font-size:smaller; text-align:center;}


/*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 */}