@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Qwitcher+Grypen:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
* /*A submission for Dylan Harrington's CSS ZENgineer Project
	My Design is titled: TrashPanda
	My Name is: DylanHarrington
	My solution is heavily referencing "Fading Flower
		– Design by @ManiSheriar*/
/*	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/4.0/  /* 
/* 	License Allows: adaptations and commercial use, but requires share-and-share alike and attribution to me  /*


/* 	/////  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 2021, by me */
/*	and or  */
/*		- csszenProjectTitle.png  is not released and all rights are retained by the designer */
/*	All other images are cited below and released under Creative Commons License cc0 and courtesy of Pixabay 
		- https://creativecommons.org/publicdomain/zero/1.0/
/* -->


/* 	/////  FONT CITATIONS */
/*	All Google Fonts and Adobe Fonts are released under licenses which do not require them to be cited  */
/*  Other fonts need a license and citations  */


* {
  margin: 0;
  padding: 0;
}
.page-wrapper {
  background-color: #b78d60;
  margin: 0 auto;
  position: inline-block;
  width: 700px;
  border: solid
}
.participation h3 {
  content: url("Participation.gif");
  align-content: center;
  width: 400px;
  height: 300px;
  margin: -100px 0px -100px 130px;
  white-space: nowrap;
  overflow: hidden;
}
.benefits h3 {
  content: url("Benefits.gif");
  width: 450px;
  height: 400px;
  margin: -100px 20px -100px 120px;
  white-space: nowrap;
  overflow: hidden;
}
.requirements {
  text-align: center
}
h2 {
  text-align: center;
  margin: 10px;
}
h3 {
  text-decoration: underline;
  text-align: center;
}
p {
  color: #7c7719;
  margin: 12px;
  padding: 5px;
  align: center;
  font-family: IBM Plex Mono;
  font-size: 15px;
}
body {
  background-color: #a4846d;
}
a:link {
  text-decoration: underline;
  color: #FFFFFF
}
a:visited {
  text-decoration: underline;
  color: #4800FD;
}
a:hover, a:focus, a:active {
  text-decoration: underline;
  color: #010101
}
h1 {
  background: url("Harrington_ThemePropsal.png")no-repeat;
  background-blend-mode: overlay;
  background-size: 750px;
  width: 700px;
  height: 505px;
  margin-top: -2px;
}
ul {
  padding: 10px;
  margins: 20px;
}
.preamble {
/*  background: pink;*/
  padding-bottom: 300px;
  background-image: url("Harrington_ThemePropsal2.jpg");
  background-size: 300px;
  background-repeat: no-repeat;
  background-position: bottom;
}

.preamble::before {
  content: url("apple-small.webp");
	position:absolute;
	width:200px;
	height: 200px;
/*	background-color:pink;*/
	left: 50%;
	margin-left:-550px;
}



.explanation {
/*  background: pink;*/
  padding-bottom: 450px;
  background-image: url("Harrington_ThemePropsal3.jpg");
  background-size: 300px;
  background-repeat: no-repeat;
  background-position: bottom;
}


.intro h3 {
  content: url("TheRoadToEnlightenment.png");
  width: 700px;
  height: 405px;
  margin: -100px 0px;
  white-space: nowrap;
  overflow: hidden;
}
.explanation h3 {
  content: url("SoWhatIsThisAbout.gif");
  width: 700px;
  height: 405px;
  margin: -100px 0px;
  white-space: nowrap;
  overflow: hidden;
}
.requirements h3 {
  content: url("titles.gif");
  width: 700px;
  height: 380px;
  margin: -100px 0px;
  white-space: nowrap;
  overflow: hidden;
  align-content: center;
}
.intro h1 {
  content: url("csszengarden2.0.gif");
  white-space: nowrap;
  margin: 0 ;
}
.design-selection li {
  list-style-type: none;
  float: left;
  position: relative;
  padding:5px;
	margin: 0px 0px 0px 30px;
	 font-size: 12px;
}
.design-archives {
  clear: left;
}
.zen-resources li {
   list-style-type: none;
  float: left;
  position: relative;
  height: 18px;
  margin: 0px 30px 0px;
  padding: 10px;
  font-size: 12px;
}
.zen-resources h3 {
  font-size: 20px;
}
.design-archives li {
  list-style-type: none;
  float: left;
  position: relative;
  height: 18px;
  margin: 0px 30px 0px;
  padding: 10px;
  font-size: 12px;
}
footer {
  text-align: center;
}
.select {
	font-family: Playfair Display;
	padding-top: 45px;
	font-size: 18px;
}
.summary{
padding: 5px;
margin: auto;
}
.page-wrapper h2{
	font-family: Playfair Display;
}
.resources{
	font-family: Playfair Display;
	margin: 0px 40px;
}
.design-selection a {
	display:block;}
design-selection a.designer-name {
display:inline;
color:#999;}
li {

	margin:4px 0;}
sidebar .wrapper {
	padding:50px 25px 0 25px;
	width:150px;
}
.sidebar {
	position:absolute;
	top:0;
	width:200px;
	height: 2000px;
	margin: 0px 725px;
	background: url("sidebar.png") no-repeat; 
	font-size: 10px;
}
.design-archives h3{
	font-family: Playfair Display;
	font-size: 20px;
}