@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Mynerve&family=Permanent+Marker&display=swap');
/* css Zen Garden default style v1.02 */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */


/* Your images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */


/* basic elements */
/* General Styles */
body {
	text-align:center;
	font-family:"Mynerve";
	font-size:17px;
	margin-top:40px;
	color:#777;
}

.page-wrapper {
	background-image:url(paper.jpg);
	background-attachment:scroll;
	width:1030px;
	margin:auto;
	margin-top:-30px;
	padding-bottom:50px;
	border:3px solid #000;
}
a{
	text-decoration:none;
	font-weight:bold;
}
a:hover{
	color:#0d89ba;
}
ul{
	text-align:left;
}
/* Intro Section */
.intro {
}

#zen-intro {
}

header[role="banner"] {
}

h1 {
	color:#000;
	font-family:"Permanent Marker";
	font-size:20pt;
}

h2 {
	color:#000;
	font-family:"Permanent Marker";
	font-size:16pt;
}

h3{
	color:#000;
	font-family:"Permanent Marker";
	font-size:13pt;
    
}

abbr[title="Cascading Style Sheets"] {
}

/* Summary Section */
.summary {
}

#zen-summary {
}

.summary[role="article"] {
}

.summary p {
}

.summary a {
}

.summary a[title="This page's source HTML code, not to be modified."] {
}

.summary a[title="This page's sample CSS, the file you may modify."] {
}

/* Preamble Section */
.preamble {
}

#zen-preamble {
	background-image:url(stickynote.avif);
	background-repeat:no-repeat;
	background-size:700px;
	height:600px;
	width:600px;
	margin-top:-120px;
	margin-bottom:-50px;
	font-family:"Indie Flower";
}

.preamble[role="article"] {
}

.preamble h3 {
	position:relative;
	top:210px;
	left:50px;
	transform:rotate(-2deg);
}

.preamble p {
	position:relative;
	top:200px;
	left:200px;
	width:300px;
	line-height:14px;
	transform:rotate(-2deg);
	text-align:left;
}

/* Main Supporting Section */
.main.supporting {
	
}

#zen-supporting {
}

.supporting[role="main"] {
}

/* Explanation Section */
.explanation {
}

#zen-explanation {
	margin-bottom:-380px;
}

.explanation[role="article"] {
}

.explanation h3 {
	position:relative;
	left:260px;
	top:-400px;
}

.explanation p {
	position:relative;
	left:570px;
	top:-400px;
	width:400px;
}

/* Participation Section */
.participation {
}

#zen-participation {
	width:550px;
	background-image:url(doodle1.png);
	background-size:contain;
	background-repeat:no-repeat;
	position:relative;
	left:560px;
	transform:rotate(-6deg);
}

.participation[role="article"] {
}

.participation h3 {
	position:relative;
	right:520px;
	top:-70px;
	transform:rotate(6deg);
}

.participation p {
	position:relative;
	right:520px;
	top:-70px;
	text-align:left;
	transform:rotate(6deg);
}

.participation a {
}

.participation a[title="A listing of CSS-related resources"] {
}

/* Benefits Section */
.benefits {

}

#zen-benefits {
	background-image:url(doodle2.png);
	background-size:contain;
	background-repeat:no-repeat;
	position:relative;
	left:50px;
	height:300px;
	width:300px;
}

.benefits[role="article"] {
	
}

.benefits h3 {
	position:relative;
	left:500px;
	width:400px;
}

.benefits p {
	position:relative;
	left:500px;
	width:400px;
}

/* Requirements Section */
.requirements {
}

#zen-requirements {
	background-image:url(doodle3.png);
	position:relative;
	left:0px;
}

.requirements[role="article"] {
	width:500px;
	position:relative;
	
}

.requirements h3 {
	position:relative;
	left:510px;
}

.requirements p {
	position:relative;
	left:510px;
}

.requirements a {
}

.requirements a[title="submission guidelines"] {
}

.requirements a[title="View the Zen Garden's license information."] {
}

.requirements a[title="Dave Shea"] {
}

.requirements a[title="mediatemple"] {
}

.requirements a[title="Zen Garden, the book"] {
}

/* Footer Section */
footer {
}

footer a {
}

footer a[title="Check the validity of this site’s HTML"] {
}

footer a[title="Check the validity of this site’s CSS"] {
}

footer a[title="View the Creative Commons license of this site: Attribution-NonCommercial-ShareAlike."] {
}

footer a[title="Read about the accessibility of this site"] {
}

footer a[title="Fork this site on Github"] {
}

/* Sidebar Section */
.sidebar {
}

.sidebar[role="complementary"] {
}

.sidebar .wrapper {
	background-image:url(doodle4.png);
	background-size:contain;
	width:900px;
	background-repeat:no-repeat;
	position:relative;
	left:400px;
}

.design-selection {
	position:relative;
	left:-400px;
}

#design-selection {
}

.design-selection h3 {
	text-align:left;
	position:relative;
	left:50px;
}

.design-selection .select {
}

nav[role="navigation"] {
}

nav ul {
}

nav li {
}

nav li a {
}

nav li a.design-name {
}

nav li a.designer-name {
}

/* Design Archives Section */
.design-archives {
	position:relative;
	left:-400px;
}

#design-archives {
}

.design-archives h3 {
	text-align:left;
	position:relative;
	left:50px;
}

.design-archives .archives {
}

.design-archives nav ul {
}

.design-archives nav ul li {
}

.design-archives nav ul li a {
}

.design-archives nav ul li.next {
}

.design-archives nav ul li.viewall {
}

/* Resources Section */
.zen-resources {
	position:relative;
	left:-400px;
}

#zen-resources {
}

.zen-resources h3 {
	text-align:left;
	position:relative;
	left:50px;
}

.zen-resources .resources {
}

.zen-resources ul {
	
}

.zen-resources ul li {
}

.zen-resources ul li a {
}

.zen-resources ul li a[title="View the source CSS file of the currently-viewed design."] {
}

.zen-resources ul li a[title="Links to great sites with information on using CSS."] {
}

.zen-resources ul li a[title="A list of Frequently Asked Questions about the Zen Garden."] {
}

.zen-resources ul li a[title="Send in your own CSS file."] {
}

.zen-resources ul li a[title="View translated versions of this page."] {
}

/* Extra Divs for Imagery */
.extra1 {
	background-image:url(doodle5.png);
	background-size:contain;
	width:200px;
	height:200px;
	position:relative;
	top:-900px;
	left:1000px;
	transform:rotate(20deg);
}

.extra2 {
	background-image:url(sticker1.png);
	width:100px;
	height:100px;
	background-size:contain;
	position:relative;
	top:-980px;
	left:800px;
	transform:rotate(-40deg);
}

.extra3 {
	background-image:url(sticker1.png);
	width:100px;
	height:100px;
	background-size:contain;
	position:relative;
	top:-990px;
	left:950px;
	transform:rotate(10deg);
}

.extra4 {
}

.extra5 {
}

.extra6 {
}