@import "@icon-park/vue-next/styles/index.css";
@import "colors";
@import "anim";

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  color: $font-color;
}

#app {
  width: 100%;
  height: 100%;
}

::-webkit-scrollbar {
  width: 8rem;
  height: 10rem;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 2rem;
}

::-webkit-scrollbar-thumb {
  background: $second;
  border-radius: 10rem;
}

footer {
  box-sizing: content-box;
  height: $footer-height;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: $space;
}

.i-icon {
  cursor: pointer;
}

.my-button {
  //font-size: 13rem;
  cursor: pointer;
  border-radius: 6rem;
  padding: 0 15rem;
  height: 28rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 18rem;
  transition: all .3s;
  background: rgb(75, 85, 99);

  &:hover {
    opacity: .7;
  }

  &.large {
    height: 50rem;
    font-size: 18rem;
    padding: 0 18rem;
  }

  &.primary {
    background: $main;
  }
}