:root {
  /* Colors */

  --primary-color: white;
  --secondary-color: hsl(218, 44%, 22%);
  --tertiary-color: hsl(216, 15%, 48%);
  --background-color: hsl(212, 45%, 89%);

  /* Breakpoints */

  --mobile-breakpoint: 375px;
  --desktop-breakpoint: 1440px;
}

/* --------------------
   Default styles
   --------------------
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Outfit", sans-serif;
  background-color: var(--background-color);
}

main {
  height: 100%;
}

/* --------------------
   Utilities
   --------------------
*/

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-col {
  flex-direction: column;
}

.wrapper {
  max-width: var(--desktop-breakpoint);
  padding: 1rem;
  margin: auto;
}

/* --------------------
   Components
   --------------------
*/

/* QR Card */

.qr-card-container {
  padding: 6rem 0;
  height: 100%;
}

.qr-card {
  padding: 16px;
  background-color: var(--primary-color);
  width: fit-content;
  height: fit-content;
  max-width: 25rem;
  border-radius: 1rem;
  text-align: center;
}

.qr-card .qr-card-photo img {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

.qr-card .qr-card-body {
  padding: 24px 16px;
}
.qr-card .qr-card-body .qr-card-title {
  font-size: 1.5rem;
  color: var(--secondary-color);
  margin-bottom: 16px;
}

.qr-card .qr-card-body .qr-card-description {
  font-size: 1rem;
  color: var(--tertiary-color);
}

/* Attribution */

.attribution {
  text-align: center;
}

/* --------------------
   Media Queries
   --------------------
*/

/* Tablet screen */

@media screen and (min-width: 750px) {
  .wrapper {
    padding: 0 4rem;
  }
}

/* Desktop screen */

@media screen and (min-width: 1440px) {
  .wrapper {
    padding: 0 6rem;
  }
}