Body{
 Background:#f0d2d1;
 text-align: center;
 margin: 0;
 font-family: "adorn-smooth-condensed-sans", sans-serif;
 font-weight: 400;
 font-style: normal;
 color: #7a5c61
}

title {
      margin-top: 20px;
      font-size: 20px;
      letter-spacing: 2px;
      color: #7a5c61;
}

.logo {
  font-family: "playfair-display", serif;
  font-weight: 400;
  font-style: italic;
  Text-align:left;
  font-size: 30px;
  line-height: 0;
  color: #b26b72;
}

.topics{
 Text-align:right;
 font-family: "adorn-smooth-condensed-sans", sans-serif;
 font-weight: 400;
 font-style: normal;
 color: #7a5c61;
 font-size: 20px;
 line-height: 0;
}

.travel {
  text-decoration: none;
  color: #3b2f2f;
}
.restaurant {
  text-decoration: none;
  color: #3b2f2f;
}
.beveragespots {
  text-decoration: none;
  color: #3b2f2f;
}

.names{
 word-spacing: 340px;
 font-size:25px;
 Text-align:center;
 Padding-top:0px;
}


.flex-container {
	display: flex;
	width: 100%;
	flex-direction:row; /* can also do column */
	flex-wrap:nowrap; /* the boxes don't go to the next line */
        padding: 20px;
        gap: 40px;
        justify-content: center; 
}

.top{
 padding-top:0px; 
 width:100%;
}

.flexed-item-100 {
  width:100%;
  Background:#f3ede7;
  border: none;
  Text-align:right;
  padding: 20px;
  margin-bottom:20px;
  height:50px;
  overflow:hidden;      
}

.up{
  Padding-top:0px;
}

.flexed-item-25 {
	border: 0px solid #000;
        width: 23%;
        font-size:25px;
        justify-content:center;
        Gap:40px;
}

.card {
  background-color: #b26b72;
  padding: 10px;
  border-radius: 20px;
  border: none; /* remove black border */
  margin: 40px;
}

.card img {
  width: 300px;   /* smaller size */
  height: auto;   /* keeps proportions */
  border-radius: 20px;
  padding: 10px;
}