@charset "utf-8";
/* CSS Document */

body {
	#font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-family:Arial;
	text-align:center;
	margin:0; /* reset */
	padding:0; /* reset */
	
	min-width:450px; /* Set a minimum height to prevent the first image from awkwardly being shoved into the top left corner. */
}

h1 {
	font-weight:bold;
	font-size:50px;
}

h1:first-child { /* reset */
	margin:0;
	#padding:0;
}

ul { /* reset */
	margin:0;
	padding:0;
	margin-bottom:40px;
}

/* ------------------------------------------------------------------------- */
/* Link Styles: */
/* ------------------------------------------------------------------------- */

a {
	text-decoration:none;
	color:Blue;
}
a:hover {
	text-decoration:underline;
}

/* ------------------------------------------------------------------------- */
/* ID & Class Stuff: */
/* ------------------------------------------------------------------------- */

#header {
	text-decoration:none;
	padding-bottom:10px;
	display:inline-block;
	#color:Blue;
	color:#0080FF; /* Lighter */
}
#header:hover {
	#color:#0080FF; /* Lighter */
	color:Blue;
}

.line {border-bottom:10px solid Black;}

.quote {
	margin:auto;
	max-width:500px;
	padding:25px;
	font-size:24px;
}

/* ------------------------------------------------------------------------- */
/* Gallery-Wide: */
/* ------------------------------------------------------------------------- */

.item {
	#background-image:url('img/Screen Shot 2026-03-09 at 16.26.14-fullpage.png'); /* Note: Moved to individual item */
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	width:100%;
	height:300px;
	display:block;
	color:transparent;
	text-decoration:none;
	#opacity:0.7;
	
	/* Note: Snippet taken from the "bg" feature in JWorship: */
	
	/* How can I center text (horizontally and vertically) inside a div block? */
	/* https://stackoverflow.com/questions/5703552/how-can-i-center-text-horizontally-and-vertically-inside-a-div-block */
	display: flex;
	justify-content: center;
	align-items: center;
	
	font-size:large;
}

/* ------------------------------------------------------------------------- */
/* Gallery-Wide (Defunct): */
/* ------------------------------------------------------------------------- */
/* Resources: */
/* Increase transparent background opacity on hover */
/* https://stackoverflow.com/questions/21443449/increase-transparent-background-opacity-on-hover */
/* CSS background-image-opacity */
/* https://stackoverflow.com/questions/6890218/css-background-image-opacity */

/*
.item {
	#position: relative;
	#z-index:1;
	#overflow:hidden; # if you want to crop the image
}
.item:before{
	#z-index:-1;
	position:absolute;
	#left:0;
	#top:0;
	#content: url('img/Screen Shot 2026-03-09 at 16.26.14-fullpage.png'); # Problem: content can't change image properties.
	#opacity:1;
}
.item:hover:before{
	opacity:0.7;
}
*/

/* ------------------------------------------------------------------------- */
/* Form Stuff: */
/* ------------------------------------------------------------------------- */

form {
	display:block;
	#width:50%;
	max-width:800px;
	margin:auto;
	#cursor:url('../img/FatCow_Icons32x32_Color/Mix/eye_half.png');
}
fieldset {#border:0;}

legend {font-weight:bold;}

label {
	display:block;
	font-weight:bold;
	margin-top:5px;
	margin-bottom:5px;
}

input[type="text"], input[type="email"], input[type="password"], textarea {
	display:block;
	margin:auto;
	padding:10px;
	margin-top:5px;
	margin-bottom:5px;
	width:80%;
}

input[type="email"], input[type="password"] {
	text-align:center;
}

textarea {
	resize:vertical;
	height:150px;
}

input[type="submit"] {
	display:block;
	margin:auto;
	padding:10px;
	cursor:pointer;
	margin-top:5px;
	margin-bottom:5px;
}

.success {
	color:Green;
}
.error {
	color:Red;
}

/* ------------------------------------------------------------------------- */
/* Footer Stuff: */
/* ------------------------------------------------------------------------- */

#footer {
	padding:10px;
	font-weight:bold;
	#animation: rotate 3s infinite linear; /* Note: works, but causes page movement and expansion etc. */
}

@keyframes rotate {
	from { transform:rotate(0deg); }
	to { transform:rotate(360deg); }
}