body {
    --primary: #41250F;
    --secondary: #B45226;
    --accent: #F18132;
    background-color: rgb(from var(--primary) r g b / 75%);
    color: white;
    --pt: "PT Serif";
    --rubik: "Rubik Mono One";
    --raj: "Rajdhani";
    --right: "Righteous";
}
h1 {
    font-size: calc(2.375rem + 1.5vw); /* used to be `calc(1.375rem + 1.5vw)` */
}

header {
    box-shadow: 0px 4px 10px 0px rgb(from var(--primary) r g b / 50%);
    position: sticky;
    background-color: var(--primary);
    font-family: var(--raj);
}

header img {
    filter: drop-shadow(0 0 1px #ffffff);
}

/*.navbar-nav {
    --bs-navbar-active-color: var(--primary);
    --bs-nav-link-color: rgb(from var(--primary) r g b / 75%);
}*/

footer {
    background-color: var(--primary);

    img {
        max-height: 75px;
    }

    flex-wrap: wrap balance;
}

.bg_primary {
    background-color: var(--primary);
}

.bg_secondary {
    background-color: var(--secondary);
}

.bg_accent {
    background-color: var(--accent);
}

.navbar-nav .nav-link:hover {
    text-decoration: underline 1px solid;
}
.navbar-nav .nav-link.active {
    text-decoration: underline 6px solid;
}

.card-title {
    font-family: var(--rubik);
}
.card-text {
    font-family: var(--pt);
}

#hero_section {
    margin-bottom: 24px;
    min-height: 65vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

    h1 {
        font-family: var(--right);
    }
    .h2 {
        font-family: var(--raj);
    }
    p {
        font-family: var(--raj);
    }
}

.home_section {
    margin-bottom: 48px;
    h2 {
        font-family: var(--rubik);
    }
    p {
        font-family: var(--pt);
        font-size: ;
    }
}

.headshot {
    min-width: 256px;
    flex-grow: 1;
    flex-basis: 0;

    .card-title {
        font-family: var(--raj);
        font-size: 1.5rem;
        font-weight: 700;
    }
    .card-subtitle {
        font-family: var(--right);
        opacity: 0.8;
    }
}

.bullet_point {
    min-width: 175px;
    width: 1%;
}

h3 {
    font-family: var(--rubik);
}
h5 {
    font-family: var(--raj);
}

form label {
    font-family: var(--right);
}

form input[type=submit] {
    font-family: var(--raj);
}

