@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

body {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-base-content);
    background-color: var(--color-base-100);
}

.old-fractional-board-gradient {
    background-color: #0a5552; /* darker fallback */
    background-image: linear-gradient(20deg, #dceac060 0%, #1b7590 30%);
    background-blend-mode: normal, normal, normal;
    background-size: cover, cover, cover;
    background-repeat: no-repeat;
}

.fractional-board-gradient {
    background-color: #2d2b4f; /* darker fallback */
    background-image: linear-gradient(180deg, rgba(10, 2, 31, 0.89) 0%, #44409a 30%);
    background-blend-mode: normal, normal, normal;
    background-size: cover, cover, cover;
    background-repeat: no-repeat;
}

/*Linear gradients in #219ebc fading to transparent as it moves to the right with transparency starting about 65% of the way across*/
.fading-gradient {
    background: linear-gradient(to right, #4b2f96, #4b2f96 72%, transparent 100%);
    background-blend-mode: normal, normal, normal;
    background-size: cover, cover, cover;
    background-repeat: no-repeat;
}

.nav-item:not(.selected):hover {
    background-color: #52525250;
}

.nav-item.selected {
    position: relative;
    cursor: default;
}

.nav-item.selected::after {
    content: "";
    position: absolute;
    bottom: -4px; /* Position below the text */
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 4px;
    background-color: #4b2f96;
}

.menu-closed {
    opacity: 0;
    height: 0;
    pointer-events: none;
    transition: opacity 0.4s, height 0.4s;
    animation-timing-function: ease-out;
}

.menu-open {
    opacity: 1;
    height: 270px;
    pointer-events: auto;
    transition: opacity 0.5s, height 0.6s;
    animation-timing-function: ease-out;
}