:root {
	--cBrown: #463020;
	--cModalBackground: #cbc2b9e0;
	--cInputFieldColor: #dbd2c75e;
	--cBeige: #f4f2e9;
	--cDarkerBeige: #e0c8a6;
	--cBeigeGreyish: #cbc2b9;
	--cBeigeGreyishLight: #dbd2c7;
	--cBeigeGreyishLightUltra: #e9dfd4;
	--cOrangeish: #bb7d58;
	--cOrangeEarthy: #d07338;
	--cGreen: #989f76;
	--cRed: #984b42b2;
	--mMargin: 10px;
}

* {
	margin: 0;
	padding: 0;
	font-family: 'Montserrat Alternates', sans-serif;
	color: var(--cBrown);
}
html {
	height: 100%;
}
body {
	background-color: var(--cBeigeGreyish);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}
/* Nav */
nav {
	margin: var(--mMargin);
}
.nav-title {
	display: flex;
	align-items: center;
	gap: var(--mMargin);
}
#books-icon {
	font-size: 50px;

	color: var(--cBrown);
}

h1 {
	font-size: 30px;
	font-weight: 500;
	color: var(--cOrangeish);
}
h1 em {
	font-style: normal;
	font-weight: 700;
	color: var(--cBrown);
}
@media only screen and (min-width: 600px) {
	h1 {
		font-size: 50px;
	}
	.books-icon {
		font-size: 70px;
	}
}

/* BOOK TABLE */
/* 'Book List' and 'add new book' btn */
.books-section {
	margin: var(--mMargin);
	height: 80%;
}

.btn-container {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mMargin);
}

.books-section h2 {
	margin: var(--mMargin) 0;
}

.add-new-book-btn {
	margin: var(--mMargin) 0;
	width: 155px;
	height: 35px;
	text-decoration: none;
	box-shadow: none;
	border-radius: 5px;
	border: 2px solid var(--cBrown);
	background-color: var(--cGreen);
	font-weight: bold;
	font-size: 15px;
}
.fa-book {
	margin-right: 5px;
}

/* Book table */

.book-table {
	border-collapse: collapse;
	border-spacing: 0;
	background-color: var(--cBeigeGreyishLight);
}

.headings {
	border: 3px solid var(--cBrown);
	text-align: left;
}

.book-row {
	border-left: 3px solid var(--cBrown);
	border-right: 3px solid var(--cBrown);
	border-bottom: 1px solid var(--cBrown);
}
.book-table:last-child {
	border-bottom: 3px solid var(--cBrown);
}

.book-table th,
.book-table td {
	padding: var(--mMargin);
}

@media only screen and (max-width: 600px) {
	.book-table th,
	.book-table td {
		font-size: 10px;
	}
}
/* MODAL: add new book */
.hideModal {
	visibility: hidden;
}
.top-of-container {
	display: flex;
	align-items: center;
	margin-left: var(--mMargin);
}
.top-of-container h2 {
	font-weight: 500;
	color: var(--cOrangeish);
}
.top-of-container h2 em {
	font-style: normal;
	font-weight: 700;
}
.n-b-modal-container {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: var(--cModalBackground);
	display: flex;
	align-items: center;
	justify-content: center;
}
.add-new-book {
	border: solid 7px var(--cBrown);
	border-radius: 5px;
	width: fit-content;
	height: fit-content;
	background-color: var(--cBeigeGreyishLightUltra);
}

.close-modal {
	color: var(--cOrangeish);
	font-size: 30px;
	display: block;
	margin: 5px 5px 5px auto;
	cursor: pointer;
}
.input-text {
	border: none;
	border-bottom: 2px solid var(--cBrown);
	background-color: var(--cInputFieldColor);
}
.input-text:focus {
	outline: 2px solid var(--cOrangeEarthy);
	border: none;
}
fieldset {
	border: none;
	margin: var(--mMargin);
}
.status-choice {
	border: 2px solid var(--cBrown);
	cursor: pointer;
}

.star-rating-container {
	display: flex;
}
.star-rating-container label {
	margin: 0 5px 0 0;
}
.the-stars {
	display: flex;
}
.the-stars div {
	margin: 0 5px;
}
.the-stars div ion-icon {
	color: var(--cBrown);
	font-size: 20px;
}
.form-btn {
	padding: 5px 15px;
	border-radius: 5px;
	box-shadow: none;
	border: 2px solid var(--cBrown);
	font-weight: bold;
	cursor: pointer;
}
.btn-save {
	background-color: var(--cGreen);
}
.btn-reset {
	background-color: var(--cBeigeGreyish);
}
.btn-edit {
	display: none;
}
.user-comment {
	width: 100%;
}
.btn-containers-in-modal {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

/* Form validation */
.validation-issue {
	font-style: italic;
	font-size: 13px;
	color: var(--cOrangeEarthy);
}
.hide-issue {
	display: none;
}
.input-not-valid {
	border: solid 2px var(--cRed);
	background-color: var(--cRed);
	font-weight: bold;
}

/* selected stars */
.selectedStar .starIcon {
	color: var(--cOrangeEarthy);
}

/* mini stars (stars inside table) */
.ministarIcon {
	font-size: 9px;
	margin: 0 1px 0 0;
	color: var(--cBrown);
}

/* Modal delete book */
.modal-delete-book {
	border: solid 7px var(--cBrown);
	border-radius: 5px;
	width: fit-content;
	height: fit-content;
	background-color: var(--cModalBackground);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.modal-delete-book h3,
.modal-delete-book button {
	margin: var(--mMargin);
}
.modal-delete-book h3 {
	padding: 0 var(--mMargin);
	text-align: center;
}
.keep-btn {
	background-color: var(--cGreen);
}
.delete-btn {
	background-color: var(--cRed);
}
.btn-container-modal-delete-book {
	margin-bottom: 25px;
}

.trashIcon,
.editIcon {
	cursor: pointer;
}

/* Footer */
footer {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 0 0 0;
	min-height: 50px;
}
footer p {
	margin-right: 7px;
	color: var(--cBrown);
}
footer ion-icon {
	font-size: 20px;
	padding-left: 5px;
}