:root {
     --ai-font-color: #2F4858;
     --ai-background-color: #f0f0f0;
     --ai-body-background-color: #fff;
     --ai-a-color: #2F4858;
     --ai-border-color: #222222;
 }

 @media screen and (prefers-color-scheme: dark) {
     :root {
         --ai-font-color: #CDCDCD;
         --ai-background-color: #1B1B1B;
         --ai-body-background-color: #000;
         --ai-a-color: #CDCDCD;
         --ai-border-color: #222222;
     }
 }

 body {
     background-color: var(--ai-body-background-color);
     color: var(--ai-font-color);
 }

 .container {
     color: var(--ai-font-color);
     width: 60%;
     margin: 10% auto 0;
     background-color: var(--ai-background-color);
     padding: 2% 5%;
     border-radius: 10px;
 }

 a {
     color: var(--ai-font-color);
     text-decoration: none;
 }

 a:visited {
     text-decoration: none;
 }

 .tags {
     border-radius: 5px;
     border: gray solid 1px;
     padding: 3px 8px;
 }

 .tags+.tags {
     margin-left: 5px;
 }

 .stat {
     font-size: 12px;
 }

 hr {
     color: var(--ai-font-color);
     height: 1px;
     background-color: var(--ai-font-color);
     border: none;
 }

 /* 当屏幕宽度小于或等于768像素时 */
 @media (max-width: 768px) {
     .container {
         width: 90%;
         margin: 15% auto 0;
         font-size: 14px;
     }

     .container h1 {
         font-size: 26px;
     }
 }

 /* 当屏幕宽度小于或等于480像素时 */
 @media (max-width: 480px) {
     .container {
         width: 90%;
         margin: 25% auto 0;
         font-size: 14px;
     }

     .container h1 {
         font-size: 22px;
     }
 }

 
.flex {
  display: flex;
}

.content-center {
  align-content: center;
}
.content-start {
  align-content: flex-start;
}
.content-end {
  align-content: flex-end;
}
.content-between {
  align-content: space-between;
}
.content-around {
  align-content: space-around;
}
.content-evenly {
  align-content: space-evenly;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.self-auto {
  align-self: auto;
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.self-center {
  align-self: center;
}
.self-stretch {
  align-self: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-evenly {
  justify-content: space-evenly;
}
.justify-items-auto {
  justify-items: auto;
}
.justify-items-start {
  justify-items: start;
}
.justify-items-end {
  justify-items: end;
}
.justify-items-center {
  justify-items: center;
}
.justify-items-stretch {
  justify-items: stretch;
}
.justify-self-auto {
  justify-self: auto;
}
.justify-self-start {
  justify-self: start;
}
.justify-self-end {
  justify-self: end;
}
.justify-self-center {
  justify-self: center;
}
.justify-self-stretch {
  justify-self: stretch;
}
.place-content-center {
  place-content: center;
}
.place-content-start {
  place-content: start;
}
.place-content-end {
  place-content: end;
}
.place-content-between {
  place-content: space-between;
}
.place-content-around {
  place-content: space-around;
}
.place-content-evenly {
  place-content: space-evenly;
}
.place-content-stretch {
  place-content: stretch;
}
.place-items-auto {
  place-items: auto;
}
.place-items-start {
  place-items: start;
}
.place-items-end {
  place-items: end;
}
.place-items-center {
  place-items: center;
}
.place-items-stretch {
  place-items: stretch;
}
.place-self-auto {
  place-self: auto;
}
.place-self-start {
  place-self: start;
}
.place-self-end {
  place-self: end;
}
.place-self-center {
  place-self: center;
}
.place-self-stretch {
  place-self: stretch;
}