:root {
    --buttonsUnhovered: rgba(140, 147, 182, 1);
    --buttonsHovered: rgba(65, 85, 173, 0.468);

    --gradientUnhovered: linear-gradient(0deg, rgb(140, 147, 182));

    --navButtonFontSize: clamp(16px, calc(20px + (30 - 20) * (100vw - 768px)/(1920 - 768)), 25px);
}

nav {
    background-image: linear-gradient(rgb(180, 188, 235), rgb(162, 184, 243));
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    display: grid;
    justify-content: space-between;
    grid-template-columns: 4fr auto auto;
    grid-template-rows: 100%;
    
    
}

.home {
    max-width: fit-content;
    font-size: var(--navButtonFontSize);
}

.news {
    text-align: center;
    margin-right: 0%;

    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;

    font-size: var(--navButtonFontSize);
}

.learn {
    text-align: center;
    margin-left: 0%;

    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;

    font-size: var(--navButtonFontSize);
}