/************************************************************************
*	styles.css —  Global styling for the 7wb,xxx domains.
*	---
*	Styles for apps in the 7wb.xxx domains were originally developed 
*	as part of the 7wb.org/index.html app and later externalized in 
*	the 7wb.org/styles.css file for global use.
*************************************************************************
*	PROG_ARR['title'] = 7wb.xxx Domain Styling"; // program title
*	PROG_ARR['ver'] = "2025-03-20-alpha"; // program version
************************************************************************/
/* Fonts imported from https://fonts.google.com */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

/* Base styling for BODY > MAIN (applies to all orientations and screen widths) */
html,
body {
	background: white;
	color: black;
	font-size: medium; /* 1rem */
}
main {
	background: white;
}

/* Styling changes specific to screen width GE 48em. */
@media screen and (min-width: 48em) {
	html,
	body {
		/* background: #e4e4e4; /* Allapoosa gray */
		background-attachment: fixed;
		background-clip: border-box;
		background-color: #191970; /* midnightblue */
		background-image: url("../img/bg.png");
		background-origin: border-box;
		background-position: 0% 0%;
		background-repeat: no-repeat;
		background-size: auto auto;
	}
	main {
		border: 1px solid #ccc;
		border-radius: 0.5em;
		font-family: "Noto Serif", serif;
		margin: 1em auto 5em;
		max-width: 48em;
		padding: 0.5em 5em;
	}
}

/* Styling for all other HTML elements. */
a:link,
a:visited {
	color: #3C8ED2; /* Allapoosa blue */
	text-decoration: none;
}
a:hover,
a:active {
	color: red;
	text-decoration: underline;
}
a.null {
	color: #808080; /* gray */
	text-decoration: none;
}
aside {
	font-style: italic;
	position: relative;
	top: 0;
	left: 0;
}
article {
}
details {
}
details > summary {
	color: #3C8ED2; /* Allapoosa blue */
	cursor: pointer;
}
details > summary:hover {
	color: red;
}
footer {
	padding-bottom: 1em;
}
form {
}
form > div.formgrid {
	column-gap: 1em;
	display: grid;
	grid-template-columns: 1fr 3fr;
	row-gap: 1em;
}
h1, h2 {
	color: red;
	font-family: "Noto Serif Display", serif;
	font-weight: normal;
}
h1 {
	font-size: xx-large;
	text-align: center;
}
h2 {
	font-style: italic;
}
header {
	padding-top: 1em;
}
nav {
	font-family: Noto Sans, sans-serif;
	font-size: 0.75em;
	letter-spacing: 1px;
	text-transform: uppercase;
}
nav > div {
	display: inline-block;
	padding-right: 1.5em;
}
section {
	font-size: 1.125em;
	text-align: justify;
}
.bold {
	font-weight: bold;
}
.box {
	border: 1px solid dimgray;
	border-radius: 0.5em;
	margin: 1em;
	padding: 1em;
}
.center {
	text-align: center;
}
.img-1x {
	height: auto;
	vertical-align: middle;
	width: 1em;
}
.img-2x {
	height: auto;
	vertical-align: middle;
	width: 2em;
}
.ital {
	font-style: italic;
}
#copyright {
	font-style: italic;
	text-align: center;
}
/************************************************************************
*	End of global styling.
************************************************************************/