html{
    background-image: linear-gradient(to bottom, black 5%, blueviolet 95%);
}
/*styling for the body*/
main {
    float: none;
    width:auto;
}
/*Banner*/
main h1 {
    color: black;
    text-shadow: -3px 2.5px 3px blueviolet;
}
main h2 {
    padding: .5em 1em;
    font-variant: small-caps;
}
main p {
    padding: 1em 2.5em;
}
main a {
    padding: .5em 1.5em;
}
main img {
    float: right;
}
footer { background-color: blueviolet; color: black; }

@media only screen and (max-width: 966px) {     /*get rid of some extra padding*/
    main{
        padding: 0 1em 1em 1em;
    }
    main h2 {
        padding: .2em .5em
    }
    main p {
        padding: .2em 1em;
    }
}

@media only screen and (max-width: 700px) {     /*get rid of more padding and straighten borders*/
    main {padding: 0;}
    main section{
        border-radius: 0;
        border-style: groove none none none;
    }
}