/* Global Styling  */
:root {
  --btnBackground: #351C75;
  --btnBackgroundHover: #BD60E7;
  --btnTextColor: #ffffff;
}

body {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Crect stroke='%23ffffff' stroke-width='0.8' width='1' height='1' id='s'/%3E%3Cpattern id='a' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='rotate(79 1000 750) scale(29.4) translate(-965.99 -724.49)'%3E%3Cuse fill='%23fcfcfc' href='%23s' y='2'/%3E%3Cuse fill='%23fcfcfc' href='%23s' x='1' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s' x='2' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s'/%3E%3Cuse fill='%23f7f7f7' href='%23s' x='2'/%3E%3Cuse fill='%23f7f7f7' href='%23s' x='1' y='1'/%3E%3C/pattern%3E%3Cpattern id='b' width='7' height='11' patternUnits='userSpaceOnUse' patternTransform='rotate(79 1000 750) scale(29.4) translate(-965.99 -724.49)'%3E%3Cg fill='%23f5f5f5'%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' y='5' /%3E%3Cuse href='%23s' x='1' y='10'/%3E%3Cuse href='%23s' x='2' y='1'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='8'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='5' y='2'/%3E%3Cuse href='%23s' x='5' y='6'/%3E%3Cuse href='%23s' x='6' y='9'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='h' width='5' height='13' patternUnits='userSpaceOnUse' patternTransform='rotate(79 1000 750) scale(29.4) translate(-965.99 -724.49)'%3E%3Cg fill='%23f5f5f5'%3E%3Cuse href='%23s' y='5'/%3E%3Cuse href='%23s' y='8'/%3E%3Cuse href='%23s' x='1' y='1'/%3E%3Cuse href='%23s' x='1' y='9'/%3E%3Cuse href='%23s' x='1' y='12'/%3E%3Cuse href='%23s' x='2'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='2'/%3E%3Cuse href='%23s' x='3' y='6'/%3E%3Cuse href='%23s' x='3' y='11'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='4' y='10'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='c' width='17' height='13' patternUnits='userSpaceOnUse' patternTransform='rotate(79 1000 750) scale(29.4) translate(-965.99 -724.49)'%3E%3Cg fill='%23f2f2f2'%3E%3Cuse href='%23s' y='11'/%3E%3Cuse href='%23s' x='2' y='9'/%3E%3Cuse href='%23s' x='5' y='12'/%3E%3Cuse href='%23s' x='9' y='4'/%3E%3Cuse href='%23s' x='12' y='1'/%3E%3Cuse href='%23s' x='16' y='6'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='d' width='19' height='17' patternUnits='userSpaceOnUse' patternTransform='rotate(79 1000 750) scale(29.4) translate(-965.99 -724.49)'%3E%3Cg fill='%23ffffff'%3E%3Cuse href='%23s' y='9'/%3E%3Cuse href='%23s' x='16' y='5'/%3E%3Cuse href='%23s' x='14' y='2'/%3E%3Cuse href='%23s' x='11' y='11'/%3E%3Cuse href='%23s' x='6' y='14'/%3E%3C/g%3E%3Cg fill='%23efefef'%3E%3Cuse href='%23s' x='3' y='13'/%3E%3Cuse href='%23s' x='9' y='7'/%3E%3Cuse href='%23s' x='13' y='10'/%3E%3Cuse href='%23s' x='15' y='4'/%3E%3Cuse href='%23s' x='18' y='1'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='e' width='47' height='53' patternUnits='userSpaceOnUse' patternTransform='rotate(79 1000 750) scale(29.4) translate(-965.99 -724.49)'%3E%3Cg fill='%23F60'%3E%3Cuse href='%23s' x='2' y='5'/%3E%3Cuse href='%23s' x='16' y='38'/%3E%3Cuse href='%23s' x='46' y='42'/%3E%3Cuse href='%23s' x='29' y='20'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='f' width='59' height='71' patternUnits='userSpaceOnUse' patternTransform='rotate(79 1000 750) scale(29.4) translate(-965.99 -724.49)'%3E%3Cg fill='%23F60'%3E%3Cuse href='%23s' x='33' y='13'/%3E%3Cuse href='%23s' x='27' y='54'/%3E%3Cuse href='%23s' x='55' y='55'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='g' width='139' height='97' patternUnits='userSpaceOnUse' patternTransform='rotate(79 1000 750) scale(29.4) translate(-965.99 -724.49)'%3E%3Cg fill='%23F60'%3E%3Cuse href='%23s' x='11' y='8'/%3E%3Cuse href='%23s' x='51' y='13'/%3E%3Cuse href='%23s' x='17' y='73'/%3E%3Cuse href='%23s' x='99' y='57'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23b)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23h)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23c)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23d)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23e)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23f)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23g)' width='100%25' height='100%25'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  font-family: 'Titillium Web', Arial, Helvetica, sans-serif;  
  font-size: 20px;
  margin: 0;
  padding: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Main Section Buttons Styling */
button {
  padding: 5px 5px 5px 5px;
  background: var(--btnBackground);
  color: var(--btnTextColor);
  border: 0;
  border-radius: 7px;
  /* round corners */
  cursor: pointer;
}

/* Main Section Buttons Hover Styling */
button:hover {
  background: var(--btnBackgroundHover);
}

.navTitle {
  font-weight: 900;
  font-size: xx-large;
  color: black;
}

.bookTitle {
  text-decoration: none;
  color: rgb(18, 187, 9);
  margin-bottom: 5px;
  text-transform: uppercase;
}

.bookDesc { 
  padding: 2px;
  background-color: #ffffff;
}

.reviewTitle{
  color: rgb(97, 149, 185);  
  margin-bottom: 5px;
  text-transform: uppercase;
}

.reviewDescMain {
  font-weight: 400;
  text-align: left;
}

.reviewDescTwo {
  font-size: 25px;
  font-style: italic;
}

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

.reviewCreate {
  font-weight: bold;
  font-style: italic;
  font-size: 18px;  
  color: black;
}

.reviewBoxCont {
  margin-top: 10px;
  border-style: solid;
  background-color: rgb(113, 143, 62);
}

.formCont {
  margin-top: 10px;
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}


.commentCont {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  max-width: 75%;
  background-color: rgb(113, 143, 62);
}

.commentOwner {
  font-size: 14px;
}

.btnComment {
  margin-top: 10px;
}

.commentText {
  font-weight: bold;
  padding-top: 10px;
  background-color: rgb(113, 143, 62);
}

.commentCont {
  border-style: dashed;
}

.headerRow {
  background-color: #e3f2fd;
  margin-bottom: 10px;
}

a:link {
  color: rgb(97, 149, 185);
}

a:visited {
  color: rgb(18, 187, 9);
}

a:hover {
  color: rgb(87, 20, 255);
}

.login {
  margin-left: 25px;
}

.signup {
  margin-left: 25px;
}

.form-group {
  margin-top: 10px;
}
/* Cards */
.card-block {
  font-size: 1em;
  position: relative;
  margin: 0;
  padding: 1em;
  border: none;  
  box-shadow: none;   
}

.review-card-block {
  font-size: 1em;
  position: relative;
  margin: 0;
  padding: 1em;
  border: none;
  border-top: 1px solid rgba(34, 36, 38, .1);
  box-shadow: none;   
}

.cover-block {    
  margin: 0;
  padding: 1em;
  border: none;  
  box-shadow: none;   
}

.card {
  font-size: 1em;
  overflow: hidden;
  padding: 2;
  border: none;
  border-radius: .28571429rem;
  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
  margin-top:auto;
}

.btn {
margin-top: auto;
}

/* slider */
#ratingSlider {
  width: 15%; 
  margin: 0 auto;
}

/* Slider handle */
#ratingSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; 
  height: 20px;
  border-radius: 50%;
  background-color: #64d120; 
  cursor: pointer;
}

/* Slider track */
#ratingSlider::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px; 
  background-color: #18c9e1; 
  border-radius: 5px;
}

#ratingValue {
  font-size: 20px;
  margin-top: 10px;
}