:root {
    --cyan: #00E5CC;
    --darkGrey: #1C1D21;
    --grey: #71757D;
    --white: #FFFFFF;
    --black: #000000;
    --fontFamily1: "Oswald", sans-serif;
    --fontFamily2: "OpenSans", sans-serif;
}
body {
    font-family: var(--fontFamily2);
}
.btn-primary {
    background-color: var(--darkGrey);
    border: none;
    border-radius: 0;
    color: var(--white) !important;
    font-family: var(--fontFamily1);
    font-weight: 500;
    text-transform: uppercase;
}
.btn-primary:hover {
    background-color: var(--darkGrey);
    color: var(--cyan) !important;
}
.footer {
    background-color: var(--darkGrey);
    color: var(--white) !important;
    font-family: var(--fontFamily1);
    font-weight: 500;
    text-transform: uppercase;
}
.footer a{
    color: var(--white) !important;
}
.footer a:hover {
    color: var(--cyan) !important;
}
h1 {
    font-family: var(--fontFamily1);
    font-size: 2.986em;
    font-weight: 800;
    text-transform: uppercase;
}
h2 {
    font-family: var(--fontFamily1);
    font-size: 2.488em;
    font-weight: 500;
    text-transform: uppercase;
}
h3 {
    font-family: var(--fontFamily1);
    font-size: 2.074em;
    font-weight: 400;
    text-transform: uppercase;
}
#heroBRacing {
    background-image: url(images/barrelracingphoto.jpg);
    background-position: 50% 30%;
    background-size: cover;
    padding: 1em 0 35em 0;
}
#heroHome {
    background-image: url(images/lessonprogramphoto.jpg);
    background-position: 50% 30%;
    background-size: cover;
    padding: 1em 0 35em 0;
}
#heroHome h1 {
    color: var(--white);
}
html {
  scroll-behavior: smooth;
}
.nav {
    font-family: var(--fontFamily1) !important;
    font-weight: 500;
    text-transform: uppercase;
}
.navbar {
    background-color: var(--cyan);
    padding: 0.5em 0;
}
.nav-link {
    border-radius: 0 !important;
    color: var(--darkGrey) !important;
}
.nav-link:hover {
    color: var(--white) !important;
}
.nav-link.active {
    color: var(--white) !important;
    background-color: var(--darkGrey) !important;
}
.nav-link.active:hover {
    color: var(--cyan) !important;
}
#schedule {
    background-color: #f5f5f5;
}