/* color palette from <https://github.com/vuejs/theme> */
:root {
  --color-primary: #1d90f5;
  --color-link: #002aff;
  --color-wechat: #2aae67;
  --color-online: greenyellow;
  --color-white: #fff;
  --color-gold: #c59512;
  --color-light-1: #bebebe;
  --color-light-2: #dedfe0;
  --color-light-3: #e9e9eb;
  --color-light-4: #f5f5f5;

  /* font */
  --font-placeholder: #a8abb2;
  --font-main: #fff;
  --font-base: #333;
  --font-gray: #666;
  --font-light: #999;
  --font-light-1: #eee;
  --font-pink: #fe2c55;

  /* 背景色 */
  --background-indigo: #2c3e50;
  --background-wrapper: #272a37;
  --background-secondary: #323644;
  --background-black-half: rgba(0, 0, 0, 50%);
  --background-dark: rgba(39, 42, 55, 40%);
  --background-mask: rgba(255, 255, 255, 20%);
  --background-1: #2b2d31;
  --background-2: #383c4b;
  --background-3: #424656;
  --background-4: #efe2bb;

  /* hover */
  --hover-primary: #2287e1;
  --hover-bg-1: #484d5f;
  --hover-bg-2: rgba(0, 0, 0, 20%);

  /* border */
  --border-base: var(--color-background-1);
  --border-pink: #b52c47;
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --background-wrapper: var(--color-light-4);
    --background-secondary: var(--color-light-3);
    --font-main: var(--font-base);
  }
} */

*,
*::before,
*::after {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

body {
  min-height: 100vh;
  padding: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--color-background);
  transition: color 0.5s, background-color 0.5s;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a:link,
a:visited {
  color: var(--color-white);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

a:hover,
a:active {
  color: var(--color-primary);
  cursor: pointer;
}

.ellipsis-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}

.ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}

.icon-spin {
  animation: icon-loading 1s infinite cubic-bezier(0, 0, 1, 1);
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes icon-loading {
  0% {
    transform: rotate(0);
  }

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