.nav-container{background:linear-gradient(90deg,purple 0%,yellow 80%,white 100%)}.button{display:inline-block;padding:.6em 1.4em;font-size:1rem;font-weight:500;color:#333;background:#f5f5f5;border:1px solid #ccc;border-radius:.375em;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border .2s}.button:hover,.button:focus{background:#e0e0e0;color:#111;border-color:#999}.button--primary{color:#fff;background:hsl(var(--primary-hue),var(--primary-saturation),var(--primary-lightness));border:1px solid hsl(var(--primary-hue),var(--primary-saturation),calc(var(--primary-lightness) - 10%))}.button--primary:hover,.button--primary:focus{background:hsl(var(--primary-hue),var(--primary-saturation),40%);border-color:hsl(var(--primary-hue),var(--primary-saturation),35%);color:#fff}