body {
  background: url() no-repeat top left fixed;
  background-size: 1800px 1300px;
  color: white;
}

html, body {
  margin: 0;
  height: auto;
}

h1, h2, h3, p {
  text-align: center;
  color: SlateGrey;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  letter-spacing: 2px;
}

.stroked-text {
  color: black;
  -webkit-text-stroke: 1px Navy;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
}

.strokedGrey {
  color: SlateGrey;
  -webkit-text-stroke: 1px Navy;
}


.center {
  display: grid;
  height: 200px;
}

.container-flex {
    display: flex;
    align-items: center; 
    height: 400px; 
    left:20%;
    border: 0px solid #000;
    

}

.container-top {
    position: absolute;
    left: 20%;  /* X-coordinate */
    top: 20px;  /* Y-coordinate */
    padding: 0px;
}


.container-lower {
    position: absolute;
    left: 50%;  /* X-coordinate */
    top: 300px;  /* Y-coordinate */
    padding: 0px;
}

.image-wrapper {
  position: relative;
  display: inline-block;
}
.overlay-text { 
  position: absolute; 
  top: 550px; 
  left: 5%; 
  transform: translateX(-17%); 
  color: navy; 
  font-size: 48px; 
  z-index: 2; 
  pointer-events: none; /* important so image map clicks still work */ 
  
}

.heart-iframe {
  width: 300px;
  height: 250px;
  /* Vendor prefixes may be needed for broader compatibility */
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 86% 55%, 90% 90%, 50% 75%, 10% 90%, 14% 55%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 86% 55%, 90% 90%, 50% 75%, 10% 90%, 14% 55%, 2% 35%, 39% 35%);
  border: none; /* Optional: removes the default iframe border */
}