:root {
  --main-color: #0078BF; /* https://stencil.wiki/wiki/Blue */
  --main-color-active: #3255A4; /* https://stencil.wiki/wiki/Medium_Blue */
  --main-color-light: #62A8E5; /* https://stencil.wiki/wiki/Cornflower */
  --secondary-color: #00A95C; /* https://stencil.wiki/wiki/Green */
  --secondary-color-active: #397E58; /* https://stencil.wiki/wiki/Grass */
  --secondary-color-light: #67B346; /* https://stencil.wiki/wiki/Kelly_Green */
}


@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Quicksand-VariableFont_wght.ttf");
}

a {
  color: var(--main-color);
  text-decoration: underline;
  text-decoration-skip-ink: all;
  text-decoration-thickness: 2px;
  text-underline-offset: .3rem;
}
  a:hover, a:active {
    color: var(--main-color-active);
    text-decoration: none;
  }

* {
  box-sizing: border-box;
}

img {
  height: auto;
  max-width: 100%;
}

.sr-only, #skiplinks:not(:focus-within) {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

body {
  display: grid;
  grid-template-areas:
    "skiplinks"
    "header"
    "aside"
    "content"
    "footer";
  font-family: Quicksand, sans-serif;
  font-size: 120%;
  gap: 2rem;
  line-height: 1.4;
  margin: 0;
  padding: 0 1rem;
}

  @media screen and (width >= 768px) {
    body {
      grid-template-areas:
        "skiplinks skiplinks"
        "aside header"
        "aside content"
        "footer footer";
      grid-template-columns: 2fr 3fr;
    }

    p {
      max-width: 38em;
      text-wrap: balance;
    }
  }

h1 {
  font-size: 2.027rem;
}

h2 {
  font-size: 1.802rem;
}

h3 {
  font-size: 1.602rem;
}

h4 {
  font-size: 1.424rem;
}

  @media screen and (width >= 768px) {
    h1 {
      font-size: 3.815rem;
    }

    h2 {
      font-size: 3.052rem;
    }

    h3 {
      font-size: 2.441rem;
    }

    h4 {
      font-size: 1.953rem;
    }
  }

/**
 * Zones de base
 */

#header {
  grid-area: header;
  text-align: center;
}
  @media screen and (width >= 768px) {
    #header {
      text-align: left;
    }
  }

#footer {
  grid-area: footer;
}

#main {
  grid-area: content;
}

/**
 * Aside faire-part
 */

.faire-part {
  grid-area: aside;
  margin: 0;
}

/**
 * Contenus
 */
.hero {
  color: var(--main-color);
  font-size: 1.1em;
}

/**
 *
 */
#skiplinks {
  font-weight: bold;
  grid-area: skiplinks;
  position: absolute;
  top: -2rem;
}
  #skiplinks ul {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 1rem;
  }

/**
 * iframe RSVP
 */
#rsvp-frame {
  border: none;
  height: 200rem;
  width: 100%;
}

/**
 * Pied de page
 */
#footer ul {
  display: flex;
  flex-direction: column;
  font-size: .9rem;
  list-style: none;
  gap: 1rem;
  padding: 0;
}

#footer:target {
  background-color: #FFE800;
}

  @media screen and (width >= 768px) {
    #footer ul {
      flex-direction: row;
      justify-content: center;
    }
  }