@charset "UTF-8";
/*
A submission for Shane Howell's CSS ZENgineer Project
 My Design is titled: Zen-Meditating Hands
 My Name is: Ikumi Masuko
 My solution is heavily referencing "A Robot Name Jimmy"
  – Design by @guitrasher
    – Development by @jimmyking
   – http://meltmedia.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/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 
   - lotus.svg
   - handcursor.png
   - glow.svg
   - clouds.svg
   - hand1.svg
   - hand2.svg
   - hand3.svg
   - hand4.svg
   - hand5.svg
   - hand6.svg
*/
/*  - csszenProjectTitle.png  is not released and all rights are retained by the designer */


/*  /////  FONT CITATIONS */
/* All Google Fonts and Adobe Fonts are released under licenses which do not require them to be cited_This only uses adobe fonts  */


@import url("https://use.typekit.net/ave0wcj.css");
* {
  box-sizing: border-box;
}
body {
  background-color: #E0E0AD;
  background-image: url("hand1.svg"), url("hand3.svg"), url("clouds.svg"), url("hand2.svg"), url("hand4.svg"), url("hand5.svg"), url("hand6.svg"), url("glow.svg");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left 300px, right 600px, top, left 1200px, right 1700px, left 2100px, left 3000px, bottom;
  background-size: 33%, 30%, 100%, 60%, 55%, 45%, 100%, 100%;
}
p {
  font-size: 18px;
  font-family: sofia-pro-soft, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #3D4018;
}
a {
  color: #817800;
  font-size: 18px;
  font-family: sofia-pro-soft, sans-serif;
  font-weight: 400;
  font-style: normal;
}
a:hover {
  color: #F0FF66;
}
li a:hover {
  color: #EFACB0;
}
a:visited {
  color: #648E0C;
}

li a:visited{
	 color: #E88CCD !important; 
}
li {
  text-align: justify;
  font-size: 18px;
  line-height: 32px;
  font-family: sofia-pro-soft, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #3D4018;
  list-style-image: url("lotus.svg");
}
h1 {
  font-family: ballare, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 4.2vw;
  color: #3D4018;
  transform: rotate(-18deg);
  padding-left: 26%;
}
h1:hover {
  animation: animate 2s linear both;
  color: rgba(187, 199, 0, 1.00);
}
@keyframes animate {
  0% {
    transform: rotate(-0deg) translateY(0px);
    opacity: 1;
    filter: blur(1px);
  }
  100% {
    transform: rotate(30deg) translateY(-200px);
    opacity: 0;
    filter: blur(20px);
  }
}
h1:nth-child(1) {
  animation-delay: 0s;
}
h1:nth-child(2) {
  animation-delay: .4s;
}
h1:nth-child(3) {
  animation-delay: .8s;
}
h1:nth-child(4) {
  animation-delay: 1.2s;
}
h2 {
  font-family: ballare, sans-serif;
  font-weight:bolder;
  font-style: normal;
  font-size: 3.5vw;
  color: #3D4018;
  transform: rotate(-7deg);
  padding-top: 2%;
  padding-left: 28%;
	white-space: nowrap;
	overflow: hidden;
}

h2::before {
  content:"The beauty of CSS Meditaion";
	position:relative;
	margin-right: 100%;
}


h2:hover {
  animation: animate 2s linear both;
  color: rgba(187, 199, 0, 1.00)
}
@keyframes animate {
  0% {
    transform: rotate(-0deg) translateY(0px);
    opacity: 1;
    filter: blur(1px);
  }
  100% {
    transform: rotate(30deg) translateY(-200px);
    opacity: 0;
    filter: blur(20px);
  }
}
h2:nth-child(1) {
  animation-delay: 0s;
}
h2:nth-child(2) {
  animation-delay: .4s;
}
h2:nth-child(3) {
  animation-delay: .8s;
}
h2:nth-child(4) {
  animation-delay: 1.2s;
}
h3 {
  font-family: ballare, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 26px;
  line-height: 31px;
  color: #3D4018;
	overflow: hidden;
}
h3:hover {
  animation: animate 2s linear both;
  color: rgba(187, 199, 0, 1.00)
}
@keyframes animate {
  0% {
    transform: translateY(0px);
    opacity: 1;
    filter: blur(1px);
  }
  100% {
    transform: translateY(-200px);
    opacity: 0;
    filter: blur(20px);
  }
}
h3:nth-child(1) {
  animation-delay: 0s;
}
h3:nth-child(2) {
  animation-delay: .4s;
}
h3:nth-child(3) {
  animation-delay: .8s;
}
h3:nth-child(4) {
  animation-delay: 1.2s;
}
abbr {
  text-decoration: none;
  font-weight: bolder;
}

#zen-preamble h3{
	position:relative;
	white-space: nowrap;
	
}
#zen-preamble h3::before {
  content:"The Road to Mindfulness";
	position:relative;
	  margin-right: 200%;
}

#zen-explanation h3{
	position:relative;
	white-space: nowrap;
}
#zen-explanation h3::before {
  content:"Take a Deep Breath.";
	position:relative;
	  margin-right: 200%;
}

#zen-participation h3{
	position:relative;
	white-space: nowrap;
}
#zen-participation h3::before {
  content:"When Your Imagination Wanders...";
	position:relative;
	  margin-right: 200%;
}

#zen-benefits h3::after{
	content:"from the Meditation";
	position:relative;
	margin-left: 10px;
}

#zen-requirements h3::after{
	content:"to Relax";
	position:relative;
	margin-left: 10px;
}

.page-wrapper {
  padding-top: 100px;
  padding-bottom: 400px;
  width: 72%;
  margin: 0 auto;
}
.intro {
  width: 100%;
}
.summary {
  width: 260px;
  padding-top: 16%;
  padding-right: 7%;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  position: relative;
}
.preamble {
  width: 65%;
  display: inline-block;
  margin-top: 23%;
  position: relative;
}
#zen-supporting {
  margin: 70px 0 150px 0;
}
.explanation {
  width: 70%;
}
.participation {
  margin: 0 0 0 auto;
  width: 80%;
  padding-top: 50px;
}
.benefits {
  width: 65%;
  padding-top: 60px;
}
.requirements {
  margin: 0 0 0 auto;
  width: 75%;
  padding-top: 70px;
}
footer {
  float: right;
  margin-top: 20px;
  font-weight: bolder;
  font-size: 22px;
}
.sidebar {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.select {
  padding-left: 30px;
}
.design-selection {
  display: inline-block;
  vertical-align: top;
  margin-top: 5%;
}
.archives {
  padding-left: 30px;
}
.design-archives {
  display: inline-block;
  vertical-align: top;
  margin-top: 5%;
  min-width: 240px;
}
.resources {
  padding-left: 30px;
}
.zen-resources {
  display: inline-block;
  vertical-align: top;
  margin-top: 5%;
}