body {
    font-family: "futura-pt", Arial, sans-serif;
    line-height: 1.6;
    color: #fff;
    background-color: #EDF2F9;
    margin: 0;
    padding: 0;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: left;
    padding: 1rem 2rem 0 2rem;
    background-color: #000;
    font-size: 0.8rem;
    font-weight: 100;
}

h1, h2 {
margin:0;
}

.formats a, .formats a:visited {color:white; text-decoration:none;}

div.logo {    
	padding-top:1rem;
}

nav ul {
    display: flex;
    list-style-type: none;
}

nav ul li {
    margin-left: 1rem;
}

nav ul li a {
    color: #F6F8F9;
    text-decoration: none;
}

.hero {
	height: 20em;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
}

.hero-content {
    text-align: left;
}

.book-cover {
    float:left;
    height:18em;
    margin-top:1em;
}

.tagline {
    width:8em;
    font-size: 2.2rem;
    margin-top: 10%;
    float:left;
    margin-left: 1.5rem;
    font-family: "American Typewriter", Arial, sans-serif;
	font-weight:500;
    line-height: 1.3;
    }

.book-nav {
	padding-top:1em;
    display: flex;
    justify-content: center;
    background: #000;
}
.flat-display {
    display: flex;
	gap: 2em;
}

.flat-cover {
width: 8em; padding-top:4em; }

.book-nav .book-cover {
    width:6em;
    height:auto;  }


.book-info {
	display:flex;
    justify-content: center;
	overflow:auto;
	max-width:90%;
    padding: 1rem 3rem;
    color: #000;
}

.reviews {
    margin-top:2rem;
    float:left;
    max-width:280px;
    font-size:22px;
    font-weight:100;
    font-style:normal;
}

.description {
    float:left;
    max-width:520px;
    margin-right:4rem;
}

.description p {
    font-family: "American Typewriter", Arial, sans-serif;
	font-size: 1.3em;
}

.book-details {
    float:left;
    max-width: 280px;
    margin-top:2rem;
}

.book-details h2 {
font-weight:200;
margin-top:0;
}

blockquote {
	max-width:280px;
    font-style: normal;
    margin:0;
    padding-bottom: 1rem;
    padding-right:2em;
    font-size:0.8em;
}

blockquote .large {
	font-size:1.8em;
	font-weight:500;
    line-height: 1.3;

}
blockquote b { font-weight:600; }

.price {
	font-weight:200;
    font-size: 1.2rem;
}

.formats {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.format {
    background-color: #333;
    color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
}

.distribution {
    font-size: 0.9rem;
    color: #666;
}

.cta-button {
    display: inline-block;
    background-color: #ff6600;
    color: #fff;
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: 3px;
    font-weight: bold;
}

footer {
width:100%;
    background-color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top:1rem;
}

.logo img { max-width:40px;}

.social-icons {
    display: flex;
    gap: 1rem;
}

.icon {
    color: #fff;
    text-decoration: none;
}

.list-social {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}

.list-unstyled {
margin: 0;
padding: 0;
list-style: none;
}

.visually-hidden { display:none; }

.list-social__item .icon-social {
height: 1.5rem;
width: 1.5rem;
padding:0.5rem;

}

@media only screen and (max-width: 720px) {


	img.book-cover { margin-left:-1em; }
	
	.hero { height:20em;}
	.hero img.flat-cover { padding-top:2em; }

	.flat-display { display:flex; gap:0.8em;}
	
	.hero img.flat-cover { margin-left:0; width:30vw;}
	
	.book-info {
		display: flex;
		flex-direction: column;
		}
		
    .reviews {
     margin-top:0.2rem;
       order: 2;
        width:100%;
        min-width:90%;
		margin-bottom:1.3em;
		padding-top:1em;
		font-size:1.2em;
    border-bottom:1px solid #242833;
    border-top:1px solid #242833;   }
    
    .description {
        order: 1;
        margin-bottom:1em;
        font-size:1.3em;
    }
    .book-details {
        order: 3;
    }
    
    blockquote {
    margin:0; padding:0; margin-bottom:1em;
    }
    
 .reviews, .description, .book-details {
	margin-right:0;
	}
.book-info {
    padding: 1rem;
	}
}

@media only screen and (max-width: 540px) {

	.hero { height:30em; }
.hero.shelf { height:18em;}
	.hero img { margin-left:1em; }
	.tagline { height:80vw; font-size: 2rem; width:90%; text-align: center;}
	.hero img.flat-cover { padding-top:2em; }
	.book-nav .flat-display img.flat-cover {width: 26vw;  padding;top:0; margin-top:2em;}
	.book-details { margin-top: -1rem; }
}