.arrows {
    display: grid;
    align-items: center;
    justify-items: center;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    margin: auto;
}

.btn-arrow {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    user-select: none;
}

.btn-arrow#forward-left,
.btn-arrow#forward-right,
.btn-arrow#backward-left,
.btn-arrow#backward-right,
.btn-arrow#stop {
    width: 70% !important;
    height: 70% !important;
}

.btn-arrow img {
    filter: var(--black-icon);
    width: 75% !important;
    height: 75% !important;
}

.btn-arrow:active img {
    filter: var(--orange-icon);
}

#forward-left img {
    rotate: -45deg;
}

#forward img {
    rotate: 0deg;
}

#forward-right img {
    rotate: 45deg;
}

#left img {
    rotate: -90deg;
}

#right img {
    rotate: 90deg;
}

#backward-left img {
    rotate: 225deg;
}

#backward img {
    rotate: 180deg;
}

#backward-right img {
    rotate: 135deg;
}