/* Base Styles */
body {
    font-family: Arial, sans-serif;
}

/* Color Scheme Variables (for reference)
Primary Dark: #2a3c30
Secondary: #647471  
Light: #f0ebe7
Border/Accent: #3B5444
Dark Gray: #414649
Text Dark: #414649
*/

/* Header Styles */
#heading {
    background-color: #2a3c30;
}

.email-link {
    color: #f0ebe7;
}

.email-link:hover {
    color: #647471;
}

/* Layout Utilities */
#ml {
    margin-left: 0%;
    padding-left: 0%;
}

#mr {
    margin-right: 0%;
    padding-right: 0%;
}

#img {
    width: 90%;
}

/* Section Backgrounds */
#lnk {
    color: #2a3c30;
    background-color: #f0ebe7;
}

#project {
    color: #f0ebe7;
    background-color: #647471;
}

#ln {
    color: #2a3c30;
    background-color: #f0ebe7;
}

#nav {
    color: #f0ebe7;
    background-color: #647471;
}

#nava {
    background-color: #f0ebe7;
    color: #647471;
}

#btn {
    color: #f0ebe7;
    background-color: #2a3c30;
}

#blurb {
    color: #f0ebe7;
    background-color: #647471;
}

#blurb2 {
    color: #414649;
    background-color: #f0ebe7;
    border: 2px solid #3B5444;
    padding: 20px;
    border-radius: 10px;
}

#blurt {
    color: #f0ebe7;
    background-color: #3B5444;
}

#textlight {
    color: #647471;
}

#highlights {
    color: #f0ebe7;
    background-color: #414649;
}

#items {
    text-align: center;
    color: #f0ebe7;
    background-color: #414649;
}

#contact {
    background-color: #f0ebe7;
}

#card {
    margin-left: 16px;
    margin-top: 16px;
}

#csLand {
    background-color: #2a3c30;
    text-align: center;
    color: #f0ebe7;
}

#CSbutton {
    background-color: #414649;
    text-align: center;
    color: #f0ebe7;
}

#navbar {
    color: #f0ebe7;
    background-color: #414649;
}

/* Card Styles */
.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.3s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    color: #f0ebe7;
    background-color: #647471;
}

/* Link Styles */
a.text-decoration-none:hover {
    text-decoration: none !important;
}

/* Carousel Styles */
.carousel-item img {
    max-height: 100%;
    object-fit: cover;
    width: 100%;
}