#hero {
	display:flex;
	font-family: "Literata", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;	
	text-align:center;
	justify-content:center;
	max-height:600px;
		
}

#hero > div:nth-of-type(1){
	flex: 1;
	align-self:center;
}

#hero > div:nth-of-type(2){
	flex: 1;
}

#hero img {
	z-index:2;
	position:relative;
}

#hero_title{
	font-size:60px;
	text-shadow: 1px 1px 2px #241F1F;
	color:#EFD673;	
	position:relative;
	z-index:3;	
	padding:25px;
}

#hero_title span {
  letter-spacing: 0.05em; /* Gives Brave's layout engine a safety buffer */
  display: inline-block;
}

#hero_subtitle{
	font-size:40px;
	text-shadow: 1px 1px 2px #241F1F;
	color:#EFD673;	
	position:relative;
	z-index:3;	
}

#hero_text_title{
	color:#F5FDDA;
	font-size:30px;
	padding:20px;
	position:relative;
	z-index:3;
}

#hero_text{
	color:#F5FDDA;
	width:80%;
	text-align:left;
	align-self:center;
	margin-left:auto;
	margin-right:auto;
	line-height:30px;
	position:relative;
	z-index:3;	
}

.wrapper {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index:3;
}

#hero_author{
	font-size:50px;
	self-align:center;
	color:#EFD673;	
	text-shadow: 1px 1px 2px #241F1F;
	position:relative;
	z-index:3;	
}

#hero_break{
	width:70%;
	height:3px;
	background-color:#F5FDDA;	
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
	position:relative;
	z-index:3;
}

#smoker{
	position:absolute;
	margin-top: 12%;
	margin-left: 25%;
	z-index:1;
  
}

.smokepuff {
    display: block;
    position: absolute;
    bottom: -35px;
    left: 50%;
    margin-left: -20px;
    height: 0;
    width: 0px;
    border: 35px solid #4b4b4b;
    border-radius: 35px;
    left: -14px;
    opacity: 0;
    transform: scale(0.2);
}

.buy-now-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #EFD673;
  color: #ffffff;
  font-family: inherit;
  font-size: 2rem;
  font-weight: 600;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index:999;
  position:relative;
  margin-top:15px;
  margin:10px;
}

.buy-now-btn:hover {
  background-color: #cfb139;
}

.buy-now-btn:active {
  transform: scale(0.98);
}

.buy-now-btn:focus-visible {
  outline: 3px solid #cfb139;
  outline-offset: 2px;
}

@keyframes smokeL {
    0% {
        transform: scale(0.2) translate(0, 0);
    }
    10% {
        opacity: 1;
        transform: scale(0.2) translate(0, 5px);
    }
    100% {
        opacity: 0;
        transform: scale(1) translate(-50px, -80px);
    }
}
 
@keyframes smokeR {
    0% {
        transform: scale(0.2) translate(0, 0);
    }
    10% {
        opacity: 1;
        transform: scale(0.2) translate(0, 5px);
    }
    100% {
        opacity: 0;
        transform: scale(1) translate(50px, -80px);
    }
}

#our_books{
	margin-top:100px;
}

#our_books, #coming_soon {
	font-family: "Literata", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;		
	width:100%;
	text-align:center;
	color:#EFD673;
	text-shadow: 1px 1px 2px #241F1F;
	font-size:50px;
	padding:0px;
	position:relative;
	z-index:3;	
}


@media only screen and (min-width : 1100px) and (max-width : 1300px) {	

	#hero_title{
		font-size:40px;
	}
	
	#hero_subtitle{
		font-size:30px;
	}
	
	#hero_text_title{
		font-size:25px;
	}
	
	#hero_author {
		font-size:40px;
	}
	
	#hero_text {
		font-size:16px;
	}


}


@media only screen and (min-width : 0px) and (max-width : 1100px) {	

	#hero_title{
		font-size:32px;
	}
	
	#hero_subtitle{
		font-size:28px;
	}
	
	#hero_text_title{
		font-size:25px;
	}
	
	#hero_author {
		font-size:30px;
	}
	
	#hero_text {
		font-size:16px;
	}


}


@media only screen and (min-width : 0px) and (max-width : 1024px) {	

	#hero{
		flex-flow:column wrap;
		max-height:100%;
	}

}

@media only screen and (min-width : 0px) and (max-width : 800px) {	


}