:root {
    --dark: #050505;
    --white: #fff;
}

.navbar-container {
    position: fixed;
    align-items: center;
    display: flex;

    gap: clamp(20px, 3vw, 40px);
    padding: 12px 24px;
    left: 50%;
    top: 25px;

    translate: -50% 0;
    scale: 1;

    background-color: rgba(22, 22, 26, 0.5);

    border: 1px solid #ffffff0d;
    backdrop-filter: blur(25px);
    border-radius: 25px;

    transition:
    scale 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    translate 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.4s ease;
}

.navbar-container.scrolled {
    background-color: rgba(10, 10, 12, 0.95);
    translate: -50% -10px;
    scale: 0.92;
}

.discord {
    align-items: center;
    display: flex;
    justify-content: center;

    background-color: #ffffff08;
    padding: 8px 20px;
    color: #fff;
    gap: 8px;

    font-size: 18px;
    font-weight: 700;

    border: 1px solid #ffffff0d;
    border-radius: 15px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.discord img { 
    aspect-ratio: 1/1;
    width: 20px;
    transition: transform 0.3s ease;
}
.discord:hover { 
    background-color: rgba(255, 255, 255, 0.08); 
    border-color: rgba(255, 255, 255, 0.3);
}
.discord:hover img {
    transform: scale(1.1) rotate(-5deg);
}

.roblox {
    position: relative;
    align-items: center;
    display: flex;
    justify-content: center;
    
    background-color: #ffffff08;
    aspect-ratio: 1/1;
    width: 40px;

    border: 1px solid #ffffff0d;
    border-radius: 15px; 
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.roblox img { 
    aspect-ratio: 1/1;
    width: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.roblox::before {
    content: '';
    position: absolute;

    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.4s ease-out;
}
.roblox:hover { 
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}
.roblox:hover img {
    transform: scale(1.05) rotate(15deg);
}