body{
    
    width: 100%;
    height: 100vh;
    margin: 0;
    background-color: #7f3667;
    color: #e5a0c6;
    font-family: "Delius Unicase";
    font-size: 20px;
    padding-top:10%;
}

h1, p, div {
    margin: 1em auto;
    text-align: center;
  }

button {
    display: block;
    width: 40%;
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: #e44b8d;
    color: #eec4dc;
    border-color: #e44b8d;
    min-width: 200px;
    border-radius: 12px;
    font-family: "Delius Unicase"; 
  }

hover-button { 
    padding: 10px 20px; 
    font-size: 16px; 
    border: none; 
    background-color: #4CAF50; 
    color: white; 
    cursor: pointer; 
    transition: transform 0.3s ease; 
  } 
    
    .hover-button:hover { transform: scale(1.1); /* Increase the size by 210% */ 
    } 
  

  

img[class="border"] {
  border: 10px double #e44b8d;
  width: 200px;
  border-radius: 25%;
  

  
}

img[type="heart"]{
  aspect-ratio: 1;
  --_m: radial-gradient(#000 69%,#0000 70%) 84.5%/50%;
  -webkit-mask-box-image: var(--_m);
             mask-border: var(--_m);
  clip-path: polygon(-42% 0,50% 91%, 142% 0);
}



.image-container {
  position: relative;
  width: 250px;
}

.image-container img {
  width: 100%;
  display: block;
}

.overlay-text {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #e44b8d;
  color: white;
  padding: 10px 15px;
  font-size: 12px;
  opacity: 0;
  padding-bottom: 20px;
  transition: opacity 0.5s ease-in-out;
  aspect-ratio: 1;
  --_m: radial-gradient(#000 69%,#0000 70%) 84.5%/50%;
  -webkit-mask-box-image: var(--_m);
             mask-border: var(--_m);
  clip-path: polygon(-42% 0,50% 91%, 142% 0);
}

.image-container:hover .overlay-text {
  opacity: 0.8;
}


.container {
  display: flex; /* Enables flexbox */
  gap: 10px; /* Adds space between divs */
}

.box {
  width: 50%;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 18px;
}