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

body {
    background-color: #ddebdd;
    background-image: url("/images/zen.jpg"); background-repeat: no-repeat; background-attachment: fixed;
    position: relative;
}

.page-wrapper {
    width: 98vw;
}

.intro {
    width: 98vw;
}

header {
    width: 100vw;
}

h1 {
    outline: 2px solid green;
    background-color: darkseagreen;
    width: 100vw;
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 3em;
    text-align: center;
    position: fixed;
    top: 2px; right: 2px; left: 2px;
}

h2 {
    border: 2px solid green; border-radius: 10px;
    background-color: rgba(238, 238, 238, 0.9);
    margin-top: 80px; margin-bottom: 20px;
    width: 80%;
    margin: 70 auto; margin-left: 2%;
    font-family: 'Montserrat Alternates', sans-serif;
    padding: 15px;
}

abbr {
    display: inline;
    color: darkgreen;
}

p {
    border: 4px double green; border-radius: 10px;
    background-color: rgba(154, 195, 154, .85);
    margin: 10px;
    padding: 10px;
    width: 40%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.3em;
    margin-left: auto; margin-right: 400px;
    color: #111;
}

a {
    color: blue;
}

a:hover {
    color: darkblue;
}

div[role="main"] {
    width: 100vw;
}

div[role="article"] {
    margin: 70px;
}

h3 {
    border: 2px solid green; border-radius: 10px;
    background-color: rgba(238, 238, 238, .9);
    margin-top: 20px; margin-bottom: 20px;
    width: 80%;
    margin: 70 auto; margin-left: 2%;
    font-family: 'Montserrat Alternates', sans-serif;
    padding: 10px;
}

footer {
    border: 2px solid green;
    height: 100px;
    background-color: darkseagreen;
    width: 83%;
}

footer a {
    font-family: 'Montserrat Alternates', sans-serif;
    margin: 50px;
    font-size: 1.5em;
    padding: 20px;
}

/* Not sure how to make this scroll behind the h1. Also, was hoping to make this element scroll a little slower so it would reach its end at the same time as the rest of the content reached the end. But I'm not sure how to do that and Google was turning up some JavaScript so I figured I would hold off for now. */
aside {
    background-color: rgba(210, 242, 254, 0.9);
    border: 2px solid darkgreen; border-radius: 5px;
    position: absolute; top: -20px; right: 0px;
    height: 100%;
}

.wrapper {
    height:91.75vh;
}

aside h3 {
    border: 2px dotted green;
}

.design-selection {
    width: 100%;
}

nav {
    width: 100%;
}

ul {
    list-style-type: none;
}

li {
    margin-top: 20px; margin-bottom: 20px;
    padding-left: 3px;
}

li a {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: darkgreen;
    text-decoration: none;
}

li a:hover {
    text-decoration: underline;
}

li a:link, a:visited {
    color: darkgreen;
}

.design-archives {
    border-top: 5px double green;
    border-bottom: 5px double green;
}

span {
    color: blue;
    font-size: 1.5em;
}

.zen-resources {
    border-bottom: 5px double green;
}

div[role="presentation"] {
    border: 2px solid rgba(210, 242, 254, 0);
    width: cover;
}