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

  :root {
    --body-bg-color: rgba(213, 225, 239, 1);
    --content-bg-color: #ffffff;
    --h1-color:  #1F314F;
    --p-color: hsl(216, 15%, 48%);
  }
  
  body { 
    margin: 0;
    background: linear-gradient(180deg, #D5E1EF 0%, #7A8189 100%);

  }
 .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1440px;
    height: 960px;
    max-width: 100%;
    margin: auto;    
  }
  .content {
    width: 320px;
    height: 499px;
    max-width: 100%;
    margin: 0 auto;
    background-color: var(--content-bg-color);
    border-radius: 20px;    
    padding:  16px 16px 40px 16px;   
  }
  .qr-image{
    width: 288px;
    height: 288px;
    max-width: 100%;
    margin: 0 auto;    
  }
  img {
    width: 100%;
    border-radius: 10px;
  }  
  .text {    
    margin-top: 24px;
    padding: 0px 16px;
  }
  
  h1 {
    width: 256px;
    height: 52px;
    font-family: 'Outfit', sans-serif;
    font-style: normal;
    text-align: center;
    font-weight: 700;
    font-size: 22px;
    line-height: 120%;
    color: var(--h1-color);

  }
  p {
    width: 256px;
    height:63px;
    font-family: 'Outfit', sans-serif;
    font-style: normal;
    text-align: center;
    font-weight: 400;
    font-size: 15px;
    color: var(--p-color);
    line-height: 140%;
    letter-spacing: 0.2px;
  }

  @media (max-width: 600px) {
    .container {
      width: 375px;
      height: 812px;
    }
  }

  @font-face {
    font-family: "Outfit";
    src: url(../assets/fonts/outfit/Outfit-VariableFont_wght.ttf);
  }