@use "../../styles/variables";



h1.names,  {
  font-size: 34px;
  font-weight: bold;

  display: flex;
  justify-content: center;

  .small {
    font-family: "beautifully-delicious", serif;
    font-size: 60px;
    font-style: italic;

    height: 48px;
    line-height: 29px;
    padding-left: 18px;
    padding-right: 18px;
  }

  @media (max-width: 576px) {
    display: flex;
    flex-direction: column;
  }
}

h1, .subtitle {
  font-family: variables.$tan-moncheri;
  text-align: center;
}

.subtitle {
  display: block;
  font-size: 24px;
  margin-bottom: 60px;
}


.invite-text {
  display: flex;
  justify-content: center;

  margin-top: -24px;
  font-size: 16px;
}



h2, h3 {
  font-weight: normal;
}

p, h2, h3, .schedule {
  font-family: variables.$playfair-display;
}

.schedule {
  margin-top: 16px;
  text-align: center;

  .item {
    h3 {
      margin-bottom: 0;
    }

    a {
      color: rgb(48, 77, 42);;

      &:hover {
        color: black;
      }
    }

  }
}

p {
  margin-bottom :0;
}

img.envelope {
  width: 64px;
  margin-top: 8px;
}

.background {
  pointer-events: none;
  display: flex;
  align-content: flex-end;
  justify-items: flex-end;

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  &:before {
    content: '';

    opacity: 25%;

    background: no-repeat center top url("../../assets/images/flowers.webp");

    width: 100vw;
    height: min(300px, 33vh);

    position: absolute;
    bottom: 0
  }
}