*{margin:0;padding:0;box-sizing:border-box}

::selection{background:rgba(0,0,0,.08);color:inherit}

html,body{height:100%}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Songti SC","Noto Serif CJK SC","Source Han Serif SC","STSong","SimSun",Georgia,serif;
  background:#faf8f5;
  color:#2c2c2c;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:0
}

main{position:relative;z-index:1;padding:2rem}

.badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.25rem;
  padding:2rem 3rem;
  border:1px solid #e0dbd4;
  border-radius:4px;
  background:rgba(250,248,245,.75);
  backdrop-filter:blur(4px);
  opacity:0;
  animation:fadeUp 1s ease-out forwards
}

@keyframes fadeUp{
  0%{opacity:0;transform:translateY(8px)}
  100%{opacity:1;transform:translateY(0)}
}

.item{
  display:flex;
  align-items:center;
  gap:.625rem;
  font-size:.875rem;
  letter-spacing:.02em;
  line-height:1.6;
  color:#5a5548;
  text-decoration:none;
  transition:color .3s ease
}

a.item{cursor:pointer}
a.item:hover{color:#c4453c}

.seal{
  width:1.15rem;
  height:1.15rem;
  flex-shrink:0;
  opacity:.7;
  transition:opacity .3s ease,transform .4s ease
}

a.item:hover .seal{
  opacity:1;
  transform:rotate(-6deg) scale(1.1)
}

.police img{opacity:.85;display:block}
.police span{color:#8a8578;font-size:.8125rem;transition:color .3s ease}
.police:hover span{color:#c4453c}

@media(prefers-color-scheme:dark){
  body{background:#1a1a18;color:#c8c4bc}
  .badge{border-color:#2e2c28;background:rgba(26,26,24,.8)}
  .item{color:#8a8578}
  a.item:hover{color:#e06b62}
  .police span{color:#6a6558}
  .police:hover span{color:#e06b62}
  ::selection{background:rgba(255,255,255,.08)}
}
