* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f3e4d8;
}

ul {
  display: flex;
  align-items: center;
  list-style: none;
  justify-content: space-between;
}

h1 {
  font-family: "Nunito", sans-serif;
  font-size: 1.5rem;
}

h3 {
  color: darkgray;
  font-family: "Nunito", sans-serif;
  font-size: 1.1rem;
}

a {
  text-decoration: none;
}
.wrapper {
  display: flex;
  flex-direction: column;
  align-content: center;
  padding: 30px;
  margin: 30px;
  border-radius: 30px;
  background: white;
}


nav ul {
  display: flex;
  justify-content: space-between;

}

nav input {
  position: relative;
  background: rgb(241, 241, 241);
  flex:4;
  border: none;
  font-family: "Nunito", sans-serif;
  font-size:1rem;
  border-radius: 10px;
  padding: 10px 20px;
  text-align: left;
}

nav button {
  transform: scale(0.8) translateX(-200%);
  background: none;
  border: none;
  cursor: pointer;
}

nav h1 {
  flex:2;
  margin-right:20px;
}

.properti {
  flex: 1;
  margin-left: 15%;
}

nav #number h3{
  background: #3a2097;
  padding: 7px 14px;
  border-radius: 50%;

}

nav #heart h3{
  color: ##3a2097;
}

nav #lang h3{
  color: rgb(75, 75, 75);
}

#number, #heart, #lang {
  margin-left:20px;
}

#hamburger {
  display: none;
}

.menubar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px 0px;
}

.menubar li {
  margin-left: 40px;
}

.menubar #selected {
  margin-left: 0px;
}

.menubar #selected h3 {
  color:#3a2097;
  
}
#selected::after {
  position: absolute;
  content: "●";
  
  font-size: 0.5rem;
  color:#3a2097;
  margin: 0px 20px;
}

.banner {
  
  background: linear-gradient(to right, #f3e4d8,#f3e4d8,#3a2097);
  border-radius: 30px;
  padding: 50px;
}

.banner h3 {
  margin-top: 10px;
  font-size: 1.3rem;
}

.banner h1 {
  font-size: 2.5rem;
  color: #3a2097;
}

.banner button {
  padding: 10px 20px;
  margin-top: 20px;
  border: none;
  color: white;
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
  background: #b8a480;
  border-radius: 5px;
}

.title ul {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  margin-bottom: 10px;
}

.title h1 {
  font-size:2rem;
}


.popularNow ul #bookCover{
background:#3a2097;
width: 12rem;
height: 250px;
border-radius: 20px;
margin-right: 2%;
}

#bookList {
  flex-wrap: wrap;
}

.popularNow #bookList h3 {
  color:#222222;
font-size: 1.3rem;
margin-top: 10px;
}

.popularNow #bookList h4 {
  color: darkgray;
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
}

#score {
  justify-content: flex-start;
}

#score img {
  height: 1rem;
  width: 1rem;
  margin-right:0.5rem;
  color:gold;
}

@media screen and (max-width: 768px) {
  input::placeholder {
    color: transparent;
  }
  #number, #heart, #lang {
    display: none;
  }
#hamburger {
  display: inline-block;
  width: 3.5rem;
  margin-left: 50%;
}
.menubar h3 {
  font-size : 0.9rem;
  margin: 0px;
}

.menubar ul {
  margin: 0px;
}
}

@media screen and (max-width: 519px) {
  #bookList {
    justify-content: center;
}