.main-border {
  position: fixed;
  transition: all var(--anim-time);
  transition-delay: calc(var(--anim-time) / 5);
}

.site-border {
  background-color: var(--main-color);
}

.v-border {
  width: var(--intro-stroke-width);
  height: calc(100% - 4 * var(--border-margin));
}

.h-border {
  height: var(--intro-stroke-width);
  width: calc(100% - 4 * var(--border-margin));
}

#left-main-border {
  top: calc(3 * var(--border-margin));
  left: calc(var(--border-margin) + var(--border-offset));
  transform: translate(var(--hor-shift), 0);
}

.left-main-border {
  top: calc(3 * var(--border-margin) + var(--top-margin)) !important;
  height: calc(100% - 4 * var(--border-margin) - var(--top-margin)) !important;
}

#top-main-border {
  left: calc(3 * var(--border-margin));
  top: calc(var(--border-margin) + var(--border-offset));
  transform: translate(0, calc(var(--ver-shift)));
}

.top-main-border {
  top: calc(var(--border-margin) + var(--border-offset) + var(--top-margin)) !important;
}

#right-main-border {
  top: var(--border-margin);
  left: calc(100% - var(--border-margin) - var(--border-offset));
  transform: translate(calc(var(--hor-shift) * -1), 0);
}

.right-main-border {
  top: calc(var(--border-margin) + var(--top-margin)) !important;
  height: calc(100% - 4 * var(--border-margin) - var(--top-margin)) !important;
}

#bottom-main-border {
  left: var(--border-margin);
  top: calc(100% - var(--border-margin) - var(--border-offset));
  transform: translate(0, calc(var(--ver-shift) * -1));
}

.bottom-main-border-hr {
  top: calc(100% - var(--border-margin) - var(--border-offset)) !important;
}