@charset "UTF-8";

/* this css is released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */


/* 
////// self - citations below

This file based on 'Tranquille' by Dave Shea 

////// image citations below
All images are created by the designer/artist, James Aikens. Do not copy, edit or repost.

Chalk_tray.png
Do_Not_Erase.gif
House.gif
Math.gif
Read_This.gif
Side_Border.gif
SideMenu.gif
Tape.gif
TopBorder.gif
Zen_Garden.gif


////// font citations below
Font used - Indie Flower
Licensing information: "You can use these fonts freely in your products & projects - print or digital, commercial or otherwise. However, you can't sell the fonts on their own."
https://developers.google.com/fonts/faq2
*/


@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');


body {
	margin: 0 auto;
	padding: 10px;
	font-family: 'Indie Flower', cursive;
	font-weight: 800;
	font-size: 18px;
 	background-color: rgb(16,160,163);
	background-image: url("Side_Border.gif"),url("Side_Border.gif"),url("Side_Border.gif");
	background-repeat: repeat-x, repeat-y, repeat-y;
	background-position: top, left, right;
	
}

body::before{
	content:url("Chalk_tray.png");
	width:100%;
	min-width:1150px;
	background-repeat: no-repeat;
	background-position: center;
	height: 100px;
	position: fixed;
	bottom: 0px;
	z-index: 5;
	left: 0;
	overflow:hidden;
}

nav ul{
	list-style-type: none;
}

li a:hover{
	color:red;
}

header{

}

header::before{
	content: url("Zen_Garden.gif");
	left: 50%;
}

.page-wrapper{
	color:white;
	width:470px;
	margin: 0 auto;
}

.intro h1{
	font-size: 40px;
	text-align: center;
	}

.intro h2{
	font-size: 22px;
	background-color: white;
	color: rgb(16,160,163);
	text-align:end;
}

.intro::after{
	content: url("House.gif");
	position:absolute;
	top: 100px;
	left: 50%;
	margin-left: -550px;
}

.participation::before{
	content:url("Math.gif");
	position:absolute;
	top: 1400px;
	left: 50%;
	margin-left: 300px;
}

.requirements::before{
	content: url("Read_This.gif");
	position: absolute;
	top: 1000px;
	left: 50%;
	margin-left: -550px;
	
/* animation comes from
	https://www.w3schools.com/cssref/css3_pr_animation.asp
	https://www.w3schools.com/cssref/playit.asp?filename=playcss_transform_scale

*/
	
animation: ReadIt 5s linear infinite;	
}


@keyframes ReadIt {
	0% {transform:scale(0.2,0.2);}
	25% {transform:scale(0.4,0.4);}
	50% {transform:scale(0.6,0.6);}
	75% {transform:scale(0.8,0.8);}
	100% {transform:scale(1.0,1.0);}
}

.preamble h3{
	background-color: white;
	color: rgb(16,160,163);
	font-size: 22px;
	text-align:end;
}

.explanation h3{
	background-color: white;
	color: rgb(16,160,163);
	font-size: 22px;
	text-align:end;
}

.participation h3{
	background-color: white;
	color: rgb(16,160,163);
	font-size: 22px;
	text-align:end;
}

.benefits h3{
	background-color: white;
	color: rgb(16,160,163);
	font-size: 22px;
	text-align:end;

}

.benefits::before{
	content: url("Do_Not_Erase.gif");
	position: absolute;
	top: 2500px;
	left: 50%;
	margin-left: -650px;
}

.requirements{
	margin: 0 0 100px 0;
}

.requirements h3{
	background-color: white;
	color: rgb(16,160,163);
	font-size: 22px;
	text-align:end;
}


footer{
	position:absolute;
	left: 50%;
	margin: 0 250px;
	top: 1160px;
	width: 200px;
	text-align: center;
	background-color: white;
	color: rgb(16,160,163);
  	transition: width 1s ease-in-out 0.25s;

	/* transition property source: https://www.w3schools.com/Css/exercise.asp?filename=exercise_css3_transitions5 */
}

footer:hover {
  width: 350px;
}

.sidebar{
	position:absolute;
	left: 50%;
	margin: 250px;
	top: 150px; 
	width: 400px;
	color: black;
}

.design-selection{
	background-color: white;
	background-image: url("SideMenu.png");
	background-repeat: no-repeat;
	line-height: 1.4;
	font-size: 16px;
	width: 350px;
	height: 400px;
}

.design-selection h3{
	margin-left: 20px;
	margin-bottom: -10px;
}

.design-selection::before{
	content: url("tape.gif");
	position: absolute;
	top: 0px;
	left: 0px;
	margin-left: 142px;
}

.design-archives{
	background-color: white;
	background-image: url("SideMenu.png");
	background-repeat: no-repeat;
	line-height: 1.5;
	width: 350px;
}

.design-archives h3{
	margin-left: 20px;
	margin-bottom: -10px;
}

.design-archives::before{
	content: url("tape.gif");
	position: absolute;
	top: 425px;
	left: 0px;
	margin-left: 142px;
}

.zen-resources{
	background-color: white;
	background-image: url("SideMenu.png");
	background-repeat: no-repeat;
	line-height: 1.5;
	width: 350px;
}

.zen-resources h3{
	margin-left: 20px;
	margin-bottom: -10px;
}

.zen-resources ul li{
	list-style-type: none;
}

.zen-resources::before{
	content: url("tape.gif");
	position: absolute;
	top: 540px;
	left: 0px;
	margin-left: 142px;
}