/* Body ----------------------------------------------------------------------------------------------------------*/
body{
    background-image: url('../img/backgroundimage.jpg');
    display: flex;
    flex-direction: column;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100%;
	background-size: cover;
}
@media only screen and (min-device-width: 600px) {
    body { 
        background-image: url('../img/backgroundimage.jpg');
    }
}
@media only screen and (max-device-width: 600px) {
	body {

	}
}

/* Color Palette -------------------------------------------------------------------------------------------------*/

.color-1 {
    background: rgba(106,130,107,1);
}

.color-2{
    background: rgba(116,20,65,1);
}

.color-3{
    background: rgba(82,116,162,1);
}

.color-4{
    background: rgba(73,54,40,1);
}

.color-5{
    background: rgba(167,119,57,1);
}



/*Navigation -----------------------------------------------------------------------------------------------------*/


.navlinks {
    background: rgba(116,20,65,.5); 
    border: rgba(116,20,65,1) solid 2.5px;
    border-radius: .7em;
    font-size: 1.3em;
    margin: .2em 1em .3em 1em;
}

.navlinks a {
    float: left;
    display: block;
    color: #f9f5dc;
    padding: 14px 16px;
    text-decoration: none;
}

.navlinks a:hover {
    background: rgba(82,116,162,.5);
}

/* Archive List Styling ----------------------------*/

.review {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    list-style: none;
}

.rlinks {
    font-size: 1em;
    padding: 4px 0px 4px 0px;
    }

.rlinks a {
    text-decoration: none;
    color: rgba(82,116,162,1);
    
}

.rlinks a:hover {
    background: rgba(82,116,162,.5);
}

/* Responsive Design ----------------------------------------------------------------------------------------------------*/


/* Typography ----------------------------------------------------------------------------------------------------*/
/* Quotation & Navigation = font-family: ''Architects Daughter', cursive; */

h1 {
    font-family: 'Lobster', regular;
    font-size: 4em;
    text-transform: uppercase;
    color: rgba(116,20,65,1);
    text-shadow: 5px 5px 5px #000;
}

h2 {
    font-family: 'Lobster', regular;
    text-transform: none;="/css
    font-size: 3em;
    color: black;
}

h3 {
    font-family: 'Lobster', regular;
    text-transform: none;
    font-size: 2em;
    color: black;
    text-align: center;
    background: rgb(106,130,107);
    moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 178px;
    border-radius: 300px / 400px;
    margin-top: 12px;
}

h4 {
    font-family: 'Lobster', regular;
    text-transform: none;
    font-size: 1.5em;
    color: black;
    text-align: center;
    background: rgb(106,130,107);
    moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 178px;
    border-radius: 300px / 400px;
    clear: both;
}

p {
    font-family: 'Architects Daughter', cursive;
    text-transform: none;
    font-size: 1.2em;
    color: black;
}

ol {
	font-family: 'Architects Daughter', cursive;
    text-transform: none;
    font-size: 1.2em;
    color: black;
    text-indent: 40px;
    list-style-type: none;
}

li {
	font-family: 'Architects Daughter', cursive;
    text-transform: none;
    font-size: 1.2em;
    color: black;
}

.pr {
    font-size: 1.2em;
    padding: 10px 203px 10px 20px;
}

.zero {
	background-image: url(/img/0.png);
	background-position-x: right;
	background-repeat: no-repeat;
}

.one {
	background-image: url(/img/1.png);
	background-position-x: right;
	background-repeat: no-repeat;
}

.two {
	background-image: url(/img/2.png);
	background-position-x: right;
	background-repeat: no-repeat;
}

.three {
	background-image: url(/img/3.png);
	background-position-x: right;
	background-repeat: no-repeat;
}

.four {
	background-image: url(/img/4.png);
	background-position-x: right;
	background-repeat: no-repeat;
}

.five {
	background-image: url(/img/5.png);
	background-position-x: right;
	background-repeat: no-repeat;
}

button {
    font-family: 'Architects Daughter', cursive;
    font-size: 1.2em;
    background: #6a826b;
    border: none;
    text-align: center;
    text-decoration: none;
    border-radius: 25px;
    padding: 15px;
    display: contents
}

button:hover {
    background: #741441;
   color: #741441;
}

.copyright {
    color: #f9f5dc;
    text-align: center;
    font-size: .75em;
}

/* Post ----------------------------------------------------------------------------------------------------------*/

.post {
    background-image: linear-gradient( to right, rgba(255,255,255,1), rgba(255,255,255,.7) );
    padding: .2em 1em .5em 1em;
    border-radius: 2em;
    border: rgba(106,130,107,1) solid 2px;
    max-width: 1300px;
    width: 80%;
    margin: 2em auto 4em auto;
    box-shadow: 0.3125em 0.3125em 0.625em black;
    position: relative;
}

.post img {
	width: 300px;
}

.year img {
	width: 700px;
	display: block;
	margin: auto;
}

img.amazon {
    width: 150px;
    display: block;
    margin: 10px auto 10px auto;
}

.post img.bvm {
	display: block;
    width: 700px;
    padding: 20px;
    margin: auto;
    float: none;
}

.post img.meme {
    display: block;
    width: 500px;
    margin: 20px auto 20px auto;
    float: none;
    
}

.post .date {
	text-align: right;
	display: block;
	margin-top: 10px;
	margin-right: 3px;
	font-family: 'Architects Daughter', cursive;
	font-size: 1.2em
}

.post .series {
	text-align: right;
	display: block;
	margin-top: 10px;
	margin-right: 3px;
	margin-bottom: 2px;
	font-family: 'Architects Daughter', cursive;
	font-size: 1.2em
}

div.year, div.productlist {
	display: none;
}

section {
    position: 10em;
}

div.buynow, div.image {
	width: 300px;
	float: left;
	display: block;
	padding: 20px;
}

div.product {
	width: 800px;
	display: block;
	padding: 20px;
	margin: 0 auto 0 auto;
	border-bottom: solid black 1px;
}

div.product::after, div.buynow::after {
	clear: both;
	content: "";
	display: table;
}

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

div.responsive {
    margin: 10px;
    border: 1px solid #ccc;
    background-color: #f9f5dc;
    display: inline-table;
    width: 300px;
    font-family: 'Architects Daughter', cursive;
    text-transform: none;
    font-size: 1.2em;
}

div.responsive:hover {
    border: 1px solid #777;
}

div.responsive img {
    width: 300px;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
    color: #000000
}


/* Comments -------------------------------------------------------------------------------------------------------*/

#HCB_comment_box {
    padding: .2em 1em .5em 1em;
    border-radius: 2em;
    border: rgba(106,130,107,1) solid 2px;
    max-width: 1300px;
    width: 80%;
    margin: 2em auto 4em auto;
    box-shadow: 0.3125em 0.3125em 0.625em black;
    position: relative;
}


/* Contact --------------------------------------------------------------------------------------------------------*/

section {
    background-image: linear-gradient( to right, rgba(255,255,255,1), rgba(255,255,255,.6) );
    padding: .2em 1em .5em 1em;
    border-radius: 2em;
    border: rgba(106,130,107,1) solid 2px;
    max-width: 90%;
    min-width: 80%;
    margin: 2em auto 4em auto;
    box-shadow: 0.3125em 0.3125em 0.625em black;
    position: relative;
}

.contact{
  display: block;
  background: rgba(106,130,107,1);
  border-radius: 15px;
  list-style: none;
  margin: 12px auto 12px auto;
  position: relative;
  padding: 10px;
  width: 400px;
  color: #f9f5dc;
}

.con{
  background: #f9f5dc;
  border-radius: 25%;
  position: absolute;
  padding: 6px;
  right: -10px;
  bottom: -10px;
}

.icon {
    height: 40px;
    width: 40px;
}


/* Button --------------------------------------------------------------------------------------------------------*/

.button {
   border-top: 1px solid #69806a;
   background: #6a826b;
   background: -webkit-gradient(linear, left top, left bottom, from(#6a826b), to(#6a826b));
   background: -webkit-linear-gradient(top, #6a826b, #6a826b);
   background: -moz-linear-gradient(top, #6a826b, #6a826b);
   background: -ms-linear-gradient(top, #6a826b, #6a826b);
   background: -o-linear-gradient(top, #6a826b, #6a826b);
   padding: 8px 16px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   
    color: #f9f5dc;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 50px;
    height: 25px;
   }

.button:hover {
   border-top-color: #5273a2;
   background: #5273a2;
   color: #ccc;
   }

.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }


/* Banner Styling ------------------------------------------------------------------------------------------------*/
/*.banner {*/
/*
    background:
    linear-gradient( rgba(167,119,57,.0), 
    rgba(167,119,57,.40) ),
    url(../img/wood3.jpeg)
    bottom center no-repeat;
*/
   
/*
    border: 10px solid black;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
*/
}

/*
.title{
    flex-grow: 1;
    text-align: center;
    font-size: 7em;
}
*/

/*
.logo {
    width: ;
    height: 70%;
    border: 7px solid black;
*/
    
/*}    */

.banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.bannerImg {
    
    padding: 15px;
    margin: 5px;
    border: 10px solid black;
}


    
/* Media Queries -------------------------------------------------------------------------------------------------*/
/* Mobile: 320px = 20em */
@media screen and (min-width: 20em) { 

    .title {
/*        text-align: center;*/
        font-size: 3em;
    }
    
/*
    .logo{
        width: 10%;
        height: 10%;
        border: 7px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
    }
*/
  
}
    
/* Tablet:  768px = 160em */
@media screen and (min-width: 48em)  {

    .title {
/*        flex-grow: 1;*/
/*        text-align: center;*/
        font-size: 7em;
    }
    
/*
    .logo{
        width: 20%;
        height: 20%;
        border: 7px solid black;
        position: relative;
    }
*/
 
}
    
/* Desktop: 1280px = 80em */
@media screen and (min-width: 80em) { 

    .title {
/*        flex-grow: 1;*/
/*        text-align: center;*/
        font-size: 5em;
    }
    
/*
    .logo{
        width: 30%;
        height: 30%;
        border: 7px solid black;
        position: relative;
    }
*/
    
}