* {
    margin:0; padding:0; border: 0; box-sizing: border-box;
}

#css-zen-garden {
    background-color: olivedrab;
    background-image: url(../images/world-tree.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-shadow: 3px 1px 4px;
    word-spacing: -5em;
    letter-spacing: 4em;
    text-align: center;
    color: plum;
    /* text-transform: capitalize; */
}

.page-wrapper {
    border: solid 6px rgba(140,245,140,.35);   

}

.intro {
    border-bottom: solid 6px rgba(140,245,140,.35);
}


.intro:hover {
    /* border: solid red 4px; */
    background-color: rgba(140,245,140,.35);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-transform: uppercase;
    font-size: larger;
    text-shadow: none;
    word-spacing: normal;
    letter-spacing: normal;
    transition: 3s ease-in;
    text-align: center;
    overflow: visible;
    
    ;
}

.intro:after {
    content: "Zen";
    color: black;
    background-color: teal;
    transition: 5s ease-in-out;
    letter-spacing: 3em;
    border-radius: 5px;
    text-align: right;
    size: larger;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

}

.intro:hover::after {
    background-color: plum;
    letter-spacing: .2em;
    transition: 9s ease-in-out;

}

header[role="banner"] {
    /* border: solid 4px red; */
    padding: 10px;
    margin: 4px;
    letter-spacing: 1.5em;
    
}

header[role="banner"] {
    color: peachpuff;
    background-color: palegreen,transparent 5%;
    transition: 9s ease-in-out;
    font-size: xx-large, normal;
    letter-spacing: .75em;
}

h3 {
    color:darkkhaki;
    text-shadow: 4px 2px 0px black;
    letter-spacing: 1.25em;
    transition: 9s ease-in-out;
    font-size: x-large;
    text-transform: uppercase;
    
}

a {
    color: forestgreen;
    text-decoration: none;
    text-transform: lowercase;
    background-color: palegoldenrod;
    border-radius: 15px;
    padding: 1px;

}

.main {
    border-bottom: solid 6px rgba(140,245,140,.35);
}


.main:hover {
    /* border: solid red 4px; */
    background-color: rgba(140,245,140,.35);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-transform: normal;
    font-size: larger;
    text-shadow: none;
    word-spacing: normal;
    letter-spacing: normal;
    transition: 3s ease-in;
    text-align: center;
    overflow: visible;
    
    ;
}

.main:after {
    content: "Zen";
    color: black;
    background-color: teal;
    transition: 5s ease-in-out;
    letter-spacing: 3em;
    border-radius: 5px;
    text-align: right;
    size: larger;
    font-family: Verdana, Geneva, Tahoma, sans-serif;

}

.main:hover::after {
    background-color: plum;
    letter-spacing: .2em;
    transition: 9s ease-in-out;

}


#design-archives {
    border-bottom: solid 6px rgba(140,245,140,.35);
}

#design-archives:hover {
    /* border: solid red 4px; */
    background-color: rgba(140,245,140,.35);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-transform: uppercase;
    font-size: larger;
    text-shadow: none;
    word-spacing: normal;
    letter-spacing: normal;
    transition: 3s ease-in;
    text-align: center;
    overflow: visible;
    
    ;
}

#design-archives:after {
    content: "Zen";
    color: black;
    background-color: teal;
    transition: 5s ease-in-out;
    letter-spacing: 3em;
    border-radius: 5px;
    text-align: right;
    size: larger;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

}

#design-archives:hover:after {
    background-color: plum;
    letter-spacing: .2em;
    transition: 9s ease-in-out;

}


#zen-resources {
    border-bottom: solid 6px rgba(140,245,140,.35);
}

#zen-resources:hover {
    /* border: solid red 4px; */
    background-color: rgba(140,245,140,.35);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-transform: uppercase;
    font-size: larger;
    text-shadow: none;
    word-spacing: normal;
    letter-spacing: normal;
    transition: 3s ease-in;
    text-align: center;
    overflow: visible;
    
    ;
}

#zen-resources:after {
    content: "Zen";
    color: black;
    background-color: teal;
    transition: 5s ease-in-out;
    letter-spacing: 3em;
    border-radius: 5px;
    text-align: right;
    size: larger;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

}

#zen-resources:hover::after {
    background-color: plum;
    letter-spacing: .2em;
    transition: 9s ease-in-out;

}


.design-selection {
    border-bottom: solid 6px rgba(140,245,140,.35);
}

.design-selection:hover {
    /* border: solid red 4px; */
    background-color: rgba(140,245,140,.35);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-transform: uppercase;
    font-size: larger;
    text-shadow: none;
    word-spacing: normal;
    letter-spacing: normal;
    transition: 3s ease-in;
    text-align: center;
    overflow: visible;
    
    ;
}

.design-selection:after {
    content: "Zen";
    color: black;
    background-color: teal;
    transition: 5s ease-in-out;
    letter-spacing: 3em;
    border-radius: 5px;
    text-align: right;
    size: larger;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

}

.design-selection:hover::after {
    background-color: plum;
    letter-spacing: .2em;
    transition: 9s ease-in-out;

}