:root {
  font-size: clamp(0.875rem, calc(13px + .4vw), 1.0625rem);
  min-height: 0vw;
  /* site */
  --site-max-width: 56rem;
  --site-body-bcol: #ffffff; /* #f0f0f0 */
  --site-body-fcol: #000000;
  --site-main-bcol: #ffffff;
  --site-main-fcol: #000000;
  --site-head-bcol: #8e3d61;
  --site-head-fcol: #ffffff;
  --site-foot-bcol: #707070;
  --site-foot-fcol: #eeeeee;
  --site-nav-bcol: #8e3d61;
  --site-nav-fcol: #ffffff;
  --site-nav-hover-bcol: #ffe8a8;
  --site-nav-hover-fcol: #000000;
  --site-nav-active-bcol: #a64d79; /*#3268A2 #c05050*/
  /* links */
  --page-link-fcol: #ffffff; /* #b00000 */
  --page-link-bcol: #8e3d61; /* #fff0d8 */
  --page-link-bdrcol: #e0d8c0;
  --page-link-hover-bcol: #edcc00;
  --page-link-hover-fcol: #000000;
  /* page */
  --page-hdr-bcol: #f4f4f4;
  --page-hdr-fcol: #402000;
  /* FORMS */
  --input-bcol: #ffffff;
  --input-fcol: #000000;
  --input-bdrcol: #7f9db9;
  --input-focus: #ffffd0;
  --input-hover-bcol: #edcc00;
}



.weddingBanner {
  margin: 0;
  display: block;
  width: 100%;
}



/*****************/
/*   CSS RESET   */
/*****************/

*, *::before, *::after {
  box-sizing: border-box;
}

html:focus-within {
  scroll-behavior: smooth;
}

body, h1, h2, h3, h4, hr, p, form, dl, dt, dd, table {
  margin: 0;
}

body {
  font-weight: normal;
  letter-spacing: normal;
  padding: 0;
  position: relative;
  text-align: left;
  text-rendering: optimizeSpeed;
}

h1, h2, h3, h4 {
  font-weight: bold;
  font-family: inherit;
  line-height: inherit;
  overflow: hidden;
}

p {
  margin: .75rem 0 .25rem 0;
  padding: 0;
  overflow-wrap: break-word;
}

img, picture, video, canvas, svg {
  max-width: 100%;
  display: block;
}

blockquote {
  margin: 2rem 1rem 1rem 1rem;
  padding-top: 1rem;
  border-top: 1px solid #404040;
}

  blockquote p::before {
    content: '\201c';
  }

  blockquote p:last-child::after {
    content: '\201d';
  }

  blockquote p {
    font-style: italic;
  }

.ft90 {
  font-size: 90%;
}

.ft80 {
  font-size: 80%;
}

.hcenter {
  text-align: center;
}



/****************/
/*   ELEMENTS   */
/****************/

body {
  font-family: 'Segoe UI',Arial,Helvetica,Verdana,sans-serif;
  background-color: var(--site-body-bcol);
  color: var(--site-body-fcol);
  font-size: 1rem;
  line-height: 1.6;
}


ul {
  margin: 0 .5rem;
  padding: .3rem 0 .3rem .75rem;
  list-style: disc outside none;
  text-indent: 0;
  overflow: hidden;
}

li {
  margin: 0 0 .2rem .5rem;
  padding: .2rem .25rem .2rem 0;
}



/*************/
/*   LINKS   */
/*************/

a, a:visited {
  color: var(--page-link-fcol);
  text-decoration: none;
}

.flexlinks {
  margin: .3rem 0;
  padding: 1rem 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem;
}

  .flexlinks a {
    white-space: nowrap;
    padding: .6rem 1rem;
    background-color: var(--page-link-bcol);
    border: 0px solid var(--page-link-bdrcol);
    border-radius: 5px;
  }

  .flexlinks img {
    display: inline-block;
    margin: 0 .3rem 0 0;
    vertical-align: middle;
  }




/****************************/
/* SITE HEADER, FOOTER, NAV */
/****************************/

.mainMaxWidth {
  max-width: var(--site-max-width);
  margin-left: auto;
  margin-right: auto;
}


.site_main {
  background-color: var(--site-main-bcol);
  color: var(--site-main-fcol);
  overflow: auto;
}


.site_head {
  background-color: var(--site-head-bcol);
  color: var(--site-head-fcol);
  text-align: center;
}

  .site_head h1 {
    font-weight: normal;
    font-size: 1.1rem;
    padding: .2rem;
  }

  .site_head div {
    text-align: center;
    font-size: 1.2rem;
    padding: .2rem;
  }

  .site_head a, .site_head a:visited {
    color: inherit;
  }



.site_foot {
  padding: 0.75rem 0.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 1rem;
  font-size: .9rem;
  background-color: var(--site-foot-bcol);
  color: var(--site-foot-fcol);
}

  .site_foot a {
    color: inherit;
    padding: .3rem .5rem;
  }

    .site_foot a:visited {
      color: inherit;
    }

    .site_foot a:hover {
      color: var(--page-link-hover-fcol);
      background-color: var(--page-link-hover-bcol);
    }



.site_nav {
  background-color: var(--site-nav-bcol);
  color: var(--site-nav-fcol);
  display: flex;
  flex-wrap: wrap;
  position: relative;
  font-size: 1.05rem;
}

  .site_nav .nav_dropactive {
    background-color: var(--site-nav-active-bcol);
  }

  .site_nav a {
    color: inherit;
    text-align: center;
    padding: .5rem clamp(.1rem, calc(2vw), 2rem);
    margin: 0;
    font-size: 1.05rem;
  }

    .site_nav a:visited {
      color: inherit;
    }

    .site_nav a:hover {
      background-color: var(--site-nav-hover-bcol);
      color: var(--site-nav-hover-fcol);
    }




/********************/
/* SECTION, ARTICLE */
/********************/

.head_left {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1%;
  background-color: var(--page-hdr-bcol);
  color: var(--page-hdr-fcol);
}

  .head_left > *:first-child {
    flex-grow: 1;
  }

  .head_left h1, .head_left h2 {
    font-weight: bold;
    font-size: 1.2rem;
  }

  .head_left a {
    font-size: .9rem;
    padding: .3rem .4rem;
    background-color: #f8f8f8;
  }


section {
  padding: 1rem 2% 2rem 2%;
}

  section:after {
    content: '';
    clear: both;
  }


.sctnHeading {
  margin: 0 0 1rem 0;
  padding: 1rem 1%;
  background-color: var(--page-hdr-bcol);
  color: var(--page-hdr-fcol);
  font-weight: bold;
  font-size: 1.25rem;
  text-align: center;
}




/******************/
/*   CONTAINERS   */
/******************/

.grid_auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.grid_5050 {
  display: grid;
  grid-template-columns: 50% 50%;
}

@media (max-width: 600px) {
  .grid_5050 {
    grid-template-columns: 100%;
  }
}

.cardinvertsite {
  background-color: #8e3d61;
  color: #ffffff;
}

.gridcardbox > * {
  margin: 1rem 1rem;
  border: solid 1px #808080;
  border-radius: 5px;
  background-color: #fbf6f9;
}

.cardtitle {
  text-align: center;
  font-size: 1.05rem;
  font-weight: normal;
  padding: .5rem 1rem;
  margin: 0;
}

.cardsubtitle {
  font-size: 1rem;
  font-weight: bold;
  padding: 1rem 1rem 0rem 1rem;
  margin: 0;
}

.cardcontent {
  padding: .25rem 1rem 1rem 1rem;
  font-size: 90%;
}


.gridcardimg > * {
  margin: 2rem 2rem;
}



/************************************** FORMS **************************************/

textarea {
  vertical-align: top;
}

select, textarea, input, button {
  border: 2px solid var(--input-bdrcol);
  border-radius: 5px;
  padding: .4rem;
  margin: 0;
  background-color: var(--input-bcol);
  color: var(--input-fcol);
  font: inherit;
}

  input[type=range] {
    background-color: #eeeeee;
  }

  input[type=radio], input[type=checkbox] {
    margin: .6rem .5rem;
  }

    input[type=radio] + label, input[type=checkbox] + label {
      padding-left: .3rem;
      padding-right: .8rem;
    }

  input[type=button], input[type=submit], button {
    cursor: pointer;
  }

  input:focus, select:focus, textarea:focus {
    background-color: var(--input-focus);
  }

  input[type=text]:read-only, input[type=date]:read-only, input[type=datetime-local]:read-only, textarea:read-only, .readonly {
    background-color: #e0e0e0;
    color: #404040;
  }

  input[type=text]:disabled, input[type=date]:disabled, input[type=datetime-local]:disabled, textarea:disabled, .disabled {
    background-color: #d0d0d0;
    color: #404040;
  }

  input[type=button]:disabled, input[type=submit]:disabled, button:disabled {
    cursor: default;
    background-color: #d0d0d0;
    color: #808080;
  }

  input::placeholder {
    font-style: italic;
    opacity: 0.5;
  }



/*   FORM SUBMIT   */

.form_submit {
  padding: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.submit_ok {
  padding: .5rem 1rem;
  color: var(--page-link-fcol);
  background-color: var(--page-link-bcol);
  border: 0px solid var(--page-link-bdrcol);
}




/*   BULLET MESSAGES   */

.inlineMessages {
  margin: 1rem auto;
  padding: 0 0;
  width: -moz-fit-content;
  width: fit-content;
}

  .inlineMessages li {
    display: inline-block;
    border: 1px solid #000000;
    margin-right: 1rem;
    padding: .2rem .25rem .2rem .25rem;
  }

.msgulpass li {
  background-color: #ccffcc;
  color: #000000;
}

.msgulfail li {
  background-color: #ffcccc;
  color: #000000;
}




/*   FINAL LINK STYLES   */

a:hover {
  color: var(--page-link-hover-fcol);
  background-color: var(--page-link-hover-bcol);
}