:root { --page-color: rgb(255, 202, 44) }
a:focus, a:hover {color: #952Cff}

/*styling for the body*/
main {
    float: none;
    width:auto;
    padding: 0 1em;
}
/*Banner*/
main h1 {
    text-shadow: -3px 2.5px 3px var(--page-color);
}
main h2 {
    padding: .5em 1em;
    font-variant: small-caps;
}
main p {
    padding: .5em 2.5em;
}
main a {
    padding: .5em 1.5em;
}
.soon {
    text-decoration: none;
    color: red;
    font-style:italic;
}
main section {
    width: 100%;
    min-height: 210px;
    border-style: groove solid;
    border-color: #952Cff;
    background-color: rgba(0, 0, 0, 0.85);
    border-width: 5px 2px;
    border-radius: 25px;
}
#bookCover {
    float:right;
    padding: 0 2em 2px 2em;
    max-width: 10%;
    min-width: 70px;
}

@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;
    }
    #extra-space {
        display: none;
    }
}