:root {
    /* Primary Theme Colors */
    --primary-color: #0057a0;
    --secondary-color: #4d4d4d;
    --accent-color: #2ecc71;
    --highlight-color: #ff6f00;

    /* Background and Text */
    --background-color: #f0f4ff;
    --text-color: #4d4d4d;

    /* Optional Button Hover */
    --btn-hover-color: #ffc300;
}

/* Example usage */
body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: "Poppins", sans-serif;
}

@font-face {
    font-family: "Roboto";
    src: url("../css/fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

.times-roman {
    font-family: "Times New Roman", Times, serif;
}

.tomkin {
    font-family: "Tomkin", Times, serif;
}

@keyframes scrollUp {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(-100%);
    }
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.animate-marquee {
    animation: marquee 15s linear infinite;
    white-space: nowrap;
    display: inline-block;
}