.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    background-color: rgb(0,0,0, 0.4);
    backdrop-filter: blur(10px);
}
.logo {
    width: 100%;
}
.logo a img {
    height: 60px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
}
nav ul {
    display: flex;
    list-style: none;
}
nav ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}
nav ul li a,
nav ul li button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 10px 0;
    border-radius: 50px;
    transition: background-color 0.3s ease, scale 0.2s ease;
    background: transparent;
    padding: 10px 18px;
    cursor: pointer;
}
nav ul li a:hover,
nav ul li button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
nav ul li a:active,
nav ul li button:active {
    background-color: rgba(255, 255, 255, 0.1);
    scale: 0.9;
}