/*VARIABLES*/
:root {
  /*Palette couleurs BANGR*/
  --bangr-red-flare: #ff5442;
  --bangr-red-flare-light: #ff7f71;
  --bangr-red-flare-lighter: #ffa9a0;
  --bangr-red-flare-lightest: #ffd4d0;

  --bangr-green-celadon: #a3d9b5;
  --bangr-green-celadon-light: #bae2c7;
  --bangr-green-celadon-lighter: #d1ecda;
  --bangr-green-celadon-lightest: #e8f5ec;

  --bangr-absolute-black: #000000;
  --bangr-absolute-black-light: #404040;
  --bangr-absolute-black-lighter: #808080;
  --bangr-absolute-black-lightest: #bfbfbf;

  --bangr-white-snow: #ffffff;
  --bangr-white-snow-dark: #f2f2f2;
  --bangr-white-snow-darker: #e5e5e5;
  --bangr-white-snow-darkest: #bfbfbf;

  /*Typographie*/
  --font-family-base:
    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
    sans-serif;
  --font-family-heading:
    "ABC Whyte Inktrap", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-smaller: 0.625rem; /*10*/
  --font-size-small: 0.75rem; /*12*/
  --font-size-base: 0.875rem; /*14*/
  --font-size-large: 1rem; /*Défaut 16*/
  --font-size-larger: 1.375rem; /*22*/
  --font-size-largest: 1.75rem; /*28*/

  /*Bords arrondis*/
  --radius-small: 5px;
  --radius-medium: 10px;
  --radius-large: 20px;
  --radius-extralarge: 40px;
  --radius-full: 999px;
}

html {
  font-family: var(--font-family-base);
  font-size: 1rem;
}

body {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

header {
  text-align: center;
}

span {
  font-style: italic;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

div {
  background-color: var(--bangr-white-snow-darker);
  border-radius: 10px;
  padding: 16px;
  width: fit-content;
}