body {
  background-color: rgb(217, 235, 250);
  /* font-family: 'Courier New', Courier, monospace; */

}

main {
  min-height: 90vh;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* .main-home {
  background-image: url(/images/background/space.jpg);
  background-attachment: fixed;
  background-size: auto 100%;
  background-origin: content-box;
} */

.cat {
  width: 90%;
  /* width: 300px; */
  border-radius: 4em;

}

.face {
  animation: roll 30s linear infinite;
}

@keyframes roll {
  0% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.footer-item {
  margin: 0 8px;
}

.footer-beian {
  display: flex;
  flex-direction: row;
  align-items: center;
}


/* 滤镜 */
.blur {
  -webkit-filter: blur(4px);
  filter: blur(4px);
}

.brightness {
  -webkit-filter: brightness(250%);
  filter: brightness(250%);
}

.contrast {
  -webkit-filter: contrast(180%);
  filter: contrast(180%);
}

.grayscale {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.huerotate {
  -webkit-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}

.invert {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.opacity {
  -webkit-filter: opacity(50%);
  filter: opacity(50%);
}

.saturate {
  -webkit-filter: saturate(7);
  filter: saturate(7);
}

.sepia {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

.shadow {
  -webkit-filter: drop-shadow(8px 8px 10px green);
  filter: drop-shadow(8px 8px 10px green);
}