/* Adding CSS resets */

  /* 1. More intuitive box-sizing model */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* 2. Prevent font size inflation */
  html {
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  /* 3. Remove default margin */
  body, h1, h2, h3, h4, p,
  figure, blockquote, dl, dd {
    margin: 0;
  }

  /* 4. Set core body defaults */
  body {
    min-height: 100vh;
    line-height: 1.5;
  }

  /* 5. Reduce line height on headings and interactive elements */
  h1, h2, h3, h4,
  button, input, label {
    line-height: 1.1;
  }

  /* 6. Remove list styles on ul, ol elements with a list role */
  ul[role='list'],
  ol[role='list'] {
    list-style: none;
  }

  /* 7. Remove markers and spacing from elements with a list role and a class */
  [role='list'][class] {
    list-style: none;
    margin-block: 0;
    padding: 0
  }

  /* 8. Make images easier to work with */
  img,
  picture {
    max-width: 100%;
    display: block;
  }

  /* 9. Inherit fonts for inputs and buttons */
  input, button,
  textarea, select {
    font-family: inherit;
    font-size: inherit;
  }

  /* Adding global styles */

  /* 1. Set design tokens using custom properties */
  :root {
    --color-light: #eceaea;
    --color-dark: #0b3a4e;
    --color-primary: #ee088a;
    --font-base: system-ui, sans-serif;
  }

  /* 2. Apply color and font tokens */
  body {
    background-color: var(--color-light);
    color: var(--color-dark);
    font-family: var(--font-base);
  }

  /* 3. Set default heading line measure to improve readability */
  h1, h2, h3, h4 {
    max-width: 34ch;
  }

  /* 4. Set default line measure to improve readability */
  p,
  li {
    max-width: 70ch;
  }

  /* 5. Apply link default color and decoration styles */
  a {
    color: var(--color-dark);
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: .25ex;
  }

  /* 6. Apply visually different hover and focus state styles */
  a:hover,
  a:focus {
    text-decoration: line-through;
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: .25ex;
  }

  /* 7. Hide focus styles if they're not needed, for example, when an element receives focus via the mouse. */
  :focus:not(:focus-visible) {
    outline: none;
  }

  /* 8. Show focus styles on keyboard focus. */
  :focus-visible {
    outline: 2px dotted var(--color-dark);
    outline-offset: 3px;
  }

  /*
  Compositions
  */

  /* Apply a margin to direct sibling elements */
  .flow > * + * {
    margin-block-start: var(--flow-space, 1em);
  }
  /* Create flex items which cluster inline, until space no longer permits. At this point, items begin to wrap and display in block. */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--cluster-column-gap, 1rem);
    row-gap: var(--cluster-row-gap, .25rem);
    justify-content: var(--cluster-horizontal-alignment, flex-start);
    align-items: var(--cluster-vertical-alignment, center);
  }
  /* Add consistent vertical padding between sections of content */
  .region {
    padding-block-start: var(--region-padding-block-start, 2rem);
    padding-block-end: var(--region-padding-block-end, 2rem);
  }
  /* Position content horizontally center in the viewport */
  .wrapper {
    width: 95vw;
    width: clamp(16rem,var(--wrapper-max-width, 95vw), 48rem);
    margin-inline: auto;
    padding-inline: 1rem;
  }
  /* When space permits, add as much inline space as possibe between two grid items, so that 100% of the inline space has been filled */
  .repel {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--repel-column-gap, 1rem);
    row-gap: var(--repel-row-gap, .25rem);
    justify-content: space-between;
    align-items: var(--repel-vertical-alignment, center);
  };