@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
.page-wrapper {
  display: grid;
      grid-template-columns: 384px 1fr 1fr 300px;
      grid-template-rows: 720px 200px 1fr;
      width: 1200px;
      min-width: 768px;
      height: 2000px;
      margin: 0;
      position: abosolute;
}
a:hover {
  color: purple;
}
html {
  height:2000px;
  width: 1200px;
  min-width: 768px;
  background-color: black;
  background-position: absolute;
}
abbr {
  text-decoration: none;
}
/*div {
  border: 1px solid red;
}*/

body {
  color: white;
  background-image: url("layoutbg2.png");
  background-position: absolute;
  background-repeat: no-repeat;
  background-size: 1550px;
  font-family: 'Josefin Sans', sans-serif;
  margin: 0;
  height: fit-content;
}
a {
  text-decoration: none;
  color: #cc5056
}
p {
  color: white;
  font-size: 12pt;
  line-height: 14pt;
}

h1 {
  font-size: 50pt;
  align-items: left;
  text-align: right;
  text-transform: uppercase;
  margin-top: 120px;
    margin-right: 10px;
  }

h2 {
  font-size: 36pt;
      text-align: right;
      text-decoration: none;
      text-transform: uppercase;
      margin-top: -40px;
      margin-right: 10px;}

h3 {
  font-size: 16pt;
  text-transform: uppercase;

}
.preamble h3 {
  margin-left:5px;
  width: 450px;
}
.summary {
  color: red;
      grid-column: 1/2;
      grid-row: 1/2;
      text-align: right;
    margin-right: 10px;
  margin-left: 30px;}

.sidebar {
  grid-row: 1/2;
      grid-column: 4/5;
      margin-right: 20px;
      text-align: justify;
}

.wrapper {
  text-align: right;
  grid-row: 1/2;
  grid-column: 3/4;
  margin-top: 250px;
  text-decoration: none;
  color: black;
  line-height: 12pt;
}
.wrapper h3 {
  color: black;
  text-transform: uppercase;
  font-weight: semibold;
}
.wrapper li {
  text-align: right;
      margin-top: 4px;
      line-height: 12pt;
}
.wrapper ul {
  list-style-type: none;
  margin-top: -20px;
}
.main {
  margin-top: -65px;
grid-column: 1/5;
display: flex;
grid-row: 3/4;
display:-webkit-flex;}

#zen-explanation p:nth-of-type(1n+1) {
  margin-right: 10px;
  margin-top: 5px;
  width: 281px;
  grid-column: 2/3;
}

#zen-explanation p:nth-of-type(1) {
margin-top: -20px;
width: 281px;
}

#zen-participation p:nth-of-type(1n+1) {
  margin-right: 20px;
  width: 252px;
  margin-left: -40px;
}

#zen-participation h3{
  margin-left: -40px;
}
#zen-explanation h3:nth-of-type(1) {
  margin-right: 20px;
  width: 319px;
}
#zen-supporting p {
  margin-top: -20px;
}
#zen-benefits p:nth-of-type(1) {
  margin-left: 30px;
  width: 270px;
      margin-right: 10px;
}
#zen-benefits h3 {
  margin-left: 30px;
}

#zen-requirements p:nth-of-type(1n+1) {
  margin-right: 20px;
  width: 280px;
  margin-top: -12px;
}

#zen-requirements p:nth-of-type(5) {
  margin-right: 20px;
      margin-top: -10px;
      margin-left: 60px;
      width: 187px;
      text-align: right;
  }

div#zen-benefits   {order: 1;}
div#zen-participation  {order: 3;}
div#zen-explanation {order: 2;}
div#zen-requirements  {order: 4;}
div#zen-supporting footer {order:5}

.preamble {
  grid-row: 2/3;
grid-column: 1/4;
margin-top: 195px;
margin-left: 30px;

}
#zen-preamble p:nth-of-type(2) {
    width: 335px;
    margin-left: 380px;
    margin-top: -90px;

}

#zen-preamble p:nth-of-type(1) {
width: 350px;
margin-top: -20px;
margin-left: 5px;
}

#zen-preamble p:nth-of-type(3) {
    width: 395px;
    margin-left: 730px;
    margin-top: -90px;
}

footer {
text-align: right;
margin-top: 1000px;

}

/*-------ipad size---------*/
@media screen and (max-width: 768px){
.page-wrapper {
   grid-template-columns: 32% 55px auto;
grid-template-rows: 100vh 193px 1fr;}
.intro {
  grid-column: 1/2;
}
.wrapper{
   color: white;}
.wrapper h3 {
   color: white;}
body {
   background-image: url("ipadlayout2.png");
 background-size: contain;}
.sidebar {
   grid-row: 1/2;
   grid-column: 1/2;
   margin-right: 20px;
   margin-top: 630px;
	text-align : justify;}
h1 {
Margin-top: -600px;}

.design-archives {
   margin-top: 0px;}

.main {
   margin-top: 270px;
   grid-column: 1/2;
   grid-row: 3/4;
   display: block;}
.preamble h3 {
   margin-left: 5px;
   width: 450px;
   margin-top: 270px;}
#zen-preamble p:nth-of-type(1) {
   width: 350px;
   margin-top: -15px;
   margin-left: 5px;
}
#zen-preamble p:nth-of-type(2) {
   width: 335px;
   margin-left: 1px;
   margin-top: -8px;}
#zen-preamble p:nth-of-type(3) {
   width: 395px;
   margin-top: 2px;
}

div#zen-explanation {
   margin-left: 35px;}
div#zen-participation {
   margin-left: 75px;}
.preamble {
   grid-row: 2/3;
   grid-column: 1/2;
   margin-top: 450px;
   margin-left: 30px;}


div#zen-requirements {
margin-left: 35px;}

#zen-participation p:nth-of-type(1n+1) {
   margin-top: 1pt;}
#zen-requirements p:nth-of-type(1n+1) {
   margin-right: 20px;

   margin-top: 1px;}
footer {
  text-align: right;
      grid-column: 1/2;
      margin-right: 100px;
      margin-top: 0px;}
}
/*----------iphone6/7/8---------*/
@media screen and (max-width: 375px){
  .sidebar {
     margin-top: 270px;
}
body {
   background-image: none;}
}