:root {
    --main-border: 12px;
    --borderGradient: radial-gradient(circle, rgba(254, 255, 255, 0.8), rgba(255, 255, 255, 0.81));
    --bgColor: rgba(0, 0, 0, 0.5);
    --whiteBright: rgba(254, 255, 255, 0.78);
    --whiteLight: rgba(255, 255, 255, 0.18);
    --font-black: rgba(0, 0, 0, 0.5);
}

html, body {
    overflow-x: hidden;
}

*{
    color: rgba(254, 255, 255, 0.78);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul{
    padding: 0;
}

li{
    list-style-type: none;
    padding: 0;
}
/* Базовые элементы с плавным переходом */
.backlight,
.backlight_parent,
.preview,
.backlight_child {
    transition: filter 0.3s ease;
}

.backlight_parent:hover .backlight_child {
    box-shadow: 0 0 10px #ffe066;
}

.backlight:hover {
    box-shadow: 0 0 10px #ffe066;
    cursor: pointer;
}


.preview{
    overflow: hidden;
    padding: 12px;
    background-color: #fff;
    border-radius: 12px;
    transition: all .5s ease;
    will-change: transform, filter;
    /*box-shadow:*/
    /*        0 14px 28px rgba(0,0,0,0.25),*/
    /*        0 10px 10px rgba(0,0,0,0.22);*/
    position: relative;
}

.underline{
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Прозрачный белый */
    /*box-shadow: 0 4px 5px rgba(34, 60, 80, 0.2); !* Мягкая тень вниз *!*/
}

.page__wrapper{
    background-color: rgba(255, 255, 255, 0.6);
}

.logo{
    display: flex;
    gap: 10px;
    align-items: center;
    transition: all 0.4s ease;
}

.logo__header{
    grid-row: 2/3;
    grid-column: 1/2;
}

.logo__pic{
    width: 55px;
    height: 55px;
}
.logo__word{
    width: 210px;
    height: 38px;
}

@media (max-width: 768px) {
    .logo{
        width: 100%;
    }
}