body {
  background-color: #000000; 
  color: #8d0707;
}

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Pinyon+Script&display=swap');

:root {

    /* VARIABLES */

    /* Typography */
  --headingFont: 'DM Serif Display', sans-serif;
  --bodyFont: 'DM Serif Display', sans-serif;

  --baseFontSize: clamp(0.875rem, 0.7885rem + 0.3846vw, 1.25rem);

  --type-scale: 1.5;
}
html {
    font-size: var(--baseFontSize);
    scroll-behavior: smooth;
    font-family: var(--bodyFont);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--headingFont);
    margin-bottom: var(--space-3);
  }  
main {
  width: 90vw;
  margin: 0 auto;
  text-align: center;
  }

  .heartgrid {
    display: grid;
    width: 65vw;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 10px;
    margin: 0 auto;
}
  .heartgrid div {
    display: auto;
    justify-content: center;
    align-items: center;
}
.item1 { grid-area: 1 / 2 / 2 / 3; }
.item2 { grid-area: 1 / 4 / 2 / 5; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 / 3 / 3; }
.item5 { grid-area: 2 / 4 / 3 / 5; }
.item6 { grid-area: 2 / 5 / 3 / 6; }
.item7 { grid-area: 3 / 2 / 4 / 3; }
.item8 { grid-area: 3 / 3 / 4 / 4; }
.item9 { grid-area: 3 / 4 / 4 / 5; }
.item10 { grid-area: 4 / 3 / 5 / 4; }

.heartgrid a img {
  transition: transform 0.3s ease;  /* Smooth transition for the movement */
}

.heartgrid a img:hover {
  transform: scale(1.1) translateY(-10px); /* Scale and move the image upwards */
}

nav {
  margin-left: 5vw;
  height: 80px;
  background: #000000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem calc((100vw - 1300px)/2);
}
nav a {
    color: #8d0707;
    padding: 0 1.5rem;
}

button {
  padding: 1rem 3rem;
  font-size: 20px;
  color: #ffffff;
  background-color: #00000091;
  cursor: pointer;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  border: none;
  border-radius: 20px;
}

figure img {
  width: 100px;
  height: auto;
  margin-top: 3rem;
}