.button {
    position: absolute;
    top: 10px;;
    left: 20px;
}
.button button {
    background: none;
    border: none;
    font-family: "Bebas Neue", sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
    color: rgb(41, 29, 29);
    cursor: pointer;
    transition: opacity 0.2s ease;
    border-radius: 20px;
    font-weight: 600;
}
.frame {
    width: 100%;
  height: 100%;
  object-fit: cover;
}
.monsieur-la-doulaise-regular {
  font-family: "Monsieur La Doulaise", cursive;
  font-weight: 400;
  font-style: normal;
}
html, body {
  height: 100%;
  margin: 0;
  background-color: #dfc4c4;
  font-family: 'Times New Roman', Times, serif;
  color: rgb(41, 29, 29);
}

main {
  height: 100%;
  display: grid;
  place-items: center;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  width: 80vw;
  height: 80vh;
}

.frame {
  position: relative;
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  color:rgb(41, 29, 29);
  background-color: rgba(186, 169, 169, 0.8);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 1em;
  transition: opacity 0.6s ease;
}
h1{
  color:rgb(41, 29, 29);  
    font-family: "Monsieur La Doulaise", cursive;
    font-size: 50px;}
h2{
    font-family: "Monsieur La Doulaise", cursive;
    }
.frame:hover img {
  opacity: 0.2;
  transform: scale(1.05);
}
.frame:hover .overlay {
  opacity: 1;
}