/* Navigation Component - inherits flex properties from .lower class */

.nav-button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: var(--primary-color);
    box-shadow: none;
    flex: 1 1 0%;
    margin: clamp(4px, 1.5vh, var(--spacing-md));
    border-radius: var(--border-radius-md);
    color: var(--broken-white);
    transition: var(--transition-normal);
    margin: clamp(3px, 3vh, var(--spacing-xl)) clamp(4px, 3vw, var(--spacing-md));
    text-decoration: none;
    min-width: 0;
    overflow: hidden;
}

.nav-button:hover {
    transform: scale(1.03);
}

.nav-button img {
    width: clamp(28px, 5vw, 30%);
    margin-top: auto;
    margin-bottom: -10px;
}

.nav-button h3 {
    font-family: var(--font-medium);
    font-size: clamp(0.65em, 2vw, 1.5em);
    margin-top: auto;
    margin-bottom: auto;
}

/* Individual button colors */
.nav-button:nth-child(1) {
    background-color: #dddcf0;
}
.nav-button:nth-child(1) h3 { color: #4943be; }
.nav-button:nth-child(1) img, .nav-button:nth-child(1) h3 { filter: brightness(0.9); }

.nav-button:nth-child(2) {
    background-color: #e0d8ec;
}
.nav-button:nth-child(2) h3 { color: #6a45a8; }

.nav-button:nth-child(3) {
    background-color: #f5e0ef;
}
.nav-button:nth-child(3) h3 { color: #e167b4; }
.nav-button:nth-child(3) img, .nav-button:nth-child(3) h3 { filter: brightness(0.9); }

.nav-button:nth-child(4) {
    background-color: #dceede;
}
.nav-button:nth-child(4) h3 { color: #98caa5; }
.nav-button:nth-child(4) img, .nav-button:nth-child(4) h3 { filter: brightness(0.8); }

.nav-button:nth-child(5) {
    background-color: #d8e4d2;
}
.nav-button:nth-child(5) h3 { color: #556f3c; }

.nav-button:nth-child(6) {
    background-color: #c0d2ba;
}
.nav-button:nth-child(6) h3 { color: #314021; }
.nav-button:nth-child(6) img, .nav-button:nth-child(6) h3 { filter: brightness(1.1); }

.nav-button:nth-child(5) {
    background-color: #d8e4d2;
}
.nav-button:nth-child(5) h3 { color: #556f3c; }

.nav-button:nth-child(6) {
    background-color: #c0d2ba;
}
.nav-button:nth-child(6) h3 { color: #314021; }