@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Playfair+Display:ital,wght@0,400;0,700&display=swap');
  
    html {
      background-color: #faf5ea;
    }

   html:has(body.index-page) {
      background-image: url('/CAT.png');
      background-size: 35rem;
      background-repeat: no-repeat;
      background-position: calc(50% + 20rem) center;
      background-attachment: fixed;
    }
     html:has(body.non-details-page) {
      background-image: url('/CAT.png');
      background-size: 35rem;
      background-repeat: no-repeat;
      background-position: calc(50% + 20rem) center;
      background-attachment: fixed;
    }
    html::before,
    html::after {
      content: '';
      position: fixed;
      top: 0;
      bottom: 0;
      width: 1px;
      background-color: #555;
    }

    html::before {
      left: calc(50% - 37.5rem);
    }

    html::after {
      left: calc(50% + 37.5rem);
    }

    @media only screen and (max-width: 620px) {
      html:has(body.index-page) {
        background-image: url('/CAT.png');
        background-size: 20rem;
        background-repeat: no-repeat;
        background-position: calc(50% + 8rem) top;
        background-attachment: fixed;
      }

      html:has(body.non-details-page) {
        background-image: url('/CAT.png');
        background-size: 20rem;
        background-repeat: no-repeat;
        background-position: calc(50% + 8rem) bottom;
        background-attachment: fixed;
      }

      html:has(body.index-page)::before {
        left: calc(50% - 18.0rem);
      }

      html:has(body.index-page)::after {
        left: calc(50% + 18.0rem);
      }
    }

    body {
      position: relative;
      font-family: "EB Garamond", serif;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      padding: 0 1rem;
      max-width: 35rem;
      margin: 0 auto;
      background-color: transparent;
      color: #000;
    }

    hr {
      border: none;
      height: 0.02rem;
     background-color: #777;  
}

    img {
      margin: auto;
      display: block;
    }

    
    .index-header {
      text-align: center;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .couple-name {
      font-variant: small-caps;
      font-family: "Playfair Display", serif;
      font-size: 2.5rem;
      margin: 0.5rem 0;
    }

    .and {
      font-family: "Playfair Display", serif;
      font-size: 1.5rem;
      margin: 0.5rem 0;
      display: block;
    }

    .couple-name-small {
      font-variant: small-caps;
      font-family: "Playfair Display", serif;
      font-size: 1.5rem;
      margin: 0 0;
    }

    .and-small {
      font-family: "Playfair Display", serif;
      font-size: 1.0rem;
      margin: 0 0;
      display: block;
      margin-bottom: -0.4rem;
    }

    .header-date-location {
      font-variant: small-caps;
      font-family: "Playfair Display", serif;
      font-size: 1.25rem;
    }

    .subtext {
      margin-top: 1rem;
      font-size: 1.2rem;
      font-weight: 450;
      font-style: italic;
    }

    .links {
      margin-top: 1rem;
      font-size: 1rem;
      font-weight: 400;
      font-variant: small-caps;
    }

    section {
      margin-bottom: 3rem;
      font-size: 1.1rem;
      text-align: justify;
    }

    section h2 {
      margin: 1.5rem 0 1rem;
      font-size: 2rem;
      font-weight: 300;
      font-family: "Brittany";
      color: #555;
    }

    a {
      color: #555;
      text-decoration: none;
    }

    a:visited {
      color: #555;
    }

    a:hover,
    a:focus {
      color: #ac502c;
      border-bottom: 1px solid #ac502c;
      text-decoration: none;
      font-style: italic;
    }

    #footer {
      text-align: center;
    }

    .container{
      display: flex;
      justify-content: space-between;
      align-content: center;
    }

    .container div {
      text-align: center;
      align-items: center;
      margin-top: 1rem;
      margin-bottom: 1rem;
      margin-left: 2rem;
      margin-right: 2rem;
}

    .grid-container {
      display: grid;
      grid-template-columns: auto auto;
      margin-top: -1rem;
      gap: 2rem;
    }

    .grid-container div1 {
      text-align: left;
      align-items: center;
      align-content: center;
      margin-top: 1rem;
      margin-bottom: 1rem;
      margin-left: 1rem;
      margin-right: 1rem;
    }

    .grid-container div2 {
      text-align: right;
      align-items: center;
      align-content: center;
      margin-top: 1rem;
      margin-bottom: 1rem;
      margin-left: 1rem;
      margin-right: 1rem;
    }
.header-link:focus, .header-link:hover {
  color: #555;
  text-decoration: none;
  font-style: normal;
}
@font-face {
  font-family: Brittany;
  src: url('/BrittanySignature.ttf') format('truetype');
}