/*CSS 重置*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/*通用设置*/
body {
  /*字体未加载出来则用sans-serif*/
  font-family: 'Outfit', sans-serif;
  /*根据guide文档设置*/
  background-color: hsl(212, 45%, 89%);
  /*viewport height视口高度100%*/
  min-height: 100vh;
  display: flex;
  /*Flex 项目主轴为垂直方向*/
  /*因为二维码和文字是上下排列的*/
  flex-direction: column;
  /*将Flex 项目主轴方向（垂直）居中*/
  justify-content: center;
  /*将Flex 项目侧轴方向（水平）居中*/
  align-items: center;
  /*在 body 元素的边缘内侧添加一些空间*/
  /*rem 相对单位，根元素通常为16px*/
  padding: 40px;
}
.qr-card {
  /*白色背景*/
  background-color: hsl(0, 0%, 100%);
  /*圆角*/
  border-radius: 20px;
  /*阴影*/
  /*水平偏移；垂直偏移；模糊距离；阴影颜色*/
  box-shadow: 0 25px 25px rgba(0, 0, 0, 0.05);
  /* padding: 上 右 下 左; */
  padding: 16px 16px 40px 16px;
  /*内容居中*/
  text-align: center;
  max-width: 320px;
  display: flex; 
  flex-direction: column;
  gap: 24px;
}
/*要选中img本身*/
.qr-image img{
  border-radius: 10px;
  /*宽度不超过容器宽度*/
  max-width: 100%;
}
.qr-text {
  display: flex;
  flex-direction: column;
  padding: 0px 16px 0px 16px;
  gap: 16px;
}
.qr-text h1 {
  color: hsl(218, 44%, 22%);
  font-size: 22px;
  font-weight: 700;
  line-height: 120%;
}
.qr-text p {
  color: hsl(216, 15%, 48%);
  font-size: 15px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.2px;
}