:root {
    --golden: #fde38e;
    --green: #8BD4A0;
    --salmon: #E44F59;
    --white:  #cccccc;
    --grey: rgb(35, 38, 46);

    --ff-header: "Satisfy", cursive;
    --ff-title: "Mulish", sans-serif;
    --ff-body: "Cabin", sans-serif;
}   

/* GENERAL */
body {
    background-color: rgba(0, 0, 0, 0.75); 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    font-family: var(--ff-body);
}

.bkg-tribune {
        background-image: url(/img/tribune.jpg);
}
.bkg-western {
        background-image: url(/img/western.jpg);
}

/* HEADER */
#header-title {
    background-color: rgba(0, 0, 0, 0.75);
    border-radius: .3rem;
    color: var(--golden);
    font-family: var(--ff-header);
    font-size: 2.3rem;
    margin: 0px;
    padding: 1rem;
}

/* NAVBAR */
#brand-link {
    color: var(--white);
    font-size: 1rem;
    font-family: var(--ff-title);
}

.nav-link {
    font-size: 1rem;
    font-family: var(--ff-title);
}

#main-links a {
    color: var(--golden);
}

#main-links a:hover {
    color: var(--white);
}

#social-links a {
    color: var(--white);
}

#social-links a:hover {
    color: var(--golden);
}

/* PAGE CONTENT */
#page-content {
    display: grid;
    place-items: center;
}

.page-body {
    color: var(--white);
    margin: 3rem 0 4.5rem;
}

.page-title {
    color: var(--golden);
    font-family: var(--ff-title);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.section-link {
    text-decoration: none;
    color: var(--golden);
}

.section-link:hover {
    text-decoration: underline;
    color: var(--white);
}

/* PROJECTS */
.card {
    background-color: var(--grey);
    font-family: var(--ff-title);
    max-width: 20rem;
}

.card a {
    color: var(--golden);
    text-decoration: none;
}

.card a:hover {
    color: var(--white);
}

.card h5:hover {
    text-decoration: underline;
}

.card-text {
    color: var(--white);
}

li span.badge.card-tag {
     border: 1px solid var(--green);
     background-color: var(--grey);
     color: var(--white);
}