@import url('https://fonts.googleapis.com/css?family=Cinzel:700');

h1 {color: white; text-align: center; font-family: 'Cinzel', serif;
}
h2 {color: white; text-align: center;font-family: 'Cinzel', serif;
}
h3 {color: blue; text-align: center;font-family: 'Cinzel', serif; font-size: 20px;
}

p {color: white;
   padding: 5px;
   text-align: justify;
   text-indent: 20px;
   font-family: 'Cinzel', serif; font-size: 11px
    }

div {position: relative; display: block;}


body {font-family: 'Cinzel', serif; display: grid;}

ul {list-style-type: none;
    margin: auto;
    padding: 0;
    width: 400px;
    background-color: #f1f1f1;}

li a {display: block;
      color: #000;
      padding: 8px 16px;
      text-decoration: none;}

li a:hover {background-color: #555;
            color: white;}

section { 
         
         }

footer {width: auto;
        padding: 0 10px;
        margin: 0 -5px; 
        clear: both; 
        display: block;
        margin-bottom: 20px; }

footer { width: 100%;
         background-color: #EBFFD8;
         color: blue;
         text-align: center;}

.supporting footer {
    background: #EBFFD8; margin-top: 10px;
    font-size: 22px;
    height: 65px;
    text-align: center;
    width: 100%;
}

aside {
    background: #2babe1;
    border-top: 5px solid #edf6ff;
    clear: both;
    display: block;
    float: left;
    margin-bottom: -5px;
    width: 100%;
}




.select {text-align: center;color: blue; display: inline-block;}
.archives {text-align: left;color: blue; display: inline-block;}
.resources {text-align: left;color: blue; display: inline-block;}

#css-zen-garden {background-image: url("water.jpg");
                 background-position: center;
                 background-repeat: no-repeat;
                 background-size: cover;}



.preamble 

.intro { padding: 15px;
         color: white;
         border-style: double; 
         border-width:2px; display: inline;
         border-color: white;  margin-right: 5px; grid-column: span 3;
         width: auto; float: left; display: table; border-bottom: 5px solid #EBFFD8;
        }

.explanation {
    margin: 0 5% 0 2.5%;
    width: 42.5%; display:inline;
}
.explanation {
    float: left;
    margin-left: 1.5%;
    max-width: 495px;
    padding-bottom: 15px;
    position: relative;
    left: 50%; border-bottom: 5px solid #EBFFD8; display: inline;
}


.participation {
    columns: 2;
    border-top: 5px solid #EBFFD8;
    padding-top: 15px; border-bottom: 5px solid #EBFFD8;
    width: 100%; display: inline;
}



.benefits {
    margin-top: -10%;
    border-bottom: 5px solid #EBFFD8;
    margin-bottom: 25px;
    margin: 45px 10px;
    padding: 150px 0 50px 0;
    width: 100%; display: inline; position: relative;
}

.requirements {
    left: auto;
    margin-left: 0;
    padding: 0 5%;
    width: 90%; display: inline; position: relative; margin-left: -40%;
}
.requirements {
    left: 50%;
    margin-left: -40%;
    max-width: 1040px;
    min-height: 350px;
    
    position: relative;
    width: 100%; display: inline; position: relative;
}




.zen-validate-html {text-align: center;
                    
                    padding: 15px;}

.zen-license {
              text-align: center;
              padding: 15px}

.zen-accessibility {
                    text-align: center;
                    padding: 15px;}

.zen-github {
             text-align: center; padding: 15px;
             }

.zen-validate-css {padding: 15px;
                   text-align: center;
                   }


.sidebar {background-color: #eee; background-size: contain;
          color: black; 
          display: inline-block;
          font-size: 11px;}



.sidebar  {    background-color: #EBFFD8;
    border-top: 5px solid #edf6ff;
    clear: both;
    
  }