/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
/* 
default font by Darren Embry:
https://webonastick.com/fonts/old-timey-mono/ 
*/
@font-face 
{
  font-family: "Old Timey Code";
  src: url("/fonts/OldTimeyCode.ttf") format("truetype");
}

body 
{
  background-color: #111111;
  color: #eeeeee;
  padding-top: 15px;
    margin-top:0;
  font-family: "Old Timey Code", "Courier New", monospace;
  line-height: 175%;
}

body.light-mode 
{
 background-color: #ffffff;
  color: #000000; 
}
.light-mode h1, .light-mode h2, .light-mode h3{
  color: #666666;
}


footer {text-align: center;}

a{color: #3399ff;}
a:visited{color: #ff33ff;}
a:hover, a:focus{color: #33ff33;}
a:active{color: #ff9933;}


h1, h2, h3, h4 { line-height: 140%; }

code 
{
  color:#33ff33;
  font-size:120%;
  font-family: "Old Timey Code", "Courier New", monospace;
}

select, input, button, textarea, pre
{
  font-family: "Old Timey Code", "Courier New", monospace;
}
select, input, button, textarea
{
  font-size:120%;
  background :#333333;
  color:white;
}

a 
{
  font-size:120%; 
  font-weight:bold;
}

a:has[target]
{
  font-size:110px;
}

s 
{
  font-size: 90%; 
  opacity: 80%;
}

s a 
{
  font-size:100%;
} 	 
 
figcaption 
{
  font-size: 80%;
}
 
img[src*="gif"],
.pixel 
{
	image-rendering: pixelated;
}

.zoom:hover 
{
   transform:scale(2);
}

h1:first-child ,
h2:first-child ,
h3:first-child  
{
   margin-top:0;
}
 
ul 
{
    padding-left:2em;   
}

/* jump menus */
.jumpMenus
{
  display:flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.jumpMenus select
{
  background :#333333;
  color:white;
  font-size : 110%;
}

/*page notes*/
 
 .pagenotes
{
  padding: 0 10px; 
  margin:0 0 8px 0;
  border: 2px dotted silver; 
  border-width:0 0 2px 0;
  float:right;
  margin-top:-15px;
}

.pagenotes:has(details[open]) 
{
  margin-bottom: 20px;
}

.pagenotes summary 
{
  text-align: right;
}

.pagenotes details[open] summary
{
  text-align: left;
}

.pagenotes details[open] 
{
  padding :20px 10px;
 /* width:100%;*/
 float: none;
}