/* variables declared here - these are the colors for the component, as well as the font stacks and sizes. */
:root {
  --white: #fff;
  --slate-900: #1f314f;
  --blue-600: #2c7dfa;
  --blue-500: #3685ff;
  --slate-500: #68776d;
  --slate-300: #d5e1ef;

  --font-size-regular: 0.938rem;
  --font-size-large: 1.375rem;

  --outfit: "Outfit", serif;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
}

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

body {
  padding: 0;
  margin: 0;
  font-family: var(--outfit);
  background-color: var(--slate-300);
  color: var(--white);
  font-size: var(--font-size-regular);
  font-weight: (var(--font-weight-regular));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  max-width: 20rem;
  background-color: var(--white);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1em;
  margin-bottom: 1.5rem;
}

.img-qr-code-component {
  width: 288px;
  height: 288px;
  border-radius: 10px;
  margin-bottom: 1.5rem;
}

.title-qr-code-component {
  margin: 0;
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  color: var(--slate-900);
  text-align: center;
}

.body-qr-code-component {
  color: var(--slate-500);
  font-size: var(--font-size-regular);
  font-weight: var(--font-weight-regular);
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 2.5rem;
  padding: 0 1rem;
}

.attribution {
  font-size: 0.688rem;
  color: var(--slate-500);
  text-align: center;
}
.attribution a {
  color: var(--slate-900);
}

.attribution a:hover {
  color: var(--blue-500);
  text-decoration: none;
}