:root {
  --font-family: "TTNormsPro", sans-serif;
  --font-family-bold: "Druk Text Wide Cyr", sans-serif;
  --clr-dark: #1d252d;
  --clr-light: #fff;
  --clr-primary: #5f45ba;
  --clr-primary-100: #493492;
  --clr-secondary: #f6e200;
  --clr-secondary-100: #f7b738;
  --clr-danger: #ff1a1a;

  --clr-neutral-50: #f3f3f4;
  --clr-neutral-60: #f5f5f5;
  --clr-neutral-75: #e5e5e5;
  --clr-neutral-90: #f9f9f9;
  --clr-neutral-100: #d6d6d6;
  --clr-neutral-600: #a1a5a7;
  --clr-neutral-1000: #606567;
  --clr-neutral-2000: #2a3a46;

  --theme-clr-text: var(--clr-dark);
  --theme-clr-danger: var(--clr-danger);
  --theme-bg: var(--clr-light);
  --theme-text: 16px;
  --theme-leading: 140%;

  --primary: var(--clr-dark);
  --primary-s: var(--clr-neutral-2000);
  --primary-g: rgba(14, 30, 51, 0.5);
  --secondary: var(--clr-secondary);
  --secondary-p: var(--clr-primary);
  --secondary-s: var(--clr-secondary-100);
  --secondary-text: var(--clr-neutral-2000);
  --bg: var(--theme-bg);
  --border: rgba(14, 30, 51, 0.22);
  --surface: #ffffff;
  --red: var(--clr-danger);
}
.scroll-top {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  text-align: center;
  transition:
    opacity 0.3s,
    bottom 0.3s ease 1s;
  z-index: 99;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}
@media (--max1023) {
.scroll-top {
    bottom: 4rem
}
  }
.scroll-top.up {
    bottom: 30rem;
  }
.scroll-top.active {
    opacity: 0.3;
    pointer-events: all;
  }
.scroll-top.active > * {
      pointer-events: none;
    }
.scroll-top.active:hover {
      opacity: 1;
    }
.scroll-top.active:hover .scroll-top__circle {
        box-shadow: 0px 0px 5rem rgba(7, 17, 31, 0.2);
      }
.scroll-top__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    background-color: var(--secondary-p);
    border-radius: 50%;
    transition: box-shadow 0.3s;
    cursor: pointer;
  }
.scroll-top svg {
    width: 0.9rem;
    height: 1.8rem;
    transform: rotate(-90deg) scale(-1) translateZ(0);
  }
.scroll-top svg path {
      stroke: var(--surface);
    }