@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root{
	--title-font-family: 'figtree';
	--body-font-family: 'albert sans';
	--margin: 1.25rem;
	--accent-color: #e0e0e0;

	font-size: 16px;
}

nav{
	display:none;
}

body{
	margin-top:-1.25rem;
}

header p{padding-bottom: 2rem;}

div{
	margin:-1.25rem;
}

.bookshelf{
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

}

.book{
	font-family: var(--title-font-family);
	font-size: 2.5rem;
	font-weight: bold;
	aspect-ratio: 1/1;
	width: 100%;
	display: flex;
	position: relative;
	padding: 3rem;
	line-height: 3rem;
	color: black;
}

.book p:last-child{
	border: 1px solid black;
	border-radius: 5rem;
	padding: 1% 3%;

	position: absolute;
	bottom: 2rem;
	right: 1.25rem;
	/* margin: 0; */
	margin: 1.5rem 2rem;
}

.book:nth-child(1){
	background-color: #ADBFFD;
}

.book:nth-child(2){
	background-color: #D0FF71;
}

.book:nth-child(3){
	background-color: #FF6735;
}

footer{
	font-family: var(--title-font-family);
	font-size: 1.25rem;
	margin: 2.5rem -1.25rem -1.25rem;
}

@media(min-width: 768px){

	header p{ 
		max-width: 41.5rem;
	}

	.bookshelf{
		display:flex;
		flex-direction: row;
	}

	.book{
		transition: border-radius 0.4s ease-in-out, background-color 0.4s ease;
	}

	.book:hover{
		border-radius: 50%;
	}

	.book:hover:nth-child(1){
		background-color: #6C7BCC;
	}

	.book:hover:nth-child(2){
		background-color: #89D244;
	}

	.book:hover:nth-child(3){
		background-color: #D93612;
	}

}