@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@400;500;600;700&family=Raleway:wght@400;500;600&display=swap');

html, body {
    scroll-snap-type: y mandatory;
    height: 100%;
    scrollbar-color: var(--red) transparent;
}

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

@font-face {
    font-family: 'Futura';
    src: url('/fonts/Futura-Std-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --off-white: #fffcfa;
    --red: #eb0307;
    --yellow: #ffad2d;
    --dark-red: #931618;
    --black: #211919;
    --font-heading-family: 'Frogie', sans-serif;
    --font-heading-size: 1.3rem;
    --font-heading-weight: 400;
    --font-subheading-family: 'Futura', sans-serif;
    --font-subheading-size: 1.2rem;
    --font-subheading-weight: 500;
    --font-body-family: 'Poppins', sans-serif;
    --font-body-size: 0.9rem;
    --font-body-weight: 400;
}

/* Headings */
.heading {
    font-family: var(--font-heading-family);
    font-size: var(--font-heading-size);
    font-weight: var(--font-heading-weight);
}

.subheading {
    font-family: var(--font-subheading-family);
    font-size: var(--font-subheading-size);
    font-weight: var(--font-subheading-weight);
}

.body-text {
    font-family: var(--font-body-family);
    font-size: var(--font-body-size);
    font-weight: var(--font-body-weight);
}

/* Colors */
.text-off-white {
    color: var(--off-white);
}

.text-black {
    color: var(--black);
}

.text-red {
    color: var(--red);
}

.text-dark-red {
    color: var(--dark-red);
}

.text-yellow {
    color: var(--yellow);
}

.bg-off-white {
    background-color: var(--off-white);
}

.bg-red {
    background-color: var(--red);
}

.bg-dark-red {
    background-color: var(--dark-red);
}

.bg-yellow {
    background-color: var(--yellow);
}

.bg-yellow-outline {
    border: solid 2px var(--yellow);
    background-color: transparent;
}

.ff-section,
.bs-section,
.branches-section,
#home,
#promos {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

#promos {
    scroll-margin-top: 120px;
}


@media (max-width: 959px) {
    #branches {
        scroll-margin-top: 70px;
    }
}

.text-outline-red {
    text-shadow: -2px -2px 0 var(--red), 2px -2px 0 var(--red), -2px 2px 0 var(--red), 2px 2px 0 var(--red), -2px 0px 0 var(--red), 2px 0px 0 var(--red), 0px -2px 0 var(--red), 0px 2px 0 var(--red), -1px -2px 0 var(--red), 1px -2px 0 var(--red), -1px 2px 0 var(--red), 1px 2px 0 var(--red), -2px -1px 0 var(--red), 2px -1px 0 var(--red), -2px 1px 0 var(--red), 2px 1px 0 var(--red);
}

.text-outline-yellow {
    text-shadow: -2px -2px 0 var(--yellow), 2px -2px 0 var(--yellow), -2px 2px 0 var(--yellow), 2px 2px 0 var(--yellow), -2px 0px 0 var(--yellow), 2px 0px 0 var(--yellow), 0px -2px 0 var(--yellow), 0px 2px 0 var(--yellow), -1px -2px 0 var(--yellow), 1px -2px 0 var(--yellow), -1px 2px 0 var(--yellow), 1px 2px 0 var(--yellow), -2px -1px 0 var(--yellow), 2px -1px 0 var(--yellow), -2px 1px 0 var(--yellow), 2px 1px 0 var(--yellow);
}

.text-outline-white {
    text-shadow: -2px -2px 0 var(--off-white), 2px -2px 0 var(--off-white), -2px 2px 0 var(--off-white), 2px 2px 0 var(--off-white), -2px 0px 0 var(--off-white), 2px 0px 0 var(--off-white), 0px -2px 0 var(--off-white), 0px 2px 0 var(--off-white), -1px -2px 0 var(--off-white), 1px -2px 0 var(--off-white), -1px 2px 0 var(--off-white), 1px 2px 0 var(--off-white), -2px -1px 0 var(--off-white), 2px -1px 0 var(--off-white), -2px 1px 0 var(--off-white), 2px 1px 0 var(--off-white);
}

.text-outline-white-xl {
    text-shadow:
    /* 4px ring */
    -4px 0px 0 var(--off-white), 4px 0px 0 var(--off-white), 0px -4px 0 var(--off-white), 0px 4px 0 var(--off-white), -4px -4px 0 var(--off-white), 4px -4px 0 var(--off-white), -4px 4px 0 var(--off-white), 4px 4px 0 var(--off-white), -4px -3px 0 var(--off-white), 4px -3px 0 var(--off-white), -4px 3px 0 var(--off-white), 4px 3px 0 var(--off-white), -4px -2px 0 var(--off-white), 4px -2px 0 var(--off-white), -4px 2px 0 var(--off-white), 4px 2px 0 var(--off-white), -4px -1px 0 var(--off-white), 4px -1px 0 var(--off-white), -4px 1px 0 var(--off-white), 4px 1px 0 var(--off-white), -3px -4px 0 var(--off-white), 3px -4px 0 var(--off-white), -3px 4px 0 var(--off-white), 3px 4px 0 var(--off-white), -2px -4px 0 var(--off-white), 2px -4px 0 var(--off-white), -2px 4px 0 var(--off-white), 2px 4px 0 var(--off-white), -1px -4px 0 var(--off-white), 1px -4px 0 var(--off-white), -1px 4px 0 var(--off-white), 1px 4px 0 var(--off-white),
    /* 3px ring */
    -3px 0px 0 var(--off-white), 3px 0px 0 var(--off-white), 0px -3px 0 var(--off-white), 0px 3px 0 var(--off-white), -3px -3px 0 var(--off-white), 3px -3px 0 var(--off-white), -3px 3px 0 var(--off-white), 3px 3px 0 var(--off-white), -3px -2px 0 var(--off-white), 3px -2px 0 var(--off-white), -3px 2px 0 var(--off-white), 3px 2px 0 var(--off-white), -3px -1px 0 var(--off-white), 3px -1px 0 var(--off-white), -3px 1px 0 var(--off-white), 3px 1px 0 var(--off-white), -2px -3px 0 var(--off-white), 2px -3px 0 var(--off-white), -2px 3px 0 var(--off-white), 2px 3px 0 var(--off-white), -1px -3px 0 var(--off-white), 1px -3px 0 var(--off-white), -1px 3px 0 var(--off-white), 1px 3px 0 var(--off-white),
    /* 2px ring */
    -2px -2px 0 var(--off-white), 2px -2px 0 var(--off-white), -2px 2px 0 var(--off-white), 2px 2px 0 var(--off-white), -2px 0px 0 var(--off-white), 2px 0px 0 var(--off-white), 0px -2px 0 var(--off-white), 0px 2px 0 var(--off-white), -1px -2px 0 var(--off-white), 1px -2px 0 var(--off-white), -1px 2px 0 var(--off-white), 1px 2px 0 var(--off-white), -2px -1px 0 var(--off-white), 2px -1px 0 var(--off-white), -2px 1px 0 var(--off-white), 2px 1px 0 var(--off-white);
}

.text-outline-red-xl {
    text-shadow:
    /* 4px ring */
    -4px 0px 0 var(--red), 4px 0px 0 var(--red), 0px -4px 0 var(--red), 0px 4px 0 var(--red), -4px -4px 0 var(--red), 4px -4px 0 var(--red), -4px 4px 0 var(--red), 4px 4px 0 var(--red), -4px -3px 0 var(--red), 4px -3px 0 var(--red), -4px 3px 0 var(--red), 4px 3px 0 var(--red), -4px -2px 0 var(--red), 4px -2px 0 var(--red), -4px 2px 0 var(--red), 4px 2px 0 var(--red), -4px -1px 0 var(--red), 4px -1px 0 var(--red), -4px 1px 0 var(--red), 4px 1px 0 var(--red), -3px -4px 0 var(--red), 3px -4px 0 var(--red), -3px 4px 0 var(--red), 3px 4px 0 var(--red), -2px -4px 0 var(--red), 2px -4px 0 var(--red), -2px 4px 0 var(--red), 2px 4px 0 var(--red), -1px -4px 0 var(--red), 1px -4px 0 var(--red), -1px 4px 0 var(--red), 1px 4px 0 var(--red),
    /* 3px ring */
    -3px 0px 0 var(--red), 3px 0px 0 var(--red), 0px -3px 0 var(--red), 0px 3px 0 var(--red), -3px -3px 0 var(--red), 3px -3px 0 var(--red), -3px 3px 0 var(--red), 3px 3px 0 var(--red), -3px -2px 0 var(--red), 3px -2px 0 var(--red), -3px 2px 0 var(--red), 3px 2px 0 var(--red), -3px -1px 0 var(--red), 3px -1px 0 var(--red), -3px 1px 0 var(--red), 3px 1px 0 var(--red), -2px -3px 0 var(--red), 2px -3px 0 var(--red), -2px 3px 0 var(--red), 2px 3px 0 var(--red), -1px -3px 0 var(--red), 1px -3px 0 var(--red), -1px 3px 0 var(--red), 1px 3px 0 var(--red),
    /* 2px ring */
    -2px -2px 0 var(--red), 2px -2px 0 var(--red), -2px 2px 0 var(--red), 2px 2px 0 var(--red), -2px 0px 0 var(--red), 2px 0px 0 var(--red), 0px -2px 0 var(--red), 0px 2px 0 var(--red), -1px -2px 0 var(--red), 1px -2px 0 var(--red), -1px 2px 0 var(--red), 1px 2px 0 var(--red), -2px -1px 0 var(--red), 2px -1px 0 var(--red), -2px 1px 0 var(--red), 2px 1px 0 var(--red);
}

.text-shadow-white {
    text-shadow: 4px 4px white;
}