@font-face {
    font-family: 'MyCustomFont';
    src: url('../fonts/classy.ttf') format('truetype');
}



body {
    background-color: #ffffff;
    padding: 40px 0;
    /* Adds white space at the very top and bottom */
}

/* 2. The "Paper" (Your Portfolio Content) */
.portfolio-canvas {
    background-color: #f0e6da;
    /* Your Linen color */
    border-radius: 15px;
    /* Softens the edges */
    padding: 60px;
    /* Spacing inside the colored area */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    /* Makes it look professional */
    margin-bottom: 50px;
}

/* 3. The Contact Section (Your darker green) */
.contact-footer {
    background-color: #4c3d19;
    /* Using your Moss Green */
    border-radius: 0 0 15px 15px;
    /* Rounds only the bottom corners */
    color: white;
    padding: 40px;
}

.contact-name {
    padding-left: 150px;
}

.custom-nav {
    background-color: #4c3d19;
    /* Your Moss Green */
}

/* This changes the color of the links (Home, About, etc.) */
.custom-nav .nav-link,
.custom-nav .navbar-brand {
    color: whitesmoke !important;
    /* Your Tan color for text */
}

/* This changes the link color when you hover over it */
.custom-nav .nav-link:hover {
    color: #77962e !important;
    /* Your new Orange color for hover */
}

/* This handles the background bleed */
.hero-section-bg {
    background-color: #f0e6da;
    /* Your tan color */
    /* This makes the color span the whole screen width */
    box-shadow: 0 0 0 100vmax #f0e6da;
    clip-path: inset(0 -100vmax);

    /* Add some vertical padding so the text isn't touching the edges of the color */
    padding-top: 80px;
    padding-bottom: 80px;
}

/* This handles only the text style */
.hero-title {
    color: #4f6815;
    font-family: 'MyCustomFont', sans-serif;
    margin: 0;
    /* Keeps it tight */
}

/* This makes the colored bar only as wide as your hero content */
.custom-nav {
    background-color: #4c3d19 !important;
    /* Or your preferred color */
    padding: 15px 30px;
    /* Gives the bar some height and side padding */
    margin-top: 20px;
    /* Optional: adds space above the bar so it floats */
}

/* Ensure the text is visible on the new background */
.custom-nav .contact-name,
.custom-nav .nav-link {
    color: whitesmoke !important;
}

/* In your bootstrap.css file */
.bg-custom-portfolio {
    background-color: #3b2a22; /* Replace this with your specific hex code */
    padding-top: 3rem;         /* Adds space at the top */
    padding-bottom: 3rem;      /* Adds space at the bottom */
}




.about-title {
    font-family: 'MyHeadingFont'!important;
    font-size: 50px;
    color: white;
    margin-top: 25px
}


@font-face {
    font-family: 'MyHeadingFont';
    src: url('../fonts/sakire.ttf');
}

@font-face {
    font-family: 'MyParagraphFont';
    src: url('../fonts/applegaramond-light.ttf');
}

@font-face {
    font-family: 'MyProgressFont';
    src: url('../fonts/applegaramond.ttf');
}

@font-face {
    font-family: 'MyCardFont';
    src: url('../fonts/applegaramond-bold.ttf');
}

.custom-bio {
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.7;
    font-family: 'MyParagraphFont' !important;
    font-size: 25px;
    color: whitesmoke;
    padding-top: 70px;
    padding-bottom: 70px;
}

.section-about {
    background-color: #4c3d19;
        border-radius: 30px;
}

.section-skills {background-color: #384024;
 border-radius: 30px;}

.section-projects {background-color: #889063;
 border-radius: 30px;}




.illustrator-bar {
    background-color: #76845B;
}

.premiere-bar {
    background-color: #d8cc6e;
}

.html-bar {
    background-color: #603314;
}

.java-bar {
    background-color: #acc2db;
}

.progress-font {
    font-family: 'MyProgressFont';
    font-size: 20px;
    color: whitesmoke;
}



.card-title {
    font-family: 'MyCardFont';
    text-align: center;
    font-size: 30px;
}



.click-button {
    background-color: #4A543A;
    border: none;
    transition: background-color 0.3 ease;
}
.click-button:hover {
    background-color: #a9b890; /* A lighter shade for the hover state */
    cursor: pointer; /* Ensures the "hand" icon appears */}


.card-text {
    font-family: 'MyParagraphFont';
    font-size: 18px;
}

.contact-card {
    background-color: #616e4c;
    /* Your dark moss green */
    border-radius: 20px;
    /* Match the rounded corners of your other sections */
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Optional: Make the input fields look nicer against the green */
.contact-card .form-control {
    border: none;
    background-color: #f8f9fa;
}

.contact-me {
    font-family: 'MyHeadingFont';
}

.contact-name {
    font-family: 'MyCustomFont';
}

.portfolio-section {
    background-color: #3b2a22;
}

.nav-list {
    font-family: 'MyCustomFont';
}

 .message-button:hover {
    background-color: #a9b890;
 }