@import url('https://fonts.googleapis.com/css?family=Dosis|Questrial|Quicksand&display=swap');

body { 
    font-family: 'Questrial', sans-serif;
	line-height: 1.88889;
	color: #555753; 
	background-color: #9cc2d1; 
	margin: 0; 
	padding: 0;
    
	}
body:hover{
    background-color: bisque;
}

.intro header {
    background-color: #914747;
    background-image: url(img/img3.png);
    background-repeat: no-repeat;
    background-position: 49% 16%;
    width: 60%;
    padding-top: 10%;
    float:left;
}

header:hover {
    background-color: lightpink;
    color: darkred;
}

.intro header h1 {
    color:white;
    font-weight: 800;
    text-align: center;
    font-size: 5em;    
}


.intro header h2 {
    background-color: #ba96a5;
    color: #5f0000;
    font-size: 2em;
    text-align: right;
    padding-bottom: 50px;
    margin-right: -80px;
    padding-right: 251px;
    padding-bottom: 0px;
    }

.intro header h2:hover {
    background-color: aquamarine;
    color: cadetblue;
} 


.summary {
    clear: both;
}

a {
    text-decoration: none;
    color: darkslategray;
}
.summary p {
    background-color: coral;
    color: white;    
}

.summary p:nth-of-type(1) {
    position: absolute;
    width: 25%;
    top: 71px;
    right: 280px;
    padding: 24px 10px 10px 60px;
    text-align: right;
    background-color: #f8305e;
}

.summary p:nth-of-type(1):hover {
    background-color: blueviolet;
    color: yellow;     
}

.summary p:nth-of-type(2) {
    position: absolute;
    width: 14%;
    top: 332px;
    right: 0;
    padding: 10px 218px 30px 16px;
}

.summary p:nth-of-type(2):hover {
    background-color: firebrick;
    color: linen;     
}

.intro #zen-intro{
    position:relative;
}

div#zen-preamble.preamble {
    padding:100px;
    background-color: burlywood;
    color: white;
    float: left;
    width: 20%;
    margin-left: 80px;
    padding: 0 15px 0; 
    
}

div#zen-preamble.preamble:hover {
    background-color: cyan;
    color:darkblue;
   
}
div#zen-explanation.explanation {
    padding:100px;
    background-color: cadetblue;
    color: white;
    float: left;
    width: 20%;
    margin-left: 20px;
    margin-top: 50px;    
}

div#zen-explanation.explanation:hover {
    background-color: yellow;
    color:grey;
          
}

div#zen-participation.participation {
    padding:100px;
    background-color: mediumseagreen;
    color: white;
    float: left;
    width: 20%;
    margin-left: 20px;
    padding: 0 15px 0; 
}

div#zen-participation.participation:hover {
    background-color: greenyellow;
    color:forestgreen;
}

div#zen-supporting {
    position: relative;
}

div#zen-benefits.benefits {
    padding: 100px;
    background-color: darkseagreen;
    color: white;
    float: left;
    width: 20%;
    margin-left: 20px;
    margin-top: 3vh;
    padding: 0 15px 0;
/*
    position: absolute;
    top: 808px;
    right: 229px;
*/
}
div#zen-benefits.benefits:hover {
    background-color: green;
    color:chartreuse;        
}


div#zen-requirements.requirements {
    margin-top: 3vh;
    padding: 100px;
    background: url(img/img1.png) no-repeat lightsalmon 67vw;
    color: white;
    float: right;
    clear: both;
    padding: 20px 780px 60px 80px;

}

div#zen-requirements.requirements:hover {
    background-color: crimson;
    color: beige;
    
}

.sidebar {
    position: relative;
}

div#design-selection.design-selection {
    padding:100px;
    background-color: cornflowerblue;
    color: white;
    float: left;
    width: 20%;
    margin-left: 80px;
    padding: 0 15px 0; 
    position: relative;
    bottom: 30px;
}

div#design-selection.design-selection:hover {
    background-color: darkturquoise;
    color: darkblue;
}

div#design-archives.design-archives {
    padding:100px;
    background-color: peachpuff;
    color: white;
    float: right;
    width: 20%;
    margin-left: 20px;
    margin-top: 200px;
    padding: 0 15px 0; 
    }

div#design-archives.design-archives:hover {
    background-color: peru;
    color: papayawhip;
}

div#zen-resources.zen-resources {
    padding:100px;
    background-color: palevioletred;
    color: white;
    float: right;
    width: 20%;
    margin-left: 20px;
    margin-top: 150px;
    padding: 0 15px 0; 
  }

div#zen-resources.zen-resources:hover {
    background-color: tomato;
    color: palegoldenrod;    
}

div#zen-resources.zen-resources:after {
    clear:both;
}


footer a {
    transform: rotate(45deg);
    margin: 5px;
    text-shadow: 8px 6px 3px black;
    color: whitesmoke;
}
footer {
    position: fixed;
    padding: 20px 0px 64px 0px;
    top: 0px;
    right: 20px;
    display: grid;
    text-align: right;
    background: #6d6d6d66;
  }


/*
@media only screen and (min-width: 768px) {
     For desktop: 
.intro header {}
    .intro header h1 {}
    .intro header h2 {}
    .summary p:nth-of-type(1) {}
    .summary p:nth-of-type(2) {}
    div#zen-preamble.preamble {}
    div#zen-explanation.explanation {}  
    div#zen-participation.participation {}
    div#zen-benefits.benefits {}
    div#zen-requirements.requirements {}
    div#design-selection.design-selection {}
    div#design-archives.design-archives {}
    div#zen-resources.zen-resources {}


}
*/



@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    .intro header {width: 100%; background-position: center 29px; box-sizing: border-box;}
    .intro header h1 {line-height: 1em; padding-top: 110px;}
    .intro header h2 {font-size: 1,5em; padding-right: 0px; text-align: left; padding-left: 15px; margin: 0;}
    .summary p:nth-of-type(1) {width: 100%; margin:0 auto; box-sizing: border-box; position: static; padding: 10px 80px 10px 15px; margin: 0;} 
    
    .summary p:nth-of-type(2) {width: 100%; margin:0 auto; box-sizing: border-box; position: static;} 
    
    div#zen-preamble.preamble {width: 100%; margin:0 auto;  box-sizing: border-box; position: static; padding-right: 80px;}
    
    div#zen-explanation.explanation {width: 100%;margin:0 auto; padding: 0 15px; box-sizing: border-box; padding-right: 80px;}  
    
    div#zen-participation.participation {width: 100%; margin:0 auto; box-sizing: border-box; padding-right: 80px;}
    
    div#zen-benefits.benefits {width: 100%; margin:0 auto; right:auto; box-sizing: border-box; position: static; padding-right: 80px;}
    
    div#zen-requirements.requirements {width: 100%; margin:0 auto; box-sizing: border-box;   padding: 0 15px; background-image: none; padding-right: 80px;}
    
    div#zen-requirements.requirements::after {
        content: url(img/img2.png);
        margin-left: 39%;
    }
    
    
    div#design-selection.design-selection {width: 100%; margin:0 auto; bottom: 0px; box-sizing: border-box;}
    
    div#design-archives.design-archives {width: 100%; margin:0 auto; right: auto; padding: 0px 16px 0; box-sizing: border-box;}
    
    div#zen-resources.zen-resources {width: 100%; margin:0 auto; right: auto; padding: 0px 16px 0; box-sizing: border-box;}
    
    footer {right: 14px; background: #fffefe66;}

}

@media only screen and (min-width: 769px) and (max-width: 1100px) {
    /* For tablets: */
    .intro header {width: 100%; background-position: center 29px; box-sizing: border-box; }
    
    .intro header h1 {line-height: 1em; padding-top: 110px;}
    
    .intro header h2 {font-size: 2,5em; text-align: left; padding-left: 2%; margin-bottom: 0px;}
    
    .summary p:nth-of-type(1) {width: 100%; margin:0 auto; right: 0px; top: 459px; box-sizing: border-box; position: static; padding: 10px 82px 10px 11px;}    
    
    .summary p:nth-of-type(2) {width: 100%; margin:0 auto; right: auto; top: 551px; box-sizing: border-box; position: static;} 
    
    div#zen-preamble.preamble {width: 100%; margin:0 auto; padding: 0 15px; box-sizing: border-box; padding-right: 80px;}
    
    div#zen-explanation.explanation {width: 100%;margin:0 auto; padding: 0 15px; box-sizing: border-box; padding-right: 80px;}  
    
    div#zen-participation.participation {width: 100%; margin:0 auto; box-sizing: border-box; padding-right: 80px;}
    
    div#zen-benefits.benefits {width: 100%; margin:0 auto; right:auto; box-sizing: border-box; position:static; padding-right: 80px;}
    
    div#zen-requirements.requirements {
        margin-top: 0;
        padding: 100px;
        background-color: lightsalmon;
        background-image: none;
        background-repeat: no-repeat;
        background-position: 85%;
        color: white;
        clear: both;
        padding: 0 15px;
        padding-right: 80px;
    }
    
    div#zen-requirements.requirements::after {
        content: url(img/img2.png);
        margin-left: 42%;
    }
    
    div#design-selection.design-selection {width: 100%; margin:0 auto; bottom: 0px; box-sizing: border-box;}
    
    div#design-archives.design-archives {width: 100%; margin:0 auto; right: auto; padding: 0px 15px 0; box-sizing: border-box;}
    
    div#zen-resources.zen-resources {width: 100%; margin:0 auto; right: auto; padding: 0px 15px 0; box-sizing: border-box;}
    
    footer{
        background: #fffefe66;
    }


}

@media only screen and (min-width: 1101px) and (max-width: 1350px) {
    .intro header {
        background-position: 23vw 7vh;
    }
    
    .intro header h1 {}
    
    .intro header h2 {}
    
    .summary p:nth-of-type(1) {
        width: 35%;
        top: 3vh;
        right: 12vw;
        padding: 24px 10px 10px 4vw;
    }
    
    .summary p:nth-of-type(2) {
        top: 45vh;
        width: 16%;
        padding: 10px 12vw 30px 15px;
    }
    
    div#zen-preamble.preamble {}
    
    div#zen-explanation.explanation {}  
    
    div#zen-participation.participation {}
    
    div#zen-benefits.benefits {
        top: 174vh;
        right: 1vw;
        width: 64%;
        margin: 0;
    }
    
    div#zen-requirements.requirements {
        background: url(img/img1.png) no-repeat lightsalmon 60vw;
        padding: 30px 44vw 60px 3vw;
    }
    div#design-selection.design-selection {}

    div#design-archives.design-archives {}

    div#zen-resources.zen-resources {}

    
}