:root{
    --navbar-color: #0F0F0F;
    --primary-color: #067c5e;
    --secondary-color: #003e81;
    --light-color-primary: #02150a;
    --padding-color:#242323;
    --footer-color: #0F0F0F;
    --highlight-color: rgba(15, 237, 93, 0.9);
}


*{  
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:'Alata', Geneva, Tahoma, sans-serif;
}

html{
    scroll-behavior: smooth;
}

body {
    background: var(--light-color-primary);
}

h3,h2,h1{
    margin-bottom: .5rem;
}

a{
    text-decoration: none;
}

p{
    padding: .4rem;
}

.main-nav{
    /* margin: 1rem; */
    padding: .7rem;
    background-color: var(--navbar-color); 
    font-size: large;   
}

.container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* color: #fff; */
}

.main-nav img{
    height: 100px;
    width: 100px;
}

.container ul{
    list-style: none;
    display: flex;
}

.container ul li{
    padding: .5rem;
    margin: .5rem;
    
}

.container ul li a{
    color: #fff;
    text-decoration: none;
}

.container ul li:hover a {
    color: var(--highlight-color)
}

/* end of navbar */

/* showcase main header */

.showcase{
    display: flex;
    height: 50vh;
    align-items: center;
    justify-content: center;
    background: url(../images/1486641506.svg) no-repeat center center/cover;
    position: relative;
    z-index: 2;
}

.showcase::after{
    content: '';
    background: rgba(19, 11, 20, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: .7;
}
.showcase .container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 2;
}

.showcase .container h2{
    color: rgba(15, 237, 93, 0.9);
}

/* Projects section */

.projects{
    padding: 1rem 2rem;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    background-color: var(--padding-color);
    gap: .3rem;
    position: relative;
}

#projects::before{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url('../images/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg') no-repeat center center/cover ;
    opacity: 0.6;
}

.projects > div {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    cursor: pointer;
}

.projects img {
    height: 100%;
    width: 100%;
}

/* setting the span to top left */

.projects div span{
    position: absolute;
    right: 0;
    top:0;
    padding: 1rem;
    background-color: var(--light-color-primary);
    color: #fff;
    border-radius: 5px;
    border-top-right-radius: 0;
}


.projects div .content{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all .5s ease-in;
    opacity: 0;
    font-size: large;
    line-height: 1.5;
}

.projects div .content a{
    text-decoration: none;
    transition: all .5s ease-in;
    /* color: var(--primary-color); */
}

.projects div:hover .content {
    /* display: inline-block; */
    opacity: 1;
    color: #fff;
}

.projects  div:hover{
    background-color: var(--primary-color);
}

/* Projects with are marked done */

.projects div .content .done{
    background-color: var(--primary-color);
}


/* utilty */
 .bg-primary{
    color: #fff;
    background-color: var(--light-color-primary);
 }

 .bg-dark{
    background-color: var(--padding-color);
    color: #fff;
 }

 .bg-footer{
    color: #fff;
    background-color: var(--footer-color);
 }

 /* btn primary */
.btn-primary{
    display: inline-block;
    padding: .5rem;
    margin: .5rem;
    border: 1px solid rgb(245, 240, 240);
    border-radius: 5px;
    cursor: pointer;
    background: var(--light-color-primary);
    color: #fff;
}

.btn-secondary{
    display: inline-block;
    padding: .5rem;
    margin: .5rem;
    border: 1px solid rgb(245, 240, 240);
    border-radius: 5px;
    cursor: pointer;
    background: var(--secondary-color);
    color: var(--highlight-color)
}

.btn-secondary:hover{
    background-color: var(--primary-color);
    color: #fff;
}


/* Progress Bar */
#progress {
    margin: 1rem 4rem ;
    display: flex;
    color: #fff;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* padding: 1rem; */
}

#progress::before{
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 1rem;
    border: #fff 2px solid;
    border-radius: 10px;
}

#progress .progress-bar{
    width: 0%;
    background-color: var(--highlight-color);
    height: 1rem;
    position: absolute;
    top:2px;
    border-radius: 10px;
    left: 0;
    transition: all .4s ease-in;
}

#progress .currentProg{
    margin-top: 2rem;
}



/* About me sections */

#about-me .container{
    display: flex;
    flex-direction: column;
    padding: 1rem;
    color: #fff;
    text-align: center;
    justify-content: space-between;
    position: relative;
}

#about-me .container::before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    background: url('../images/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg') no-repeat center center/cover;
    height: 100%;
    width: 100%;
    opacity: 0.6;
    z-index: -3;
}

#about-me .about-projects{
    width: 70%;
    margin: .5rem;
    padding: 1rem;
    border-radius: 10px;
}

#about-me .about-a{
    width: 70%;
    margin: .5rem;
    padding: 1rem;
    border-radius: 10px;
}

#about-me .container h3,h2{
    color: var(--highlight-color);
}






/* footer section */