:root {
    /* NAVBAR */
    --navbar-text-color: lightsteelblue;
    --navbar-text-font: "Roboto", sans-serif;
    --navbar-background: slategray;
}

.navbar-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;

    position: sticky;
    top: 0;

    gap: 2rem;

    background-color: var(--navbar-background);
}

/* NAVBAR */
.navbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
}
.navbar a{
    text-decoration: none;
    color: var(--navbar-text-color);

    font-family: var(--navbar-text-font);
    font-size: 1.5rem;
}
.navbar a:hover {
    color: color-mix(
            in srgb,
            var(--navbar-text-color) 70%,
            slategray
    );
}
.navbar a:active {
    color: color-mix(
            in srgb,
            var(--navbar-text-color) 50%,
            slategray
    );
}


/* LOGO */
.logo {
    display: flex;
    flex-direction: row;
    align-items: end;

    gap: 5px;

    color: var(--navbar-text-color);

    padding: 10px;

    text-decoration: underline;
}
.logo img {
    width: 2.5rem;
    height: 2.5rem;
}
.logo h1 {
    font-family: var(--navbar-text-font);
    margin: 0;
}