:root {
  --base-color: hsl(0, 0%, 6.67%);
  --base-color-transparent: hsl(0, 0%, 0%, 0%);
  --accent-color: hsl(197, 46%, 25%);
  --white: hsl(240, 100%, 99%);
  --white-transparent: hsl(240, 100%, 99%, 50%);
  --pine-green: hsl(172, 34%, 25%);
  --navy-blue: hsl(230, 24%, 24%);
  --royal-blue: hsl(233, 32%, 37%);

  --both-of-us-position-narrow: relative;
  --both-of-us-position-wide: absolute;

  --font-size-narrow: 1.5rem;
  --font-size-wide: 1.75rem;

  --line-height-narrow: 1.5;
  --line-height-wide: 1.75;

  --the-date-font-size-narrow: 2.5rem;
  --the-date-font-size-wide: 4.5rem;

  --heading-font-size-narrow: 2rem;
  --heading-font-size-wide: 2.5rem;

  --padding-narrow: 1rem;
  --padding-wide: 2rem;

  --content-gap-narrow: 1.5rem;
  --content-gap-wide: 3rem;

  --content-width-narrow: 90vw;
  --content-width-wide: 80vw;

  --title-img-width-narrow: 100%;
  --title-img-width-wide: 60%;

  --the-date-font-size: var(--the-date-font-size-narrow);
  --both-of-us-position: var(--just-us-position-narrow);
  --content-gap: var(--content-gap-narrow);
  --content-padding: var(--padding-narrow);
  --body-font-size: var(--font-size-narrow);
  --body-line-height: var(--line-height-narrow);
  --heading-font-size: var(--heading-font-size-narrow);
  --content-width: var(--content-width-narrow);
  --title-img-width: var(--title-img-width-narrow);
}

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

* {
  margin: 0;
}

html,
body,
#root,
#content {
  min-height: 100vh;
  padding: 0;
  width: 100%;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  font-size: 16px;
  text-size-adjust: none;
  text-rendering: optimizeLegibility;
}

body {
  -webkit-font-smoothing: antialiased;
  background-color: var(--base-color);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  position: relative;
}

body::before {
  background: url('./img/background2.webp') repeat;
  background-size: 100%;
  content: '';
  inset: 0;
  position: absolute;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

iframe {
  aspect-ratio: 4/2;
  border: none;
  width: 100%;
}

a {
  color: var(--accent-color);
  margin: 0 -0.375rem;
  padding: 0 0.375rem 0.25rem;
  text-underline-offset: 0.25rem;
}

a:hover {
  background-color: var(--accent-color);
  color: var(--white);
}

a:has(img) {
  display: flow-root;
}

a:has(img):hover {
  background-color: transparent;
}

.rsvp {
  font-size: 150%;
  text-align: center;
}

.rsvpBy {
  margin-bottom: 0;
}

.rsvp a {
  font-size: 120%;
}

.note {
  font-size: 1.2rem;
  margin-top: 0;
}

p {
  margin: 1rem 0;
}

dl {
  text-align: center;
}

dd {
  padding: 0 1rem;
}

dt {
  font-size: var(--heading-font-size);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

dt:not(:first-child) {
  margin-top: calc(var(--content-gap) * 2);
}

dd + dd {
  margin-top: var(--content-gap);
}

ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.5rem;
}

#root {
  align-items: center;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  justify-content: space-between;
}

#content {
  background-color: hsl(0, 0%, 78%, 0.85);
  color: var(--base-color);
  display: flex;
  flex-direction: column;
  font-family: 'Bellefair', serif;
  font-size: var(--body-font-size);
  gap: var(--content-gap);
  max-width: var(--content-width);
  padding: var(--content-padding);
}

#header {
  display: grid;
  font-size: var(--body-font-size);
  position: relative;
  text-align: center;
}

#header h1 {
  width: 100%;
}

#header h1 img {
  max-width: 32rem;
  min-width: 16rem;
  position: relative;
  width: var(--title-img-width);
}

#header .images + p {
  margin: 1rem;
}

.theDate {
  border-bottom: 1px solid var(--navy-blue);
  display: block;
  font-size: var(--the-date-font-size);
  padding: 3.5rem 0 2rem;
}

#footer {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  padding: 1rem;
}

.bothOfUs {
  height: auto;
  mask-image: radial-gradient(
    closest-side,
    var(--base-color) 75%,
    var(--base-color-transparent)
  );
  position: var(--both-of-us-position);
  right: 0;
  top: -1.5rem;
  width: 100%;
}

.footnote {
  font-size: 1.2rem;
}

.programme {
  margin: 0 auto;
}

.programme td:first-child {
  text-align: left;
}

.srOnly {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.swatches {
  display: inline-flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  position: relative;
}

.swatches input {
  appearance: none;
  background: none;
  border: none;
}

.swatches input:checked {
  border: 1px groove var(--white);
}

.swatches input:checked + .srOnly {
  clip: initial;
  clip-path: initial;
  height: auto;
  overflow: auto;
  left: calc(100% + 1rem);
  line-height: normal;
  width: auto;
}

.swatches > *,
.swatches input {
  height: 2rem;
  width: 2rem;
}

.pineGreen {
  background-color: var(--pine-green);
}

.navyBlue {
  background-color: var(--navy-blue);
}

.royalBlue {
  background-color: var(--royal-blue);
}

.accomodation em {
  display: block;
  font-size: 1rem;
}

@media screen and (min-width: 45rem) {
  body,
  dt,
  #content {
    --body-line-height: var(--line-height-wide);
    --content-gap: var(--content-gap-wide);
    --content-padding: var(--padding-wide);
    --body-font-size: var(--font-size-wide);
    --content-width: var(--content-width-wide);
    --heading-font-size: var(--heading-font-size-wide);
    --the-date-font-size: var(--the-date-font-size-wide);
  }

  #root {
    padding: 0 4rem;
  }

  .programme td {
    padding: 0 2.5rem;
  }

  #header h1 img {
    --title-img-width: var(--title-img-width-wide);
  }

  #header::before,
  #header::after {
    background: transparent;
    content: '';
    height: 50%;
    position: absolute;
    width: 25%;
  }

  #header::before {
    box-shadow: -2px -2px var(--base-color);
    top: 0;
    left: 0;
  }

  #header::after {
    bottom: 0;
    box-shadow: 2px 2px var(--base-color);
    right: 0;
  }

  #header time {
    border: none;
  }

  .bothOfUs {
    --both-of-us-position: var(--both-of-us-position-wide);

    max-width: 30rem;
    height: auto;
    top: 0;
    width: 40vw;
  }
}

@media screen and (min-width: 64rem) {
  #content {
    max-width: 58rem;
  }

  .bothOfUs {
    --both-of-us-position: var(--both-of-us-position-narrow);
  }

  #header h1 img {
    --title-img-width: var(--title-img-width-narrow);
  }

  #header .images {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row-reverse;
  }

  dl,
  dd {
    padding: 0 2rem;
  }
}

@media screen and (min-width: 75rem) {
  #content {
    min-width: 58rem;
    max-width: 75rem;
  }
}