html {
    margin: 0;
}
 
/* flex direction to make it responsive */
body {
      background-color: #000000;
      font-family: "Nanum Myeongjo", serif;
      font-size: 17px;
      align-content: center;
      margin: 0;

}
/* title */
.menu-title {
          color: rgb(255, 255, 255);
          font-family: "Parisienne", serif;
          margin-top: 2rem;
          display: flex;
          justify-content: center;
}

/* rows */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.4rem;

}
/* pics */
.thumbnail {
  flex: 1;
  display: flex;
  justify-content: center;

  align-items: flex-end;
  color: white;

  height: 50vh;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 20px;
}


#img1 {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.567), rgba(255, 255, 255, 0.207)), url('../images/pizza.jpg');
}

#img2 {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.567), rgba(255, 255, 255, 0.207)), url('../images/pesto.jpg');
}

#img3 {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.567), rgba(255, 255, 255, 0.207)), url('../images/carbonara.jpg');

}

#img4 {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.567), rgba(255, 255, 255, 0.207)), url('../images/bruschetta.jpg');
}

#img5 {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.567), rgba(255, 255, 255, 0.207)), url('../images/ravioli.jpg');
}

#img6 {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.567), rgba(255, 255, 255, 0.207)), url('../images/funghi.jpg');
}

#img7 {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.567), rgba(255, 255, 255, 0.207)), url('../images/zafferano.jpg');
}

#img8 {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.567), rgba(255, 255, 255, 0.207)), url('../images/carne.jpg');
}

#img9 {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.567), rgba(255, 255, 255, 0.207)), url('../images/gnocchi.jpg');
}


#img10 {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.567), rgba(255, 255, 255, 0.207)), url('../images/pasta-vongole.jpg');
}

#img11 {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.567), rgba(255, 255, 255, 0.207)), url('../images/tiramisu.jpg');
  }
  

#img12 {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.567), rgba(255, 255, 255, 0.207)), url('../images/gelato.jpg');
}

/* footer sticking on the bottom*/
.footer-content{
font-size: 0.8rem;
color: rgb(255, 255, 255);
}

/* responsive */
@media (max-width: 768px){

  .title{
    margin-top: 1.2rem;
}

h1{
    font-size: 2rem;
}

.container{
    margin: 0 2rem 1rem 2rem;
}

.thumbnail{
    flex: 1 1 calc(50% - 0.4rem);
    height: 40vh;
}
}