.attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
    body { 
      background-color: hsl(212, 45%, 89%); 
    }
    .card-wrapper {
      display: flex; 
      justify-content:center; 
      align-items: center;
      height:100vh;
    }
    .card { 
      background-color:white;
      width:320px;
      height:480px;
      text-align: center;
      font-family:outfit;
      padding-top:16px;  /* adds padding to the top of the container */
      border-radius:20px; /* this rounds the corners of the container */
    }
    .qrcode { 
        height:288px; 
        width:288px; 
        border-radius:10px;  /* this rounds the corners of the container */
    }
    .text {
        height:131px;
        width:288px;
        margin-left:auto;
    }
    .dark { 
        color:hsl(218, 44%, 22%); 
        font-size:22px; 
        width:256px; 
        font-weight:bolder; 
        line-height:1.2em; /* moves the lines of text closer together */
    }
    .light { 
        color: hsl(216, 15%, 48%); 
        font-size:15px; 
        width:256px;
        text-align:center; 
        line-height:1.5em; /* moves the lines of text closer together */
    }