body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: #783937FF;
}

a {
    text-decoration: none;
}


/* Setting padding to set same alighmnet for all the body children */

/* Header section container used as placeholder for log and navigation. For aligning I have used both flex and grid and stand css */
.header {
    grid-area: header;
    /* background-color: rgb(241, 173, 136) !important; */
    background-color: rgb(252, 118, 106, .9);
    border-bottom: 10px solid #FC766AFF;
    /* Using grid alight the logo and nav */
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: 'logo nav';
}

/*  Centering the logo using grid */
h1.logo {
    grid-area: logo;
    align-self: center;
}

/* Styling the link for the logo */
h1.logo a {
    padding-left: 30px;
    text-shadow: 1px 6px rgba(252, 118, 106, 0.336);
    text-transform: uppercase;
    color: #783937FF;

}

h1.logo a:hover {
    background-color: rgb(241, 173, 136);
}

/* Using flex to alight the a tag to rightside */
.nav {
    grid-area: nav;
    display: flex;
    justify-content: end;
}

/*  */
.nav a {
    align-self: center;
    margin: 10px;
    color: #FFF;
    font-size: large;
    padding: 10px;
    border-radius: 10px 10px 10px 10px;
}

/* useing :link CSS pseudo-class */
a:hover {
    background-color: #FC766AFF;
}



/* About me section sytle, I have used flex to layout for placeholder*/

.about_me {

    display: flex;
    flex-direction: column;
    justify-content: center;
    /* background: url(/assets/img/web.jpeg) no-repeat; */
    background-image: url(../img/mern-stack-wallpapers.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 700px;
    border-bottom: 10px solid rgba(252, 118, 106, 0.174);
}

.about_me div {
    /* border-radius: 140px 10px 140px 10px; */
    /* background-color: rgb(241, 172, 136, 0.7); */
    background-color: rgb(252, 118, 106, .9);
    max-width: 60%;
    align-self: center;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

img.rounded-circle {

    width: 150px !important;
    height: 150px !important;
    margin: 0 50px 20px 50px;

}

/* Styling for the contents on about us section */
.h2_header,
.blurb {
    justify-self: center;
    gap: 50px;
    line-height: 1.5rem;
    align-self: flex-start;
    padding: 15px 40px;
    margin: 0 50px;
    border-left: 10px solid rgb(241, 173, 136);
}

.h2_header {
    font-size: 2.3rem;
}

.blurb {
    font-size: 1rem;
    color: rgb(249, 249, 249)
}

/* styleing h2 for the main section and the contact section of the page padding and background*/
main h2,
section.contact h2 {
    padding-bottom: 7px;
    border-bottom: 5px solid #783937FF;
    margin: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

ul {
    display: flex !important;
    align-items: baseline;
}

/* Rewiriting some of Bootstrap rules to match my reviews templates: https://zakaria1986.github.io/portfolio/ */
ul a {
    position: absolute;
    align-self: end;
    bottom: 10px;
    padding: 10px;
    color: #FFF !important;
    background-color: #FC766AFF !important;
    border-color: #FC766AFF !important;

}

li:hover,
div ul a:hover {
    background-color: rgb(241, 173, 136, 1);
    color: #FFF;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    font-size: 1rem;
}

main section .h-100 {
    border-left: 3px solid #FC766AFF;

}

main section .card img {
    height: 200px !important;
}

/* Adding hover state to the card in profile section and the skill section */
div.card:hover {
    box-shadow: -5px -2px 21px 0px rgba(0, 0, 0, 0.75);
}


section.skills {
    background-image: url(../img/programming-web-banner-best-programming-languages-technology-process-software-development-programming-web-banner-159274390.jpeg);
    background-size: cover;
    background-repeat: no-repeat
}

/* Contact form below */
div.contact {
    /* background-color: rgba(252, 118, 106, 0.045); */
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
    margin: 50px 0;
    border-radius: 1vw;
    border-bottom: 10px solid rgba(252, 118, 106, 0.17);
    background-color: rgb(241, 173, 136, 0.1234);
    border-top: 10px solid #FC766AFF;
    opacity: .1;

}

/* About me and Contact form section starts here */

/* Setting background to the contact us section of the page */
div.form {
    background-color: rgb(241 173 136 / 12%);
}

div.aboutme {
    background-color: rgb(252 118 106 / 12%);
    color: #000;

}

section.contact {
    margin: 15px auto;
    border-radius: 1vw;
    /* border-bottom: 10px solid rgba(252, 118, 106, 0.17);
    background-color: rgb(241, 173, 136, 0.1234);
    padding: 15px;
    border-top: 10px solid #FC766AFF; */
}

form.row {
    width: 300px;
    margin: auto;
}

form.row h2 {
    margin-bottom: 30px;
}

form.row label {
    font-size: 1.4rem;
    margin: 5px 0;
}

/* Seeting height and width for form input boxes */
form.row label input {
    width: 300px;
    height: 30px;
    display: block;
    clear: both;

}

/* Making area with bit wider */
form.row label textarea {
    width: 300px;
}

/* Setting custom padding, submit button */
form button[type="submit"] {
    width: 80px;
    margin: auto;
    background-color: #FC766AFF;
    border: none;
    padding: 10px;
    color: #FFF;
    font-size: 16px;
}

form button[type="submit"]:hover {
    background-color: rgb(252, 118, 106, .9);
    /* rgb(241, 173, 136); */
}

/* Css for footer bolow */
/* Flex is used to align footer items to center */
.footer {
    background-color: rgb(252, 118, 106, .9);
    /* rgb(241, 173, 136) ; */
    border-radius: 4px 4px 1px 1px;
    border-top: 10px solid #FC766AFF;
    height: 100px;
}

.footer a {
    align-self: center;
    color: #FFF;
    padding-right: 20px;

}

.footer a:hover {
    box-shadow: -5px -2px 21px 0px rgba(0, 0, 0, 0.75);
}

/* Media query */

/* Rewrote bootstrap bottom border css to match my design, anything above 1400px would apply the following width fo the border  */
@media (min-width: 1400px) {
    .col-lg-4 {
        flex: 0 0 auto;
        width: 22.333333% !important;
    }
}

/* This will apply following css on screen less than 100px */
@media screen and (max-width: 1000px) {
    .about_me div {
        max-width: 84%;
    }

    .h2_header,
    .blurb {
        line-height: 1rem;
        align-self: flex-start;
        padding: 7px 6px;
        margin: 0 27px;
        border-left: 4px solid rgb(241, 173, 136);
    }

    .h2_header {
        font-size: 0.8rem;
    }

    .blurb {
        font-size: 0.6rem;
    }
}

/* Screen less than 400 would apply the follow design */
@media screen and (max-width: 400px) {
    .about_me {
        background-size: cover;
        background-size: 100% 100%;
        height: 400px;
        border-bottom: 10px solid rgba(252, 118, 106, 0.174);
    }


    .about_me div {
        max-width: 84%;
        height: 300px;
    }

    img.rounded-circle {
        width: 100px !important;
        height: 100px !important;
        margin-bottom: 20px !important;
    }

    .h2_header,
    .blurb {
        line-height: 1rem;
        align-self: flex-start;
        padding: 7px 6px;
        margin: 0 27px;
        border-left: 4px solid rgb(241, 173, 136);
    }

    .h2_header {
        font-size: 0.8rem;
    }

    .blurb {
        font-size: 0.6rem;
    }
}