@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Vollkorn:ital,wght@0,600;1,500&display=swap');

:root {
	--accent-color: hsl(228.3, 39.1%, 61.4%);
	--quote-image-width: 140px;
	--border-rad: 7px;
	--quote-bg:hsl(234.5, 100%, 97.8%);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

a {
	text-decoration: none;
	color: var(--accent-color);
}

blockquote {
	position: relative;
	margin: 40px 0;
	padding: 1.6em 0.5em .7em calc(0.5em + var(--quote-image-width)); /*1.6em 2.4em .7em calc(1.4em + var(--quote-image-width));*/
	font: italic 1.2rem var(--type-quote);
	background: var(--quote-bg) no-repeat left / var(--quote-image-width);
	border-radius: var(--border-rad);
	/*border: 2px solid white;*/
	/*box-shadow: 2px 2px 4px #f25772;*/
	text-indent: 1em;
	text-align:left;
	/*font-family:Courier New;
	font-weight:bold;)*/
}

@media (min-width: 768px) {
	blockquote {
		margin: 40px 60px;
	}
}

blockquote::before {
	content: "";
	pointer-events: none;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	border-radius: var(--border-rad);
	/*box-shadow:
		inset -2px -2px 1px hsl(0 0% 100%),
		inset 2px 2px 4px hsl(0 0% 0% / 20%);*/
	/*box-shadow: inset -2px -2px 1px #f25772, inset 2px 2px 4px #ea90a0;*/
	box-shadow:0 8px 8px -4px #f25772; /* bottom shadow only*/
}

blockquote::after {
	content: "❝";
	/*font-family: Open Sans, Helvetica, Arial, sans-serif;*/ /* added later */
	font-family: Vollkorn; /* added later */
	position: absolute;
	z-index: 1;
	left: 50%;
	top: -2px;
	transform: translate(-50%, -50%);
	width: 1.3em;
	height: 1.3em;
	background: white;
	box-shadow: 0 4px 5px -1px hsla(0 0% 0% / 20%);
	border-radius: 999px;
	display: grid;
	place-content: center;
	padding-top: .5em;
	/*color: var(--accent-color);*/
	color:#27c66d;
	font-size: 36px;
	font-style: normal;
	text-indent: 0;
}

.blockquote-author-image {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--quote-image-width);
	height: 100%;
	opacity: 0.75;
	background: var(--accent-color) var(--image) no-repeat center / cover;
	background-blend-mode: hard-light;
	border-top-left-radius: var(--border-rad);
	border-bottom-left-radius: var(--border-rad);
}

cite {
	display: block;
	margin-top: 1rem; /*30px*/
	text-indent: 0;
	text-align: center;
	font: bold .9rem var(--type-body);
	text-transform: uppercase;
	color:#0035d5;
	/*color: hsl(0 0% 20%);*/
	word-wrap: break-word; /*later added*/
}

@media (min-width: 768px) {
	cite {
		margin-left: calc(1rem - var(--quote-image-width));
	}
}

.cite-last-name {
	/*background: var(--accent-color);*/
	background:#0035d5;
	font-weight:bold;
	color: var(--quote-bg);
	
}

.book-info {
  transition: margin-top 0.3s ease;
}