.tod-primary {
    color: #FF8400;
}

.tod-secondary {
    color: #FF6200;
}

.bg-secondary {
    background-color: #FF6200;
}

.tod-black {
    color: #000000;
}

.tod-dark {
    color: #1F2B3E;
}

.tod-darker {
    color: #33353A;
}

.tod-darkest {
    color: #1E1E2A;
}

.tod-light {
    color: #F5F5F7;
}

.tod-white {
    color: #FFFFFF;
}

video.heroVideo {
    pointer-events: none;
    clip-path: inset(3px 3px);
}

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

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

.animate-marquee {
    animation: marquee 15s linear infinite;
}

@keyframes pencilHighlight {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes buttonAnim {
    80%,
    100% {
        transform: translateX(-917%);
    }
}

@keyframes buttonAnimSm {

    80%,
    100% {
        transform: translateX(-715%);
    }
}

@keyframes floatingLeft {
    from {
        transform: translate(0, 0);
    }

    65% {
        transform: translate(-5px, 25px);
    }

    to {
        transform: translate(0, 0);
    }
}

@keyframes floatingRight {
    from {
        transform: translate(0, 0);
    }

    65% {
        transform: translate(5px, 25px);
    }

    to {
        transform: translate(0, 0);
    }
}

@keyframes bottomToTop {
    from {
        transform: translate(0, 0);
        opacity: 1;
    }

    65% {
        transform: translate(5px, -2px);
        opacity: 0.8;
    }

    to {
        transform: translate(5px, -5px);
        opacity: 1;
    }
}

@keyframes bottomToTop2 {
    from {
        transform: translate(0, 0);
        opacity: 1;
    }

    65% {
        transform: translate(-20px, -2px);
        opacity: 0.8;
    }

    to {
        transform: translate(-20px, -5px);
        opacity: 1;
    }
}

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0; 
    background: transparent; 
}
::-webkit-scrollbar-thumb {
    background: #000000;
}