body {
	margin: 0;
	padding: 0;
	background-color: #FEF6C9;

	display: flex;
	align-content: center;
	justify-content: center;

	color: #2E282A;
}

#holder {
	 /* we want to scale with the width of the screen
	  * formula derived using a lot of fiddling with 
	  * constants we want to depend on */
	width: clamp(35rem, 57rem, calc(100vw - 8rem));
	margin: clamp(0px, calc(8vw - 2.85rem), 5rem) 0;
	padding: 1rem;

	background-color: #D4DFC7;
	box-shadow: 0 0 20px #80808091;
	border-radius: 8px;
}

nav {
	margin-top: 2rem;
	font-size: small;

	ul {
		list-style: none;
		display: flex;
		justify-content: center;
		gap: 1rem;

		margin: 0;
		margin-top: 0.4rem;
		padding: 0.5rem;
	}

}

h1 {
	text-decoration: underline;
}

.delete-form {
	display: flex;
	justify-content: center;

	button {
		display: flex;
		background: none;
		border: none;
		cursor: pointer;
		width: fit-content;
		height: fit-content;
		padding: 3px;

		svg {
			fill: red;
		}
	}
}

.book-header {
	display: flex;
	justify-content: space-between;
	margin: 2rem 0;

	h1 {
		margin: 0;
	}

	button {
		border: 2px solid black;
		border-radius: 5px;
	}
}

.book-info {
	.book-facts {
		border: 1px solid #50a2a7;
		border-radius: 5px;
		margin-bottom: 1rem;

		.book-fact {
			display: flex;
			gap: 1rem;
			padding-left: 1rem;
			font-size: medium;
			list-style: none;

			a {
				color: black;
			}

			li:first-child {
				font-weight: bold;
				text-decoration: underline;
			}
			li:last-child {
				list-style: none;
			}
		}
	}

	.book-description {
		padding: 1rem;
		border: 1px solid #50a2a7;
		border-radius: 5px;
	}
}

.admins {
	padding-left: 0px;

	.admin {
		list-style: none;
		padding: 0.3rem;
		border: 1px solid #50a2a7;
		margin-top: 0.5rem;
		border-radius: 5px;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

.books {
	padding: 0px;


	.book {
		margin-inline: 1rem;
		margin-bottom: 1rem;
		padding: 1rem;

		list-style: none;
		border: 1px solid #50a2a7;
		border-radius: 5px;

		form {
			color: inherit;
			text-decoration: underline;
			font-weight: 650;
			margin-bottom: 0.2rem;
			margin-top: 0;
		}

		.book-facts {
			margin-top: 0.5rem;

			.book-fact {
				display: flex;
				gap: 1rem;
				font-size: small;
				padding-left: 1rem;

				li:first-child {
					text-decoration: underline;
				}
				li:last-child {
					list-style: none;
				}
			}
		}
	}
}

#add_book, #search_book, #add_admin {
	padding: 1rem;
	border: #A13D63 3px dotted;
	border-radius: 12px;

	label {
		display: block;
	}

	input, textarea, select {
		margin-bottom: 1rem;
		width: 100%;
		height: 1.2rem;
		box-shadow: 1px 2px grey;
	}

	select {
		height: 1.6rem;
	}
	
	textarea {
		resize: vertical;
		height: 7rem;
	}

	/* once the screen becomes to small we can not 
	 * place items next to each other, so just skip*/
	@media (min-width: 600px) {
		.form-group {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			column-gap: 2rem;

			margin-bottom: 1rem;

			input, select {
				margin-bottom: 0;
			}
		}
	}

	.form-item-label {
		display: flex;
		align-items: baseline;
		gap: 1em;

		span {
			font-size: 0.6em;
		}
	}

	button {
		width: 5rem;
	  	height: 2rem;
	  	background-color: #50A2A7;
	  	border: black 1px solid;
	  	border-radius: 5px;
		box-shadow: 2px 3px grey;
	}

	button:hover {
   		background-color: #448A8E;
   	}

	button:active {
		  box-shadow: 0px 1px grey;
		  transform: translateY(3px);
	}
}

footer {
	display: flex;
	justify-content: center;
	font-size: 0.7em;
}