/* 基本样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设置页面背景和基本布局 */
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f5f5f5;
  padding: 0 10px; /* 适应小屏幕时避免左右溢出 */
}

/* 主容器样式 */
.container {
  text-align: center;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  max-width: 500px; /* 最大宽度限制 */
  width: 100%; /* 自适应宽度 */
}
/* 上方文字样式 */
.text-a {
  text-align: left;
  font-size: 16px;
}

.text-b {
  text-align: left;
  font-size: 14px;
}

.text-c {
  text-align: left;
  font-size: 12px;
}


.emoji-container {
  font-size: 6px;
  text-align: left;
}

.emoji-containert {
  font-size: 6px;
  text-align: center;
}

/* 图片样式 */
.qr-image {
  width: 70%; /* 图片自适应容器宽度 */
  max-width: 300px; /* 图片最大宽度 */
  height: auto;
  margin-bottom: 5px; /* 图片下方间隔 */
}

/* 复制按钮容器 */
.copy-container {
  margin-top: 5px;
}

/* 复制按钮样式 */
#copy-btn {
  padding: 4px 12px;
  background-color: #4d4d4d;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

#copy-btn:hover {
  background-color: #a3a3a3;
}

/* 屏幕较小设备（如手机） */
@media (max-width: 480px) {
  body {
    padding: 10px;
  }

  .container {
    padding: 15px;
    max-width: 100%;
	font-size: 14px;
  }
  
.emoji-containert {
  font-size: 5px;
  text-align: center;
}

  #copy-btn {
    padding: 10px 18px;
    font-size: 13px;
  }
}

/* 屏幕较大设备（如平板、桌面） */
@media (min-width: 481px) and (max-width: 1024px) {
  .container {
    max-width: 80%; /* 中等屏幕宽度限制 */
  }

  #copy-btn {
    padding: 4px 12px;
    font-size: 14px;
  }
}

/* 更大屏幕（如桌面） */
@media (min-width: 1025px) {
  .container {
    max-width: 600px; /* 最大宽度 */
  }

  #copy-btn {
    padding: 4px 12px;
    font-size: 14px;
  }
}