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

.homebutton {
    font-size: 150%;
    margin-bottom: 50px;
}



/* root selector. you can also use html as the selector */
:root {
    font-size: 62.5%; /* this is 10/16 */
}

body {
    background-color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.8rem; /* rem stands for room em - 1.4rem is equivalent to 14px */
    padding-bottom: 1000px; /* create an artificially really tall, scrollable page */
}

header {
    background-color: rgb(144, 238, 144, .9);
    min-height: 100px; /* fixed height instead of min-height */
    position: fixed; top: 0; left: 0;
    width: 100%; /* return the header block to its natural 100% width */
    z-index: 10; /* controls the layering of positioned elements. Bigger number is on top */

}
#slanted-design-element {
    background-color: rgb(144, 238, 144, .9);
    min-height: 380px;
    padding-top: 100px;
    transform: skewY(4deg);
}
header h1 {
    text-align: right;
    text-shadow: 2px -2px 3px rgb(37, 109, 37);
    font-size: 5rem; /* 5rem is = to 50px */
    padding: 10px 30px 5px 0px; /* top right bottom left */
}

/* paragraph that's next to my h1 that's within the header */
header h1 +p {
    text-align: right;
    padding: 5px 30px 5px 0px;
    text-transform: lowercase;
}

/* style the main nav menu for the page/site */
header nav {
    margin: 20px 8px;
    text-align: center; /* centers text, but also centers inline elements */
}
header nav a {
    text-decoration: none;
    background-color: white; border: 2px solid darkgreen;
    padding: 10px 15px;
    transition: box-shadow 300ms ease-out;
    margin: 2px 25px;
}

header nav a:hover {
    box-shadow: 3px 5px rgba(214, 247, 26, 0.9),
                5px 10px rgba(144, 247, 26, 0.7),
                7px 15px rgba(115, 243, 60, 0.5),
                9px 20px rgba(20, 109, 53, 0.3);
}

/* style the nav menu articles */
main {
    margin: 20px 0px;
    padding: 15px;
}

article {
    background-color: rgba(214, 247, 26, 0.8);
    color: #222;
    font-size: 2rem;
    margin: 40px;
    padding: 15px;
}

article h2 span {
    font-size: 4rem; color: darkgreen;
    border: 2px solid darkgreen;
}

article h2 span::before {
    content:"#";
}

article p {
    margin: 20px 0px;
}
article img:hover {
    border: 5px solid red;
    box-shadow: 5px 5px 5px black;
}