@import "//fonts.googleapis.com/css?family=Sue+Ellen+Francisco";

.index-page {
  background-color: #000;
  font-family: "Sue Ellen Francisco", cursive;
  font-size: 16px;
  margin: 0;
  padding: 0;
  border: 8px solid white;
  text-align: center;

  box-sizing: border-box;
  min-width: 320px;
}

.index-image-table {
  background-color: white;
}

.index-image-row {
  display: flex;
  height: 200px;
  box-sizing: content-box;
  margin: auto;
}

@media screen and (min-width: 616px) {
  .index-image-row {
    width: 600px;
  }
}

@media screen and (min-width: 816px) {
  .index-image-row {
    width: 800px;
  }
}

@media screen and (min-width: 1016px) {
  .index-image-row {
    width: 1000px;
  }
}

@media screen and (min-width: 1216px) {
  .index-image-row {
    width: 1200px;
  }
}

@media screen and (min-width: 1416px) {
  .index-image-row {
    width: 1400px;
  }
}

@media screen and (min-width: 1616px) {
  .index-image-row {
    width: 1600px;
  }
}

@media screen and (min-width: 1816px) {
  .index-image-row {
    width: 1800px;
  }
}

@media screen and (min-width: 2016px) {
  .index-image-row {
    width: 1800px;
  }
}

.left {
  flex-direction: row;
}

.right {
  flex-direction: row-reverse;
}

.index-image,
.index-content-box {
  box-sizing: border-box;
  border: 8px solid white;
}

.index-image {
  width: 200px;
  filter: contrast(125%) saturate(125%);
}

@media screen and (max-width: 616px) {
  .three-up {
    display: none;
  }
}

@media screen and (max-width: 816px) {
  .four-up {
    display: none;
  }
}

@media screen and (max-width: 1016px) {
  .five-up {
    display: none;
  }
}

@media screen and (max-width: 1216px) {
  .six-up {
    display: none;
  }
}

@media screen and (max-width: 1416px) {
  .seven-up {
    display: none;
  }
}

@media screen and (max-width: 1616px) {
  .eight-up {
    display: none;
  }
}

@media screen and (max-width: 1816px) {
  .nine-up {
    display: none;
  }
}

@media screen and (min-width: 816px) and (max-width: 1016px) {
  .four-only {
    display: flex !important;
  }
}

.double-width {
  flex-basis: 400px;
  box-sizing: border-box;
}

.index-content-box {
  color: white;
  display: flex;
  padding: 0 8px;
  flex: 1 1 auto;
  align-items: center;

  transition: background-color 0.5s ease-out;
}

.index-content {
  font-size: 150%;
  font-variant: small-caps;
  font-weight: 600;
  letter-spacing: 0.025em;
  margin: auto;
}

a {
  text-decoration: none;
}

.title-box {
  background-color: rgba(0, 140, 140, 1);
}

.on-the-day-box {
  background-color: rgba(53, 0, 140, 1);
}

.on-the-day-box:hover,
.on-the-day-box:focus,
.on-the-day-box:active {
  background-color: rgba(103, 0, 190, 1);
}

.wedding-party-box {
  background-color: rgba(140, 20, 0, 1);
}

.wedding-party-box:hover,
.wedding-party-box:focus,
.wedding-party-box:active {
  background-color: rgba(190, 70, 0, 1);
}

.help-box {
  background-color: rgba(13, 140, 0, 1);
}

.help-box:hover,
.help-box:focus,
.help-box:active {
  background-color: rgba(63, 190, 0, 1);
}

.rsvp-box {
  background-color: rgba(222, 133, 0, 1);
}

.rsvp-box:hover,
.rsvp-box:focus,
.rsvp-box:active {
  background-color: rgba(255, 183, 0, 1);
}

.contact-us-box {
  background-color: rgba(194, 81, 127, 1);
}

.contact-us-box:hover,
.contact-us-box:focus,
.contact-us-box:active {
  background-color: rgba(255, 142, 188, 1);
}