:root {
  --colorAccent1: #dddd3c;
  --colorAccent2: #4c21ff;
  --colorAccent3: #cf29ff;
  --colorAccent4: #7fedbb;
  --colorAccent5: #fffefe;
  --colorText1: #fffefe;
  --colorText2: #828289;
  --colorText3: #ffffff;
  --colorText4: #cccccc;
  --colorBackground: #000110;
  --colorGradient1: linear-gradient(
    90.56deg,
    rgba(76, 33, 255, 0.2) 0.21%,
    rgba(207, 41, 255, 0.2) 100%
  );
  --colorScrollbarThumb: #a5a5a5;
  --colorScrollbarThumbHover: #f8f8f8;
  --colorScrollbarTrack: #090909;
  --fontSizeSmalltext: 10px;
  --fontSizeSubtext: 12px;
  --fontSizeText: 14px;
  --fontSizeMiddleText: 16px;
  --fontSizeBigText: 18px;
  --fontSizeSubTitle: 20px;
  --fontSizeTitleMin: 22px;
  --fontSizeTitle: 24px;
  --fontSizeLowTitle: 26px;
  --fontSizeMiddleTitle: 30px;
  --fontSizeBigTitle: 40px;
  --fontSizeBigBigTitle: 42px;
  --fontSizeGigant: 60px;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}
*::-webkit-scrollbar {
  width: 10px;
}
*::-webkit-scrollbar-track {
  background: rgba(248, 248, 248, 0.5);
}
*::-webkit-scrollbar-thumb {
  background: var(--colorScrollbarThumb);
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--colorScrollbarThumbHover);
}
html {
  font-size: var(--fontSizeText);
  height: 100%;
  /*overflow-x: hidden;*/
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--firstFont);

  background: #f8f8f8;
  color: var(--colorBackground);
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style-type: none;
}
button,
input {
  border: none;
  background: none;
}
button:focus,
input:focus {
  outline: none;
}
#root {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}