@charset "UTF-8";
 
/*A submission for Shane Howell's CSS ZENgineer Project
	My Design is titled: CSS ZEN Kitchen
	My Name is: Kelly Gaines
	My solution is heavily referencing "Zen Army"
		– Design by Carl Desmond
        -http://www.niceguy.com/ 

This CSS file accompanies my CSS ZENgineer Project

CSS CITATIONS 
This CSS file is released under the Creative Commons License - 
		- http://creativecommons.org/licenses/by-nc-sa/1.0/ 
License Allows: adaptations and non-commercial use, but requires share-and-share alike and attribution 

 IMAGE CITATIONS 
	Images are all cited below and not included in the CC4.0 above, which is limited to the CSS only 

All associated graphics copyright 2022, by me and Pexels and Pixabay

All images are cited below and released under Creative Commons License cc0 and courtesy of Pixabay
		- https://creativecommons.org/publicdomain/zero/1.0/
			- post-it-g74a721ae4_1920.jpg
			- monstera-gf3f4508d2_1920.jpg
			- monstera-g52d7bdc0a_1920.jpg
			- window-g12be7d7cb_1920.jpg
			- apple-g84325a0f2_1920.jpg

All images are cited below and released under Creative Commons License cc0 and courtesy of Pexels
		- https://creativecommons.org/publicdomain/zero/1.0/
		- pexels-niki-nagy-1128426.jpg 
		- pexels-tara-winstead-7663988.jpg*/
		
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');

body{
  background-color:#d08a06;
}

.page-wrapper {
  width: 1300px;
  margin: 0 auto;
  padding: 10px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  background: url("background.jpg");
  background-repeat:repeat-y;
}

h2 {
	background:url("header.jpg") no-repeat;
	width:940px;
	height:500px;
	margin-left:200px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

h1 {
	background:url("Lights.gif") no-repeat;
	width:940px;
	height:308px;
	margin-left:200px;
	position:absolute;
	z-index:1;
	top:-75px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

h3 {
	font-family: "Homemade Apple", cursive;
	font-size: 45px;
	padding-top:40px;
}

.summary {
	background: url("post-it_PB.png");
	background-repeat: no-repeat;
	background-position:center;
	height: 580px;
    width: 750px;
    display:inline-block;
    left:calc(50% + 100px);
	top:500px;
    position: absolute;
    z-index: 1;

}

.summary p:first-child{
text-align:center;
	font-size:13px;
 padding-left: 275px;
    padding-top: 55px;
    padding-right:200px;
transform: rotate(-33deg);
      position:relative;
      right:80px;
      top: 120px;
}

.summary p:last-child{
text-align:center;
	font-size:13px;
 padding-left: 390px;
    padding-top: 55px;
    padding-right:200px;
transform: rotate(-33deg);
      position:relative;
      right:60px;
	top:75px;
}

.preamble {
	background: url("recipe card crop.jpg");
	background-repeat: no-repeat;
	background-position:center;
	height: 753px;
}

.preamble h3 {
padding-left:300px;
}

.preamble p::before {
	content: url(bullet.png);
}

 p {
	font-family:"Rock Salt", cursive;
	font-size: 13px;
	padding-left:325px; 
	padding-right:325px;
}

.explanation {
	background: url("recipe card crop.jpg");
	background-repeat: no-repeat;
	background-position:center;
	height: 753px;
}

.explanation p::before {
	content: url(bullet.png);
}

.explanation h3 {
padding-left:300px;
}
.participation { 
    background: url("recipe card crop.jpg");
	background-repeat: no-repeat;
	background-position:center;
	height: 753px;
}

.participation p::before {
	content: url(bullet.png);
}

.participation h3 {
padding-left:300px;
}

.benefits {
	background: url("recipe card_benefits.jpg");
	background-repeat: no-repeat;
	background-position:center;
    height:398px;
}

.benefits p::before { 
    content: url(bullet.png);
}

.benefits h3 {
padding-left:300px;
}

.requirements {
	background: url("recipe card_requirements.jpg");
	background-repeat: no-repeat;
	background-position:center;
	height: 1290px;
}

.requirements p::before {
	content:url(bullet.png);
}

.requirements h3 {
padding-left:300px;
}

footer {
	background: url("post-it_PB2.png") no-repeat;
	height: 500px;
    width: 600px;
	position:absolute;
	z-index:1;
	left:905px;
	top:4100px;
	padding-left:200px;
	padding-top: 175px;
    left:calc(50% + 180px);  
}

footer a {
	font-family: "Rock Salt", cursive;
    text-shadow: 2px 2px 3px;
}


.zen-validate-html{
transform: rotate(26deg);
position:absolute;
      left:165px;
      top:120px;}

.zen-validate-css{
transform: rotate(26deg);
      position:absolute;
      left:230px;
      top:150px;
}

.zen-license{
transform: rotate(26deg);
      position:absolute;
      left:280px;
}

.zen-accessibility{
transform: rotate(26deg);
      position:absolute;
      left:320px;
      top:200px;
}

.zen-github{
transform: rotate(26deg);
      position:absolute;
      left:370px;
      top: 225px;
}


.design-selection {
	background: url("footer.jpg");
	background-repeat:no-repeat;
	background-position: center;
 
}

.design-selection h3 {
padding-left:350px;
padding-top: 130px;
}

.design-selection ul {
margin-left:25%;
padding-bottom: 150px;
}

.design-archives {
	background:url("post-it_PB.png");
    background-position:center;
    background-repeat: no-repeat;
	position:absolute;
	z-index:2;
	left:805px;
	top:4700px;
    height: 550px;
    width:500px;
    left:calc(50% + 100px);

}

.design-archives h3 {
font-size: 30px;
text-align:center;
      transform: rotate(-33deg);
      position:relative;
      top:65px;
      left:-60px;

}

.design-archives ul{
      transform: rotate(-30deg);
      position:relative;
      top:-10px;
      left:100px;
}


.zen-resources {
	background:url("post-it_PB2.png");
	 background-position:center;
	position:absolute;
	z-index:1;
	left:820px;
	top:5000px;
    background-repeat: no-repeat;
    height: 550px;
    width:500px;
    left:calc(50% + 120px);

}
.zen-resources h3 {
font-size: 30px;
text-align:center;
      transform: rotate(26deg);
      position:relative;
      top:70px;
      left:80px;
}

.zen-resources ul {
transform: rotate(26deg);
      position:relative;
      top:100px;
      left:100px;
}

.zen-resources li {
font-size:12px;
}

li {
font-family:"Rock Salt", cursive;
	font-size: 14px;
}