/* test css rule */

/* controlling the body of the page */

/* reset rule to set defaults to zero */
* { margin: 0;
    padding: 0;
    border: 0;
    box-sizing: 0;

}
    /* page color */
body { 
    background-color: rgb(148, 224, 221);
    font-family: 'Red Hat Mono', monospace;
    background-image: -moz-linear-gradient(Springalley);
     }

/* controlling the headline 1 */
     h1  { 
    font-family: 'Red Hat Mono', monospace;
    margin:0px;
    text-align: center;
        }
/* type selector*/
    header 
        { 
    background-color: rgb(50, 245, 154);}

    p   {
        margin: 40px; /* 10px top and bottom, 40px left and right */
        text-align: center;
        }
    h2  { 
        text-align: left;
        background-color: rgb(50, 245, 154);
        border: 2px solid rgb(62, 178, 245);
        }
/* descendent selector */
ul li {
    margin-left: 50px;
    margin-top: 30px;
    margin-right: 700px;
    color: black;
    text-shadow: 2px 2px 2px black;
    padding: 10px; border: 4px solid white;
    background-color: rgba(201, 219, 228, .8);
        }
/* class selector*/
.AttentionMessage1 {
    background-color: rgb(245, 241, 7);
    color: black;
    font-weight: bold;
    margin-top: 270px;
    margin-left: 30%;
    margin-right: 30%;
}

nav { 
    margin: 30px 10px 50px 10px; /* top right bottom left*/

}
.button1 {
    display: block; /* make them into a block element*/
    background-color: rgb(207, 221, 11);
    color: black;
    font-weight: bold;
    text-decoration: none; /*remove the underline*/
    border-radius: 16px;
    padding: 12px; /* space between text and border */
    width: 200px;
    text-align: center;
    margin: 20px auto;

    /* transition effect for button hover */
    transition: all 300ms ease-in-out;
}
/*pseudo class*/
.button1:hover {
    background-color: rgb(87, 230, 21);
    color: white;

}
.background {
    background-image: url(../images/Springalley.JPG);
    background-size: cover;
    /* filter: opacity(50%); */
    min-height: 600px;
    background-position: center 70%;
     
}