@font-face {
  font-family: "garamondLight";
  src: url("./assets/CormorantGaramond-Light.woff");
}

html {
  margin: auto;
  background-color: #FDFBF4;
  scrollbar-color: #0055B8 #FDFBF4;
  color: #FDFBF4;
}

body {
  margin: 0;
  font-family: "garamondLight", Garamond, serif;
  font-size: 1em;
}

main {
}

footer {
  max-width: 1500px;
  margin: auto;
}

header {
  background-color: #0055B8;
  font-size: 1.2rem;
}

header > div {
  max-width: 1500px;
  margin: auto;
}

.splash-container {
  max-height: 600px;

  position: relative;

  background-image: url("./assets/index/beau-and-tinka-field-med-quality.webp");
  /*
    Background position is a bit confusing, especially with percentages,
    these two values tell us how to place the image in the container.
    The first is where to place the image horizontally, and the second is where
    to place it vertically.
    - 50% for horizontal positioning means put the part of the image at 50% of s
      the image width at the point 50% inside of the container.
    - 50% for the vertical positioning means put the part of the image at 50% of
      the image hieght at the point that is 50% of the container height.
  */
  background-position: 50% 50%;
  /*
    background size tells us how to change the size of the image as the container
    changes size. The "cover" keyword tells the browser to make sure the image always
    covers the entire container, even if it has to stretch the image or cut a little
    bit off one of the edges.
  */
  background-size: cover;
  /*
    don't repeat the image to fill the container. 
  */
  background-repeat: no-repeat;
}

#splash-save-the-date {
  position: absolute;
  width: 100%;
  max-width: 800px;
  min-height: 30%;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  background-position: 50% 100%;
  background-repeat: no-repeat;
}

.when-and-where-container {
  margin: auto;
  background-color: #0055B8;
}

.when-and-where-header {
  width: max-content;
}

.image-gallery {
  font-size: 2em;
  max-width: 1500px;
  margin: auto;
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow: scroll;
  margin-top: 2em;
  margin-bottom: 2em;
}

.gallery-photo {
  width: 200px;
}

.image-wrapper {
  display: inline-block;
  margin: 20px;
}

.weekend-schedule {
  margin: auto;
  max-width: 100%;
  background-color: #0055B8;
}

.weekend-schedule--title {
  max-width: 300px;
  margin: auto;
  text-align: center;
}

.weekend-schedule--items-container {
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 100px;
  max-width: 1500px;
}

.weekend-schedule--item {
  max-width: 325px;
}

.weekend-schedule--item--address {
  font-style: italic;
}

.footer-break {
  width: 100%;
  height: 2px;
  margin-bottom: 1em;
  background-color: #0055B8;
}

.footer-image-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1em;
}

.footer-image {
  width: 100px;
}

.lightbox{
  opacity: 0;
  visibility: hidden;
  position: fixed;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease-in;

  img {
    width: unset; 
    height: unset;
    max-height: 80vh;
    max-width: 80%;
  }
}

.lightbox.show{
  background-color: rgba(0,0,0, 0.85);
  opacity: 1;
  visibility: visible;
  z-index: 1000;
}


/*  for small screen sizes */
@media(max-width: 580px) {
  .splash-container {
    height: 55vh;
  }

  #splash-save-the-date {
    background-image: url("./assets/index/date-09-22-24.svg");
    background-size: 90% 80%;
    max-width: 300px;
  }

  .when-and-where-container {
    padding: 1em;
  }

  .when-and-where {
    margin: auto;
    max-width: 350px;
  }

  .when-and-where-text-item {
    margin-bottom: 1em;
  }

  .when-and-where-date {
    display: none;
  }

  .weekend-schedule {
    padding: 1em;
  }
}

/*  for desktop screen sizes */
@media(min-width: 580px) {
  .splash-container {
    height: 55vh;
  }

  #splash-save-the-date {
    background-image: url("./assets/index/save-the-date.svg");
    background-size: 90% 100%;
    max-width: 800px;
  }

  .when-and-where-container {
    padding-top: 3em;
    padding-left: 4em;
    padding-right: 4em;
    padding-bottom: 1em;
  }
  
  .when-and-where {
    max-width: 100%;
  }

  .when-and-where-header {
    display: none;
  }

  .when-and-where-text {
    display: flex;
    column-gap: 50px;
    row-gap: 1em;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }

  .when-and-where-text-item {
    max-width: 500px;
    width: 200px;
    flex-grow: 1;
  }

  .when-and-where-date {
    margin-top: 25px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
  }

  .weekend-schedule {
    padding: 40px;
  }
}