h1,
h2,
h3 {
  margin: 0;
  margin-block-start: 0.5rem;
  margin-block-end: 0.5rem;
}

p {
  margin: 0;
  margin-block-start: 1rem;
  margin-block-end: 1rem;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  overflow: auto;
  font-family: "Noto Serif CJK SC", "Noto Sans CJK SC", serif, sans-serif;
  font-size: 13px;
  color: #444444;
  position: relative;
}

body > header {
  top: 0;
  /* 使用sticky时必须设置top! */
  position: sticky;
  background-color: #fafafa;
  border: #eeeeee;
  box-shadow: 0 0 6px #cccccc;
  padding: 16px;
}

body > article {
  padding: 1rem;
}

.card {
  border: 1px solid #ccc;
  background-color: #dcedc8;
  padding: 1rem;
  display: grid;
  grid-template-areas:
        "img id"
        "img txt";
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  word-break: break-all;
  font-family: monospace;
}

.card > img {
  grid-area: img;
  max-width: 40vw;
}

.card > div:nth-child(2) {
  grid-area: id;
  color: green;
}

.card > div:nth-child(3) {
  grid-area: txt;
}