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

body {
  background-image: url('images/bg.png');
  background-repeat: repeat;
  background-color: #4A3E54;
  color: #7691ac;
  font-family: "Manrope", sans-serif;
}

a {
  color: black;
}

a:hover {
  text-decoration: none;
}

#wrapper {
  margin: auto;
  width: 700px;
}

#header, #footer {
  height: 230px;
  text-align: center;
}

#header img {
  width: 506px;
}

#middle-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
}

#content, #sidebar {
  border-radius: 20px;
  padding: 20px;
  margin: 10px;
}

/* content */

#content {
  width: 80%;
  background-color: white;
  text-align: center;
  height:fit-content;
}

#content img {
  border-radius: 20px;
}

#main-content-box {
  margin: 10px;
}

#main-content-box p {
  margin: 8px 0;
}

.main-img {
  width: 500px;
  margin: 10px 0;
}

/* Sidebar */

#sidebar {
  width: 20%;
  background-color: rgb(201, 218, 161);
  height:fit-content;
}

#sidebar p {
  font-size: 14px;
  color: #4A3E54;

}

#sidebar h1 {
  font-size: 14px;
  font-weight: bolder;
  margin-bottom: 12px;
  color: rgb(73, 28, 99);
}

#sidebar ul {
  width: 100%;
}

#sidebar li {
  list-style-type: none;
  margin-bottom: 10px;
}

.nav-button {
  background: white;
  border: 0px;
  border-radius: 10px;
  text-align: center;
  color: #4A3E54;
  font-weight: bold;
  text-decoration: none;
  width: 100px;
  height: 50px;
}

.nav-button:hover {
  background-color: rgb(141, 156, 104);
  color: white;
}

#villager-box {
  width: 100px;
}
#villager-box img {
  width: 100%;
}

/* da-box */
#da-box {
  display: flex;
  flex-direction: row;
  width: 80%;
  margin: auto;
  background-color: antiquewhite;
  padding: 10px;
  margin-top: 10px;
  border-radius: 20px;
}

#da-img-box{
  width: 100px;
}

#da-img-box img {
  width: 100%;
  border-radius: 33px;
  border: 10px solid rgb(219, 201, 177);
;
}

/* Footer */

#footer {
  color: white;
}

#footer a {
  color: white;
}

#footer a:hover {
  text-decoration: none;
  color: grey;
}