/* Corner Decorations */
.corner-decoration {
            
    position: fixed; /* Фиксируем позицию относительно viewport */
    width: 30px;
    height: 30px;
    border: 2px solid #ffffff; /* Цвет границы */
    z-index: 1000; /* Чтобы элементы были поверх всего */
    pointer-events: none; /* Чтобы не мешали взаимодействию */
    border: 2px solid var(--neon-blue);
}

.corner-decoration::before, .corner-decoration::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--neon-blue);
    box-shadow: 0 0 10px var(--neon-blue);
}
/* Адаптивные размеры для мобильных устройств */
@media (max-width: 768px) {
    .corner-decoration {
        
        width: 20px;
        height: 20px;
        border-width: 1px;
    }
}

/* Позиционирование каждого угла */
.corner-tl {
    top: 3px;
    left: 3px;
    border-right: none;
    border-bottom: none;
}

.corner-tr {
    top: 3px;
    right: 3px;
    border-left: none;
    border-bottom: none;
}

.corner-bl {
    bottom: 3px;
    left: 3px;
    border-right: none;
    border-top: none;
}

.corner-br {
    bottom: 3px;
    right: 3px;
    border-left: none;
    border-top: none;
}

/* Декоративные псевдоэлементы (если нужны) */
.corner-decoration::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--neon-blue) /* Цвет элементов */
}
.corner-decoration::after {
    content: '';
    position: absolute;
    width: -5px;
    height: -5px;
    background: var(--neon-blue) /* Цвет элементов */
}

@media (max-width: 768px) {
    .corner-decoration::before,
    .corner-decoration::after {
        width: 7px;
        height: 7px;
    }
}

/* Позиционирование псевдоэлементов для каждого угла */
.corner-tl::before {
    top: -5px;
    left: -5px;
}

.corner-tl::after {
    bottom: 0px;
    right: 0px;
}

.corner-tr::before {
    top: -5px;
    right: -5px;
}

.corner-tr::after {
    bottom: 0px;
    left: 0px;
}

.corner-bl::before {
    bottom: -5px;
    left: -5px;
}

.corner-bl::after {
    top: 0px;
    right: 0px;
}

.corner-br::before {
    bottom: -5px;
    right: -5px;
}

.corner-br::after {
    top: 0px;
    left: 0px;
}