*,
html {
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  display: flex;
  flex: wrap;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}

.card {
  flex-direction: row;
  padding: 20px;
  margin: 10px;
  flex-flow: wrap;
  /* border: 1px solid black; */
}

.card.card-wide {
  width: 500px;
  max-width: 100%;
  box-sizing: border-box;
}

.card.card-wide ul {
  width: 50%;
}

.card input.search {
  width: 100%;
  border-radius: 3px;
  padding: 5px;
  border: none;
  background-color: rgb(245 245 245);
  background-image: linear-gradient(
    120deg,
    rgb(245 245 245),
    rgb(234, 234, 234)
  );
  text-shadow: 1px 1px rgb(245 245 245);
  box-shadow: 3px 3px 5px rgba(222, 222, 222, 0.1);
  font-size: 16px;
}

div#app {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

h3 {
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: "Patua One", cursive;
  letter-spacing: 1px;
}

ul {
  display: block;
  width: 20em;
  padding: 0;
}

ul.netherlands {
  width: 90%;
}

li {
  list-style: none;
  float: left;
  padding: 5px;
  background-color: #eae0ff;
  background-image: linear-gradient(120deg, #eae0ff, #d8c7fc);
  color: #6c4caf;
  box-shadow: 3px 3px 5px rgb(214 201 245 / 30%);
  text-shadow: 1px 1px #cfcad9;
  margin: 5px;
  margin-left: 0px;
  margin-right: 10px;
  border-radius: 3px;
}

li.landmark {
  background-color: rgb(228, 255, 224);
  background-image: linear-gradient(
    120deg,
    rgb(228, 255, 224),
    rgb(197, 249, 189)
  );
  text-shadow: 1px 1px rgb(228, 255, 224);
  box-shadow: 3px 3px 5px rgb(228 255 224 / 50%);

  color: #36904c;
}

.final-card li {
  background-color: #fff7b5;
  background-image: linear-gradient(120deg, #fff7b5, #f9ef8f);
  box-shadow: 3px 3px 5px rgba(253, 255, 224, 0.5);
  text-shadow: 1px 1px #fff7b5;
  color: #8a7324;
}