@font-face {
    font-family: "Begum Sans";
    src: url("../fonts/begum-sans.ttf");
}

@font-face {
    font-family: "Gilda Display";
    src: url("../fonts/gilda-display.ttf");
}

@font-face {
    font-family: "Ysabeau Infant";
    src: url("../fonts/ysabeau-infant.ttf");
}

* {
    box-sizing: border-box;
    font-family: "Begum Sans", sans-serif;
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-width);
}

body {
    background-color: #fbfbfd;
    color: #1b1b1b;
}

.bg-golden {
    background-color: #ebf6f7;
}

.text-golden {
    color: #bf9a52 !important;
    letter-spacing: 2px;
}

.title {
    font-family: "Begum Sans", sans-serif;
    color: #1c367c;
    font-weight: 500;
}

#menu {
    background-color: rgba(25, 25, 25, 0.98) !important;
    transition: top 275ms ease-in-out;
}

.loading-animation {
    width: fit-content;
    font-size: clamp(36px, 1.8vw, 45px);
    font-family: "Termina Test";
    letter-spacing: 1.75px;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffffff00;
    -webkit-text-stroke: 0.75px #fff;
    background: linear-gradient(
            90deg,
            #ffff 33%,
            hsl(0, 0%, 0%, 0) 0 67%,
            #ffff 0
        )
        100%/300% 100% no-repeat text;
    animation: loading 5s steps(20) infinite;
}

.loading-animation:before {
    content: "Processing...";
}

@keyframes loading {
    to {
        background-position: 0;
    }
}