@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

:root {
  /*
    CSS Custom Properties
    https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
  */

  /* widths for various device sizes */
  --mobile-width: 375px;
  --desktop-width: 1440px;

  /* colors per style guide */
  --white: hsl(0, 0%, 100%);
  --light: hsl(212, 45%, 89%);
  --medium: hsl(220, 15%, 55%);
  --dark: hsl(218, 44%, 22%);

  /* per style guide */
  font-size: 15px;

}

body {

  font-family: 'Outfit', sans-serif;
  background: var(--light);
}

.qr-code {
  /* 
    using rem (relative units) will set the font to a percentage
    of the font size set on the root element.
    .8rem sets the font size to 80% of the 15px set 
    on the root element
  */
  font-size: .8rem;
  /*
    calc()
    https: //developer.mozilla.org/en-US/docs/Web/CSS/calc
  */
  width: calc(var(--mobile-width) - 80px);
  border: 1px solid var(--light);
  margin: 200px auto;
  background: var(--white);
  border-radius: 5%;
  padding: 20px;
}

.qr-code-image {
  width: 100%;
  border-radius: 5%;
}

.qr-code-title {
  text-align: center;
  color: var(--dark);
  font-weight: 700;
}

.qr-code-instructions {
  text-align: center;
  font-weight: 400;
  color: var(--medium);
  font-size: 1.1rem;
}

.nav {
  padding: 0;
  display: flex;
  flex-direction: row;
}

.nav li {
  list-style-type: none;
  margin: auto 5px;
}

.nav li a,
.nav li a:visited {
  /*
    Font variant (for setting small caps in the header buttons)
    https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
  */
  font-variant: small-caps;
  font-weight: 600;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid var(--light);
  background: var(--dark);
  color: var(--white);
  text-decoration: none;
}

.nav li a:hover {
  background: var(--medium);
  color: var(--white);

}

.attribution {
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}