/* css Zen Garden default style v1.02 */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */

/* This file based on 'Tranquille' by Dave Shea */
/* You may use this file as a foundation for any new work, but you may find it easier to start from scratch. */
/* Not all elements are defined in this file, so you'll most likely want to refer to the xhtml as well. */

/* Your images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */


/* basic elements */

@import 
url('https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,600,700,900&display=swap');


a:link { 
	font-weight: bold; 
	text-decoration: none; 
	color: #b3ccba;
    
    
    font-weight: 400;
    letter-spacing: .1vw;
    text-transform: uppercase;
	}
a:visited { 
	font-weight: bold; 
	text-decoration: none; 
	color: #b3ccba;
	}
a:hover, a:focus, a:active { 
	text-decoration: none; 
	color: #604774;
    transition: .5s
	}
abbr {
    border-bottom: none;}




body { 
    font-family: 'Poppins', sans-serif; 
	font:75%;
    width: 100%;
	margin: 0; 
	padding: 0;
	}

.page-wrapper {
    width: 100%;
    background: url(zen_bg.svg) no-repeat;
    background-size: cover;
    margin: 0; 
    position: absolute;   
}

[role=banner] {
    width: 50%;
    margin: auto;
    text-align: center;
    margin: 22%;
    margin-bottom: 40%;

}

header h1{
    margin: 0;
}
h1 {
    font-size: 4.5vw;
    font-weight: 900;
    letter-spacing: .2vw;
}
h2 {
    font-size: 1.6vw;
    margin: 0;
    font-weight: 500;
    letter-spacing: .8vw;
}
h3 {
    font-size: 1.6vw;
    margin: 0;
    font-weight: 400;
    letter-spacing: .5vw;
    text-transform: uppercase;
}

.summary {
    width: 50%;
    margin: auto;
    font-size: 1vw;
    font-weight: 300;
    letter-spacing: .1vw;
    line-height: 2vw;
}
.preamble {
    width: 50%;
    margin: auto;
    margin-top: 8%;
    font-size: 1vw;
    font-weight: 300;
    letter-spacing: .1vw;
    line-height: 2vw;
}
.explanation {
    width: 50%;
    margin: auto;
    margin-top: 5%;
    font-size: 1vw;
    font-weight: 300;
    letter-spacing: .1vw;
    line-height: 2vw;
    margin-bottom: 35%;
}

.participation {
    width: 43%;
    margin: auto;
    margin-top: 8%;
    margin-right: 19%;
    font-size: 1vw;
    font-weight: 300;
    letter-spacing: .1vw;
    line-height: 2vw;
}
.benefits {
    width: 43%;
    margin: auto;
    margin-right: 19%;
    margin-top: 5%;
    font-size: 1vw;
    font-weight: 300;
    letter-spacing: .1vw;
    line-height: 2vw;
    margin-bottom: 23%;
}

.requirements {
    width: 50%;
    margin: auto;
    margin-left: 19%;
    margin-top: 5%;
    font-size: 1vw;
    font-weight: 300;
    letter-spacing: .1vw;
    line-height: 2vw;
    margin-bottom: 10%;
}

[role=contentinfo] {
    margin: auto;
    margin-top: 10%;
    font-size: 1.3vw;
    font-weight: 300;
    letter-spacing: .1vw;
    line-height: 2.5vw;
}



footer  {
    width: 50%;
    margin: auto;
    margin-bottom: 30%;
}

footer a {
    float: left; 
    width: 20%;
    text-align: center;
    text-decoration: none;
}
.zen-validate-html {
    background: url(pink.png) no-repeat;
    background-position: center bottom;
    width: 91px;
    height: 100px;
    transition: background-position .6s ease;
}
.zen-validate-html:hover {
    background-position: center 25px;
    color: #b3ccba;
}
.zen-validate-css {
    background: url(purple.png) no-repeat;
    background-position: center bottom;
    width: 91px;
    height: 100px;
    transition: background-position .6s ease;
}
.zen-validate-css:hover {
    background-position: center 25px;
    color: #b3ccba;
}

.zen-license {
    background: url(yellow.png) no-repeat;
    background-position: center bottom;
    width: 91px;
    height: 100px;
    transition: background-position .6s ease;
}
.zen-license:hover {
    background-position: center 25px;
    color: #b3ccba;
}
.zen-accessibility {
    background: url(darkpurple.png) no-repeat;
    background-position: center bottom;
    width: 91px;
    height: 100px;
    transition: background-position .6s ease;
}
.zen-accessibility:hover {
    background-position: center 25px;
    color: #b3ccba;
}
.zen-github {
    background: url(white.png) no-repeat;
    background-position: center bottom;
    width: 91px;
    height: 100px;
    transition: background-position .6s ease;
}
.zen-github:hover {
    background-position: center 25px;
    color: #b3ccba;  
}




#zen-supporting {
    width: 100%;
    margin-bottom: 10%;
}
#design-selection {
    width: 25%;
    margin: auto;
    font-size: 1vw;
    font-weight: 300;
    letter-spacing: .1vw;
    line-height: 2vw;
    margin-bottom: 5%;
}
#design-archives {
    width: 25%;
    margin: auto;
    font-size: 1vw;
    font-weight: 300;
    letter-spacing: .1vw;
    line-height: 2vw;
    margin-bottom: 25%;
}
ul {
    list-style:none;
    padding: 0;
}

#zen-resources {
    width: 25%;
    margin: auto;
    margin-bottom: 2%;
    padding-bottom: 1.5%;
    box-sizing: border-box;
    font-size: 1vw;
    font-weight: 300;
    letter-spacing: .1vw;
    line-height: 2vw;
    text-align: center;
    
}