/* root var */


   :root {
       --Yellow: hsl(47, 88%, 63%);
       --White: hsl(0, 0%, 100%);
       --Gray-500: hsl(0, 0%, 42%);
       --Gray-950: hsl(0, 0%, 7%);
       --Font-size-paragraph: 16px;
       --font-family: 'Figtree', sans-serif;
       --font-weight-medium: 500;
       --font-weight-bold: 800;
   }


   /* Global Reset  */


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


   body {
       font-family: var(--font-family);
       font-size: var(--Font-size-paragraph);
       background-color: var(--Yellow);
       height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
   }


   /* QrCard Styling */


   .card {
       width: 300px;
       background-color: var(--White);
       border-radius: 20px;
       padding: 20px;
       box-shadow: 8px 8px 0px rgba(0, 0, 0, 1);
       border: 1px solid black;
   }


   .card .img1 {
       width: 100%;
       border-radius: 12px;
   }


   .card span {
       background-color: var(--Yellow);
       font-weight: var(--font-weight-bold);
       font-size: 10px;
       cursor: pointer;
       padding: 5px 10px;
       border-radius: 3px;
       margin: 20px 0 15px 0;
       display: inline-block;
   }


   .card .fP {
       font-weight: var(--font-weight-medium);
       font-size: 10px;
   }


   .card h1 {
       font-size: 18px;
       margin: 15px 0 20px 0;
   }


   .card .sP {
       font-size: 13px;
       font-weight: var(--font-weight-medium);
       color: var(--Gray-500);
       line-height: 1.6;
   }


   .card .personal {
       display: flex;
       align-items: center;
       margin: 20px 0 5px 0;
       gap: 10px;
   }


   .card .img2 {
       width: 30px;
   }


   .card h2 {
       font-size: 13px;
   }


   /* Attribution footer */


   .attribution {
       font-size: 11px;
       text-align: center;
       margin-top: 20px;
   }

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