@import "normalize.css";
@import "@arco-design/web-react/dist/css/arco.css";

* {
  box-sizing: border-box;
}

html,
body {
  position: relative;
  background: var(--color-bg-1);
  // background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  // background-size: 400% 400%;
  // animation: gradient 15s ease infinite;
  // height: 100vh;
}

#bs-app {
  position: relative;
  > main {
    position: absolute;
    left: 0;
    right: 0;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@font-face {
  font-family: "bs";
  src: url("./backset.woff");
}

.container {
  width: 1120px;
  margin: 0 auto;
}

input {
  outline: none;
  border: 0;
}

.bs-shadow {
  box-shadow: rgb(0 0 0 / 13%) 0px 2px 4px 0px, rgb(0 0 0 / 11%) 0px 1px 1px 0px;
}

.bs-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bs-scrollbar {
  &::-webkit-scrollbar {
    width: 12px;
    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border: 4px solid transparent;
    background-clip: padding-box;
    border-radius: 7px;
    background-color: var(--color-text-4);
  }
}
