@import url("variables.css");
@import url("debug.css");

.navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    height: var(--nav-height);
    background: var(--primary-color);
    
    flex: 0 0 auto;
    border-bottom: 2px solid var(--primary-color-shade5);
}

.navbar a {
    min-width: 10%;
    background-color: #00000000;
    border-radius: var(--nav-a-border-radius);
    padding: 0px 10px;
    height: calc(var(--nav-height) - 10px);

    font-size: 1.25em;

    transition: all var(--nav-transition-time) ease-in-out;
    
    text-decoration: none;

    white-space: nowrap;
}

.navbar a:hover {
    transition: all var(--nav-transition-time) ease-in-out;
    transform: scale(1.25);
}

.navbar a:hover>*{
    transition: all var(--nav-transition-time) ease-in-out;
    transform: translateY(2px);
}

.navbar a>*{
    transition: all var(--nav-transition-time) ease-in-out;
}