@import url('https://fonts.googleapis.com/css?family=Montserrat:500');

nav {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0.6em;
    z-index: 3;
}

.navbar {
    -webkit-backdrop-filter: blur(0.5em);
    backdrop-filter: blur(0.5em);
    background-color: rgba(6,6,6, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(90vw, 30em);
    height: 4em;
    border-radius: 1em;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    gap: 0.9em;
    padding-left: 1em;
    padding-right: 1em;

    > img {
        height: 55%;
    }
}

.nav-button {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.4s ease;
}

.nav-button:hover {
    color: rgba(255, 255, 255, 0.9);
}

.nav-button-hidden {
    color: rgba(156, 156, 156, 0.5);
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 500px) {
    .navbar .hide-on-small {
        display: none;
    }
}