:root {
    --font: "Inter";
    --span-cta-font: "Inter";
    --accent-color: #ff0000;
    --accent-color-light: #ff7f00;
    --accent-color-dark: #b30000;

    --pill-background: #8A0000;
    --pill-color: #ffffff;

    --accent-color-bg: linear-gradient(to right, transparent, var(--accent-color) 40%, var(--accent-color-light) 50%, var(--accent-color) 60%, transparent);
    --accent-bg-image: linear-gradient(0deg, var(--color-bg) 40%, var(--accent-color));
    --accent-bg-image-corner: linear-gradient(-45deg, var(--color-bg) 40%, var(--accent-color) 90%, var(--accent-color-light) 100%);
    --gradient-buttons: linear-gradient(45deg, var(--accent-color-dark) 0%, var(--accent-color) 60%, var(--accent-color-light) 100%);
    --gradient-secondary: linear-gradient(135deg, #2a2a2a 0%, #3a0e0e 100%);
    --gradient-fluff: linear-gradient(175deg, var(--accent-color-light) 10%, var(--accent-color) 30%, var(--accent-color-dark) 100%);

    --border: 1px solid var(--border-color);
    --border-color: #5A1010;

    --color-bg: #070202;
    --color-bg-dark: #1A0808;
    --color-link-hover: #1A0808;

    --font-color: #c8c8c8;
    --font-color-dark: #b0b0b0;
    --font-color-light: #c0c0c0;
    --font-color-buttons: #ffffff;
}

.vp-underline {
    background:
        linear-gradient(to right, var(--accent-color));
    background-size: 0% 5%;
    background-position: 0 97%;
    background-repeat: no-repeat;
    animation: underlineGrow 2s ease forwards;
    animation-delay: 2s;
}

@keyframes underlineGrow {
    to {
        background-size: 100% 5%;
    }
}