html {
  --color-primary-h: 49;
  --color-primary-s: 79%;
  --color-primary-l: 53%;
  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
  --color-secondary-h: 27;
  --color-secondary-s: 96%;
  --color-secondary-l: 48%;
  --color-secondary: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l));
  --color-tertiary-h: 191;
  --color-tertiary-s: 55%;
  --color-tertiary-l: 53%;
  --color-tertiary: hsl(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l));
  --color-quaternary-h: 241;
  --color-quaternary-s: 48%;
  --color-quaternary-l: 41%;
  --color-quaternary: hsl(var(--color-quaternary-h), var(--color-quaternary-s), var(--color-quaternary-l));
  --color-quinary-h: 237;
  --color-quinary-s: 97%;
  --color-quinary-l: 27%;
  --color-quinary: hsl(var(--color-quinary-h), var(--color-quinary-s), var(--color-quinary-l));

  --color-text-h: 0;
  --color-text-s: 0%;
  --color-text-l: 0%;
  --color-text: hsl(var(--color-text-h), var(--color-text-s), var(--color-text-l));
  --color-bg-h: 0;
  --color-bg-s: 0%;
  --color-bg-l: 100%;
  --color-bg: hsl(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l));

  --size-container: 640px;

  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  font-size: 16px;
}
* {
  margin: 0;
  padding: 0;
  font-weight: normal;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; 
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}