body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

.navbar {
    /* background: #5D4037; */
    background: rgba(97, 48, 59, 0.7);
    /* background: #2E151B; */
    width: 100%;
    padding: 0;
    margin: 0;
    position: fixed;
    /* background: rgba(0, 0, 0, 0.5); */
}
.nav-link {
    font-size: 1rem;
    margin-right: .5rem;
    color: white!important;
}
.nav-link:hover,
.nav-link.active {
    color:  #f3b14d!important;
}

.my-icon {
    color: #f3b14d!important;
}

#home {
    background: linear-gradient(to right, rgba(97, 48, 59), rgba(25, 57, 84));
    font-style: italic;
    height: 100vh;
}


.home {
    background: url(./img/pexels-danny-meneses-943096.jpg) no-repeat center;
    background-size: cover;
    min-height: 20rem;
    margin-top: 0;
}

.my-img {
    margin-top: -100px;
    height: 10rem;
}

.name {
    font-size: 3rem;
    color:  #f3b14d!important;

}
.full-stack {
    font-size: 1.5rem;
    color: white;
}
.contact-btn {
    font-family: 'Courier New', Courier, monospace!important;
    background: #f3b14d;
    color: #5D4037;
}
.contact-btn:hover {
    background: #5D4037;
    color: #f3b14d;
}



#about {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.05rem;
}
.underline {
    text-decoration: underline;
    color: #f3b14d;
}
.about-img {
    height: 20rem;
}

#projects {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background: #f3b14d;
}
.my-work {
    font-size: 3rem;
    color: white;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;;
}
.my-work-img {
    height: 15rem;
}

.work-card:hover {
    background: #5D4037;
    cursor: pointer;
}

a {
    text-decoration: none;
    color: white;
}
a:hover {
    color: #5D4037;
}
.view-code-btn {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background: #5D4037;
    color: white;
}
.view-code-btn:hover {
    background: white;
    color: #5D4037;
}

#skills {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.my-skills {
    font-size: 3rem;
    color: #f3b14d;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;;
}
#contact {
    background: rgb(240, 236, 236);
}
.my-contact {
    color: black;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
}

@media(max-width: 768px) {
    .my-img {
        height: 8rem;
        margin-top: -60px;
    }
    .about-img {
        height: 15rem;
        width: 15rem;
        margin-top: 2rem;
    }
    .my-work {
        font-size: 2rem;
    }
    .my-work-img {
        height: 10rem;
    }
    .e-commerce {
        font-size: 1rem;
    }
    .view-code-btn {
        font-size: .5rem;
    }
    .my-skills {
        font-size: 2rem;
    }
}
@media(max-width: 576px) {

    .my-img {
        height: 6rem;
        width: 6rem!important;
    }
    .name {
        font-size: 2rem;
    }
    .full-stack {
        font-size: 1rem;
    }
    .welcome-to {
        font-size: .8rem;
    }
    .my-work-img {
        height: 5rem;
        width: 5rem!important;
    }
    .linkedin-img {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .html-css-js {
        margin-bottom: 1rem;
    }
    .mongo {
        margin-top: 1rem;
    }
}