/*
	Cascading Style Sheet for the Family Web Project
*/
/*
	Body
*/
body		{
		background-color: #ffffcc;	/* Very light yellow */
		color: #000000;		/* Black */
		font-size: 100%;		/* For accessibility */
		font-family: "Noto Sans", Roboto, Arial, Verdana, sans-serif;
		margin-top: 1%;
		margin-bottom: 1%;
		margin-right: 2.5%;
		margin-left: 2.5%;
		}
/*
	Headers
*/
h1		{
		text-align: center;
		font-family: "Noto Serif", "Times New Roman", Times, serif;
		font-size: 2em;		/* 32px/16=2em */
		}
h2		{
   		text-align: left;
		font-family: "Noto Serif", "Roboto Slab", "Times New Roman", Times, serif;
		font-size: 1.75em;		/* 28px/16=1.75em */
		}
h3		{
   		text-align: left;
		font-family: "Noto Serif", "Roboto Slab", "Times New Roman", Times, serif;
		font-size: 1.5em;		/* 24px/16=1.5em */
		}
/*
	Paragraphs
*/
p		{
		text-align: justify;
		text-indent: 2.5%;
		font-family: "Noto Sans", Roboto, Arial, Verdana, sans-serif;
		font-size: 1em;		/* 16px/16=1em */
		}
p.normal		{
		font-weight: normal;
		font-style: normal;
		}
p.italic		{
		font-style: italic;
		}
p.bold		{
		font-weight: bold;
		}
pre		{
		font-family: "Noto Mono", "Roboto Mono", "Courier New", Courier, monospace;
		font-size: 1em;
		}
/*
	Lists, both ordered and unordered
*/
ol, ul		{
		margin-left: 2.5%;
		font: normal 0.875em "Noto Sans", Roboto, Arial, Verdana, sans-serif;
		}
/*
	Links, i.e., anchors
*/
a		{
		text-decoration: none;	/* No underlines */
		}
a:link		{
		color: #3333ff;		/* Blue for unvisited links */
		}
a:visited		{
		color: #9900ff;		/* Purple for visited links */
		}
a:hover		{
		color: #cc0000;		/* Red for mouse over link */
		text-decoration: underline;
		}

a:active		{
		color: #336633;		/* Green for selected link */
		text-decoration: underline;
		}
/*
	Images
*/
img	{
	display: block;
    	margin: 0 auto;
	}
img.left	{
		float: left;
		}
/*
	Buttons
*/
.button	{
	background-color:#333333;	/* Gray background */
	border: none;
	border-radius: 45%;	/* Rounded */
	color: #ffffff;		/* White text */	
	margin: 1%;
	padding: 1%;
	width: 8%;
	text-align: center;
	text-decoration: none;
	display: inline-block;
   	font-size: 1.0625em;
	}
/*
	Census Buttons and New Tab Images
*/
.census_button	{
	background-color: #cccccc;	/* Very light gray background */
	margin: 1px;
	padding: 4px;
	font-size: 1em;
			}
.census_img	{
	float: left;
	height: 16px;
	width: 16px;
		}
/*
	Horizonatal Rule
*/
hr      {
        border-color: #666666;	/* Gray */
        border-style: solid;
        border-width: 0.0625em;
        }
/*
	Dark Mode
*/
@media (prefers-color-scheme: dark)	{
body	{
	background-color: #000000;	/* Black */
	color: #ffffcc;	/* Very pale yellow */
	}
a:link  {
        color: #6666ff;	/* Blue */
        }
a:visited       {
        color: #cc00ff;	/* Purple */
        }
a:hover {
        color: #ff0000;	/* Red */
        }
a:active	{
        color: #009900;	/* Green */
       		}
hr	{
     	border-color: #999999; /* Gray */
	}
					}