.an-arrow {
    --arrow-margin: 16px;
    width: 24px;
    height: 24px;
    opacity: 0.9995;
    position: relative;
    z-index: var(--z-an-arrow);
}

#arrows-html {
    z-index: var(--z-arrows-html);
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 30% 40% 30%;

    width: 100%;
    height: 100%;

    position: absolute;
}

#arrow-nw {
    transform: rotate(-45deg);
    margin-left: var(--arrow-margin);
    margin-top: var(--arrow-margin);
}

#arrow-n {
    left: 47.6%;
    margin-top: var(--arrow-margin);
}

#arrow-ne {
    transform: rotate(45deg);
    margin-left: auto;
    margin-right: var(--arrow-margin);
    margin-top: var(--arrow-margin);
}

#arrow-w {
    transform: rotate(270deg);
    left: 0px;
    top: 35%;
    margin-left: var(--arrow-margin);
}

#arrow-e {
    transform: rotate(90deg);
    margin-left: auto;
    margin-right: var(--arrow-margin);
    top: 35%;
}

#arrow-sw {
    transform: rotate(225deg);
    margin-top: auto;
    margin-left: var(--arrow-margin);
    margin-bottom: var(--arrow-margin);
}

#arrow-s {
    left: 47.6%;
    transform: rotate(180deg);
    margin-top: auto;
    margin-bottom: var(--arrow-margin);
}

#arrow-se {
    transform: rotate(135deg);
    margin-left: auto;
    margin-top: auto;
    margin-bottom: var(--arrow-margin);
    margin-right: var(--arrow-margin);
}