@font-face{
        font-family: wiener_norm;
	src: url('wiener_norm.otf');
}

.page {
        height: 1080px;
        align-items: center;
}

.blogpage {
        height: 4000px;
        align-items: center;
}

.navbar ul{
        list-style-type: none;
        background-color: White;
        padding: 0;
        margin: 0;
        text-align: center;
        overflow: hidden;
        align-items: center;
}

.navbar a{
        color: LightGray;
        text-decoration: none;
        padding: 20px;
        display: block;
}

.navbar a:hover{
        color: #580C28;
}

.navbar li{
        display: inline-block;
}


.container {
        margin: 1% 1% 0 1%;
        display: grid;
        grid-template-columns: 21fr 28fr 21fr 21fr;
        grid-template-rows: repeat(1,1fr);
        grid-column-gap: 2%;
        grid-row-gap: 5px;
        grid-template-areas:
            ". h2 productpic . "
            ". . productpic . "
            ". button . . "
            ". . . . "

}

.blogcontainer {
        margin: 1% 1% 0 1%;
        display: grid;
        grid-template-columns: 21fr 28fr 21fr 21fr;
        grid-template-rows: auto;
        grid-column-gap: auto;
        grid-row-gap: auto;
        grid-template-areas:
            ". bookheader bookpic ."
            ". booklede bookpic ."
}

.blogcontainer_longread {
        margin: 1% 1% 0 1%;
        display: grid;
        grid-template-columns: 21fr 28fr 21fr 21fr;
        grid-template-rows: auto;
        grid-column-gap: auto;
        grid-row-gap: auto;
        grid-template-areas:
            ". bookheader bookpic ."
            ". booklede booklede ."
}

.shopcontainer {
        margin: 1% 1% 8% 1%;
        display: grid;
        grid-template-columns: 21fr 28fr 21fr 21fr;
        grid-template-rows: auto;
        grid-coumn-gap: auto;
        grid-row-gap: auto;
        grid-template-areas:
            ". bookheader bookpic ."
            ". booklede bookpic ."
            ". bookspec bookpic ."
            ". bookbuy bookpic ."
}

.ubercontainer {
        margin: 1% 1% 8% 1%;
        display: grid;
        grid-template-columns: 21fr 28fr 21fr 21fr;
        grid-template-rows: auto;
        grid-coumn-gap: auto;
        grid-row-gap: auto;
        grid-template-areas:
            ". bookheader bookpic ."
            ". booklede bookpic ."
}

.bookheader {
        grid-area: bookheader;
        font-size: 1.0rem;
        font-family: wiener_norm;
        color: #0F0F0F;
        text-decoration: none;
}

.booklede {
        grid-area: booklede;
        font-size: 1.0rem;
        font-family: wiener_norm;
        color: #0F0F0F;
        text-decoration: none;
}

.bookspec {
        grid-area: bookspec;
        font-size: 1.0rem;
        font-family: wiener_norm;
        color: #0F0F0F;
        text-decoration: none;
}

.bookbuy {
        grid-area: bookbuy;
}


.shopcontainer img {
        object-fit: cover;
        margin: auto;
        display: block;
}

.bookpic {
        grid-area: bookpic;
        /* border: 1px dotted DarkGreen; */
        /* border-radius: 8px; */

}

.productpic {
        grid-area: productpic;
        border: 1px solid LightGray;
        align-self: start;
        justify-self: start;
        max-width: auto;
        max-height: 100%;
}


.logo {
        grid-area: logo;
        align-self: start;
        justify-self: center;
        width: 50%
        max-width: auto;
        max-height: 100%;
}

.grid-text0 {
        grid-column-start: 1;
        grid-column-end: 2;
        font-family: wiener_norm;
}

.grid-text1 {
        grid-column-start: 2;
        grid-column-end: 3;
        font-family: wiener_norm;
}

.grid-text2 {
        grid-column-start: 3;
        grid-column-end: 4;
        font-family: wiener_norm;
}

.grid-text3 {
        grid-column-start: 4;
        grid-column-end: 5;
        font-family: wiener_norm;
}

.a
{
        text-decoration: none;
}

.h2 {
        grid-area: h2;
        font-family: wiener_norm;
	    font-size: 1.8rem;
        text-align: left;
        color: #0F0F0F;
	    line-height: normal;
}

header {
        text-align: center;
        font-family: wiener_norm;
	    font-size: 1.8rem;
        color: #0F0F0F;
}

.title2
{
        font-family: wiener_norm;
        font-size: 1.4rem;
        text-align: left;
        color: #0F0F0F;
        line-height: 0.1;
}

.h1
{
        grid-area: h1;
        font-family: wiener_norm;
	    font-size: 2.6rem;
	    text-align: left;
	    color: #0F0F0F;
	    line-height: 0.1;
}

.h3
{
        font-family: wiener_norm;
        text-align: left;
        color: #0F0F0F;
}

/* running text */
.rt {
        grid-area: rt;
        font-size: 1.0rem;
        font-family: wiener_norm;
        color: #0F0F0F;
        text-decoration: none;
}

.rtsmall {
        grid-area: rt;
        font-size: 0.75rem;
        font-family: wiener_norm;
        color: #0F0F0F;
        text-decoration: none;
}

.rtcart {
        font-size: 1.0rem;
        font-family: wiener_norm;
        color: #0F0F0F;
        text-decoration: none;
        position: relative;
        left: 50%;
}

.product {
        font-size: 1.0rem;
        font-family: wiener_norm;
        color: 0#F0F0F;
        padding-left: 25px;
        opacity: 50%;
}

.checkoutgenre {
        font-size: 1.0rem;
        font-family: wiener_norm;
        color: 0#F0F0F;
        opacity: 50%;
        text-align: right;
}

.rt1 {
        grid-area: rt;
        font-size: 1.0rem;
        font-family: wiener_norm;
        color: #0F0F0F;
        text-decoration: none;
}

.rt2 {
        grid-area: rt;
        font-size: 1.0rem;
        font-family: wiener_norm;
        color: #0F0F0F;
        text-decoration: none;
}

.rtcheckout {
        font-size: 1.0rem;
        font-family: wiener_norm;
        color: #580C28;
        text-decoration: none;
        text-align: right;
        margin: auto;
}


.textspotify
{
        font-family: wiener_norm;
        font-size: 0.8rem;
        color: #1ED760;
        text-decoration: none;
}

input::placeholder {
        font-family: wiener_norm;
        color: #0F0F0F;
}

.button {
        grid-area: button;
        background-color: #397F23;
        border: none;
	    border-radius: 10px;
	    color: white;
	    text-align: center;
	    text-decoration: none;
	    display: inline-block;
        font-family: wiener_norm;
	    font-size: 1rem;
	    font-weight: 500;
	    cursor: pointer;
        width: 150px;
	    height: 33px;
}


.footer {
        text-align: center;
        color: #0F0F0F;
}


#footer-container {height: 100%; width:100%; font-size: 0}
#left {display: inline-block; *display: inline; zoom: 1; vertical-align: top; text-align: right; font-size: 1rem; width: 45%}
#middle {display: inline-block; *display: inline; zoom: 1; vertical-align: top; text-align: center; font-size: 1rem; width: 10%}
#right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; text-align: left; font-size: 1rem; width: 45%}
#middle2 {display: inline-block; *display: inline; zoom: 1; vertical-align: top; text-align: center; font-size: 1rem; width: 100%}
#middle3 {display: inline-block; *display: inline; zoom: 1; vertical-align: top; text-align: center; font-size: 1rem; width: 100%}