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

:root {
  --color-main-bg: rgb(226, 226, 226);
  --color-second-bg: rgb(238, 240, 244);
  --color-header-bg: white;
  --color-font: black;
}

html[data-theme='dark'] {
  --color-main-bg: rgba(0, 5, 24, 1);
  --color-second-bg: rgb(60, 63, 65);
  --color-header-bg: white;

}

$anim-time: 0.3s;
* {
  transition: background-color $anim-time, color $anim-time;
}

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  color: $font-color;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
  'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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


a {
  //color: white;
  text-decoration: none;
}

::-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;
}


