:root{
    --bs-font-sans-serif:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --spotch-font-sans-serif-alt:"Montserrat","Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --spotch-blue: #182E54;
    --spotch-yellow: #FFE300;
    --spotch-yellow-light: #FBE24C;
    --spotch-brown: #AFA37A;
    --spotch-cream: #FFFEF5;
    --spotch-gray: #EAEAEA;
    --spotch-dark-gray: #555555;
}

html {
    scroll-behavior: smooth;
}

.shadow-spotch-card {
    -webkit-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
}

.rounded-xs {
    border-radius: .125rem !important;
}
.rounded-xs-top {
    border-radius: 0 !important;
    border-top-left-radius: .125rem !important;
    border-top-right-radius: .125rem !important;
}
.rounded-xs-end {
    border-radius: 0 !important;
    border-top-right-radius: .125rem !important;
    border-bottom-right-radius: .125rem !important;
}
.rounded-xs-bottom {
    border-radius: 0 !important;
    border-bottom-left-radius: .125rem !important;
    border-bottom-right-radius: .125rem !important;
}
.rounded-xs-start {
    border-radius: 0 !important;
    border-top-left-radius: .125rem !important;
    border-bottom-left-radius: .125rem !important;
}

.rounded-xl {
    border-radius: 1rem !important;
}
.rounded-xl-top {
    border-radius: 0 !important;
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}
.rounded-xl-end {
    border-radius: 0 !important;
    border-top-right-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}
.rounded-xl-bottom {
    border-radius: 0 !important;
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}
.rounded-xl-start {
    border-radius: 0 !important;
    border-top-left-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
}

.text-spotch-blue {
    color: var(--spotch-blue);
}
.text-spotch-yellow {
    color: var(--spotch-yellow);
}
.text-spotch-yellow-light {
    color: var(--spotch-yellow-light);
}
.text-spotch-brown {
    color: var(--spotch-brown);
}
.text-spotch-cream {
    color: var(--spotch-cream)
}
.text-spotch-gray {
    color: var(--spotch-gray);
}
.text-spotch-dark-gray {
    color: var(--spotch-dark-gray)
}

.bg-spotch-blue {
    background-color: var(--spotch-blue);
}
.bg-spotch-yellow {
    background-color: var(--spotch-yellow);
}
.bg-spotch-yellow-light {
    background-color: var(--spotch-yellow-light);
}
.bg-spotch-brown {
    background-color: var(--spotch-brown);
}
.bg-spotch-cream {
    background-color: var(--spotch-cream);
}
.bg-spotch-gray {
    background-color: var(--spotch-gray);
}
.bg-spotch-dark-gray {
    background-color: var(--spotch-dark-gray);
}

.link-warning-hover:hover {
    color: var(--bs-warning) !important;
}

.link-spotch-yellow-hover:hover {
    color: var(--spotch-yellow) !important;
}

.object-fit-cover {
    object-fit: cover;
}
.object-fit-contain {
    object-fit: contain;
}

.fw-medium {
    font-weight: 500;
}
.fw-semi-bold {
    font-weight: 600;
}

.btn-spotch-yellow-light {
    position: relative;
    border-radius: .125rem;
    z-index: 1;
    background-color: var(--spotch-yellow-light);
    color: var(--bs-dark);
    font-weight: 600;
}
.btn-spotch-yellow-light:hover,
.btn-spotch-yellow-light:focus {
    color: var(--spotch-yellow-light);
}
.btn-spotch-yellow-light::before {
    content: '';
    position: absolute;
    border-radius: .125rem;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: -1;
    background-color: var(--bs-dark);
    transition: transform 300ms ease-in-out;
    transform: scaleX(0);
    transform-origin: left;
}
.btn-spotch-yellow-light:hover::before,
.btn-spotch-yellow-light:focus::before {
    transform: scaleX(1);
}

.btn-outline-spotch-yellow-light {
    position: relative;
    border-radius: .125rem;
    z-index: 1;
    border-color: var(--spotch-yellow-light);
    color: var(--spotch-yellow-light);
    font-weight: 600;
}
.btn-outline-spotch-yellow-light:hover,
.btn-outline-spotch-yellow-light:focus {
    border-color: var(--spotch-yellow-light);
    color: var(--bs-dark);
}
.btn-outline-spotch-yellow-light::before {
    content: '';
    position: absolute;
    border-radius: .125rem;
    top: -.5px;
    left: -.5px;
    bottom: -.5px;
    right: -.5px;
    z-index: -1;
    background-color: var(--spotch-yellow-light);
    transition: transform 300ms ease-in-out;
    transform: scaleX(0);
    transform-origin: left;
}
.btn-outline-spotch-yellow-light:hover::before,
.btn-outline-spotch-yellow-light:focus::before {
    transform: scaleX(1);
}

.btn-spotch-dark {
    position: relative;
    border-radius: .125rem;
    z-index: 1;
    background-color: var(--bs-dark);
    color: var(--spotch-yellow-light);
    font-weight: 600;
}
.btn-spotch-dark:hover,
.btn-spotch-dark:focus {
    color: var(--bs-dark);
}
.btn-spotch-dark::before {
    content: '';
    position: absolute;
    border-radius: .125rem;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: -1;
    background-color: var(--spotch-yellow-light);
    transition: transform 300ms ease-in-out;
    transform: scaleX(0);
    transform-origin: left;
}
.btn-spotch-dark:hover::before,
.btn-spotch-dark:focus::before {
    transform: scaleX(1);
}

.btn-outline-spotch-dark {
    position: relative;
    border-radius: .125rem;
    z-index: 1;
    border-color: var(--bs-dark);
    color: var(--bs-dark);
    font-weight: 600;
}
.btn-outline-spotch-dark:hover,
.btn-outline-spotch-dark:focus {
    color: var(--spotch-yellow-light);
}
.btn-outline-spotch-dark::before {
    content: '';
    position: absolute;
    border-radius: .125rem;
    top: -.5px;
    left: -.5px;
    bottom: -.5px;
    right: -.5px;
    z-index: -1;
    background-color: var(--bs-dark);
    transition: transform 300ms ease-in-out;
    transform: scaleX(0);
    transform-origin: left;
}
.btn-outline-spotch-dark:hover::before,
.btn-outline-spotch-dark:focus::before {
    transform: scaleX(1);
}

.font-default {
    font-family: var(--bs-font-sans-serif);
}

.font-heading {
    font-family: var(--spotch-font-sans-serif-alt);
}

.footer-logo {
    -webkit-filter: brightness(0);
    filter: brightness(0);
}

.navbar-dark .nav-link {
    text-shadow: 0px 0px 16px black, 0px 0px 16px black;
}

.navbar-light .nav-link {
    text-shadow: 0px 0px 16px white, 0px 0px 16px white;
}