@font-face {
    font-family: 'Mirable';
    src: url('../fonts/Mirable.otf') format('opentype'),
             url('../fonts/Mirable.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.main {
    font-family: 'Mirable', sans-serif;
}
.pulse {
    text-shadow: 0 0 20px #0ba6da, 0 0 80px #0ba6da;
    animation: pulse-shadow-text 2s infinite alternate;
}

@keyframes pulse-shadow-text {
    0% {
        text-shadow: 0 0 20px #48C69E, 0 0 80px #48C69E;
    }
    100% {
        text-shadow: 0 0 20px #0ba6da, 0 0 80px #0ba6da;
    }
}

.box {
    background-color: #0ba6da;
    cursor: pointer;
    box-shadow: 0 0 10px #0ba6da, 0 0 40px #0ba6da;
    transition: background-color 0.3s ease-in-out;
}
.box:hover {
    transition: background-color 0.3s ease-in-out;
    background-color: #48C69E;
    animation: pulse-shadow 2s infinite alternate;
}

@keyframes pulse-shadow {
    0% {
        box-shadow: 0 0 10px #48C69E, 0 0 40px #48C69E;
    }
    100% {
        box-shadow: 0 0 10px #0ba6da, 0 0 40px #0ba6da;
    }
}

.discord-box {
    background-color: #5865F2;
    cursor: pointer;
    box-shadow: 0 0 10px #5865F2, 0 0 40px #5865F2;
    transition: background-color 0.15s ease-in-out;
}
.discord-box:hover {
    transition: background-color 0.15s ease-in-out;
    background-color: #8D96F6;
    animation: pulse-shadow-discord 2s infinite alternate;
}

@keyframes pulse-shadow-discord {
    0% {
        box-shadow: 0 0 10px #5865F2, 0 0 40px #5865F2;
    }
    100% {
        box-shadow: 0 0 10px #8D96F6, 0 0 40px #8D96F6;
    }
}

.menubutton {
    background: none;
    border-bottom: 1px solid transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transition: border-color 0.25s ease, background 0.4s ease;
}

/* неактивная: по наведению сначала линия, потом свечение */
.menubutton:hover {
    border-bottom: 1px solid rgba(11, 166, 218, 0.8);
    background: radial-gradient(ellipse at 50% 170%,
            rgba(11, 166, 218, 0.6) 0%,
            transparent 60%);
    transition:
        border-color 0.25s ease,
        background 0.5s ease 0.1s;
    /* задержка свечения */
}

/* активная: сразу яркое свечение + пульс */
.menubutton.active {
    border-bottom: 1px solid rgba(11, 166, 218, 1);
    background: radial-gradient(ellipse at 50% 170%,
            rgba(11, 166, 218, 1) 0%,
            transparent 65%);
}
.container {
    max-width: 1120px;
}

.logout-btn {
    position: relative;
}

.logout-btn:hover {
    animation: glow-red 1.5s ease-in-out infinite alternate;
}

@keyframes glow-red {
    0% {
        box-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
    }
    100% {
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.8), 0 0 25px rgba(239, 68, 68, 0.6);
    }
}