/* freeCodeCamp Web Responsive Certification.
- Project Name: Personal Portfolio Webpage
- GitHub Repository link: https://w3zeblamf.github.io/developer-portfolio/
***************************************** */


/** Set fonts (Google fonts)
***************************************** **/

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap");

/** Reset and Common Styles
***************************************** **/

/* The asterisk (*) is known as the CSS universal selectors. It can be used to select any and all types of elements in an HTML page. The asterisk can also be followed by a selector while using to select a child object. This selector is useful when we want to select all the elements on the page. */

* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    text-decoration: none;
    list-style-type: none;
    font-family: "Jost", sans-serif;
    font-weight: 400;
}

/* Color Variables */

:root {
    --primary-color: #2f243a;
    --secondary-color: #f2f3f7;
    --light-gray-color: #E7E7E7;
}


/* REM: Relative to font-size of the root element: Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property's initial value. This means that 1rem equals the font size of the html element (which for most browsers has a default value of 16px
 
 We are going to use 'rem' as the measurement unit. By default 1 ram = 16 pixels, because the font size of the HTML element  is equal to 16 pixels.
 
 To convert one ram into then pixels, we have to decrease the font size of the HTML element:

  - default document font size = 16px, 1rem = 16px, 100% = 16px

 - (100% / 16px) * 10 = 62.5%, 1rem =   10px, 62.5% = 10px

 */

 html {
     font-size: 62.5%;
     scroll-behavior: smooth;
     
 }

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}


.section-heading {
    font-size: 4rem;
    color: var(--secondary-color);
    padding: 0 4.5rem;
    background-color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5rem;
    margin-bottom: 14rem;
    box-shadow: 0.2rem 0.2rem 1rem #555;
    transform: skew(-10deg)
}

/* Scroll up Button */

.scroll-up-btn i {
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
    position: fixed;
    bottom: 1rem;
    right: 2rem;
    border-radius: 10%;
    color: var(--light-gray-color);
    background-color: rgb(47, 36, 58, .4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.5s;
    text-shadow: .5rem .5rem 1rem #777;
}

.scroll-up-btn i:hover {
    color: var(--light-gray-color);
    background-color: var(--primary-color);
    transition: background-color 0.5s;
}

/* End of Scroll up Button */

/** End of Reset and Common Styles
***************************************** **/

/** Navbar
***************************************** **/

.navbar {
width: 100%;
height: 7rem;
background-color: var(--primary-color);
position: sticky;
top: 0;
z-index: 300;
}

.navbar-link {
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--secondary-color);
    margin: 0 4rem;
    letter-spacing: 0.3rem;
    text-transform: uppercase;
    position: relative;
    transition: color 0.2s;
}

.navbar-link span {
    font-size: 2rem;
    font-weight: 500;
}

.navbar-link:hover {
    color: yellowgreen;
    
}

.navbar-link::before {
    content: "";
    width: 0;
    height: 0.2rem;
    background-color: yellowgreen;
    position: absolute;
    right: -15%;
    bottom: -0.3rem;
    transition: width 0.2s;
}

.navbar-link:hover::before {
    width: 120%;
    
}
/** End of Navbar
***************************************** **/

/** Section 1 (Welcome Section)
***************************************** **/

.section-1 {
    width: 100%;
    height: 100vh;
    background: linear-gradient(115deg, rgba(58,58,158,0.0), rgba(136,136,206,0.7)), url(https://w3zeblamf.github.io/developer-portfolio/images/developer-background-img.jpg) fixed center no-repeat;
    background-size: cover;
    flex-direction: column;
  
}

.section-1-heading {
    font-size: 6rem;
    font-weight: 700;
    color: var(--secondary-color);
    background-color: #2f243a;
    padding: 0 3rem;
    margin-bottom: 8rem;
    text-transform: uppercase;
    letter-spacing: 1rem;
    border-bottom: 0.3rem solid var(--secondary-color);
    text-shadow: 0.2rem 0.2rem 1rem #555;
    transform: skew(-10deg)
}


.person-name {
    font-size: 3rem;
    font-weight: 400;
    color: var(--secondary-color);
    background-color: #2f243a;
    margin: 5rem 0 10rem 0;
    padding: 0.5rem 3rem;
    letter-spacing: 0.3rem;
    transform: skew(-10deg)
}

.section-1-btn {
    font-size: 2rem;
    font-weight: 600;
    color: var(--secondary-color);
    background-color: var(--primary-color);
    border: 0.3rem solid #2f243a;
    border-radius: .3rem;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    transition: .3s;
   
}


.section-1-btn:hover {
    color: var(--primary-color);
    background-color: yellowgreen;
    border: 0.3rem solid  #2f243a;
    transition: .3s;
}

.section-1-btn:hover > i {
    margin-left: 1rem;
    transform: translateX(0.2rem);
}

.section-1-btn > i {
    transform: translateX(0);
    transition: transform 0.3s ease-out;
}

/** End of Section 1 (Welcome Section)
***************************************** **/


/** Section 2 (About)
***************************************** **/

.section-2 {
    width: 100%;
    height: 100%;
    padding: 14rem 0 10rem 0;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.progress-bars-wrapper {
    margin-top: -3rem;
    margin-bottom: 10rem;
}

.progress-bar {
    width: 60rem;
    height: 4rem;
    background-color: #ccc;
    margin: 1.5rem 0;
    border-radius: 0.3rem;
    box-shadow: 0.2rem 0.2rem 1rem #555;
    position: relative;
}

.progress-text {
    position: absolute;
    left: 1rem;
    font-size: 2rem;
    color: #fff;
    padding-top: .5rem 
}

.progress-text span {
    margin: 0.5rem;
    font-size: 1.8rem;
    font-weight: 700;
}

.progress-percent {
    width: 90%;
    height: 100%;
   background-color: #4866C0;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
    transition: width .5s .5s ease-in-out;
}


.progress-percent, .pp-1 {
    background-color: #F4470B;
    width: 70%;
}

#pp-2 {
    background-color: #2194F0;
    width: 60%;
}

#pp-3 {
    background-color: #DE9C25;
    width: 40%;
}

#pp-4 {
    background-color: #7952B3;
    width: 60%;
}

#pp-5 {
    background-color: #450135;
    width: 70%;

}

#pp-6 {
    background-color: #207196;
    width: 50%;

} 

/*  Services Section */

.services {
    width: 100%;
    height: 30vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}


.service {
    text-align: center;
}

.service:first-child, 
.service:last-child {
    align-self: flex-start;
}

.service i {
    font-size: 10rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
    text-shadow: 0.1rem 0.1rem 0.5rem #555;
}

.service h2 {
    font-size: 2rem;
    font-weight: 500;
    color: #fff;
    background-color: var(--primary-color);
    width: 25rem;
    letter-spacing: .3rem;
    transform: skew(-10deg);
    box-shadow: .2rem .2rem .5rem #555;
}

/*  End of Services Section */

/** End of Section 2 (About)
***************************************** **/


/** Section 3 (Projects)
***************************************** **/

.section-3 {
    width: 100%;
    height: 100%;
    padding: 10rem 0 10rem 0;
    background-color: var(--secondary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.projects-wrapper {
width: 80%;
flex-wrap: wrap;
}

.project {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1rem;
    background-color: #fff;
    box-shadow: 0.3rem 0.3rem 0.5rem #777;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.5s;
}

.project:hover {
    box-shadow: 1rem 1rem 1rem #777;
}

.project-text {
    text-align: center;
    letter-spacing: 0.1rem;
    position: absolute;
    top: -10rem;
    z-index: 10;
    transition: top 0.3s;
}

.project:hover .project-text {
    top: 5rem;
    transition: top .3s .3s;
}

.project-name {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: capitalize;
}

.project-technologies {
    font-size: 1.8rem;
    color: var(--primary-color);
}

.project-img {
    width: 40rem;
    transition: opacity 0.3s;
}

.project:hover .project-img {
    opacity: 0.2;
}

.project-link {
    font-size: 2rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.1rem;
    border: 0.3rem solid #2f243a;
    padding: 0 1rem;
    background-color: var(--primary-color);;
    position: absolute;
    bottom: -5rem;
    transition: bottom 0.3s;
}

.project:hover .project-link {
    bottom: 5rem;
    transition: bottom 0.3s 0.3s;
}

/** End of Section 3 (Projects)
***************************************** **/

/** Section 4 (Contact Me)
***************************************** **/

.section-4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 85vh;
    padding: 0 2rem;
    background: linear-gradient(115deg, rgba(58,58,158,0.3), rgba(136,136,206,0.7)), url(https://w3zeblamf.github.io/developer-portfolio/images/developer-background-img-2.jpg)
    fixed center no-repeat;
    background-size: cover;
}

.contact-section-header > h2 {
  font-size: 8rem;
    color: var(--secondary-color);
}


.contact-section-header > p {
    font-size: 4rem;
    font-weight: 400;
    font-style: italic;
    color: var(--secondary-color);
}


.social-media {
    margin-top: 10rem;
    margin-bottom: 5rem;
    padding: 1.2rem 0;
    
}

.social-media-link {
    margin: 0 2rem;
    display: inline-block;
    font-size: 2rem;
    color: var(--secondary-color);
    text-shadow: 0.2rem 0.2rem 1rem #777;
    font-weight: 700;
    transition: .3s;
    padding: 1rem;
    border-radius: .2rem;
}

.social-media-link:hover {
    color: yellowgreen;
    transition: .3s;
    transform: translateY(-8px);
}

.social-media-link i {
    font-size: 3.5rem;
    color: var(--secondary-color);
    margin-right: 1rem;
    transition: .3s;
    
}

.social-media-link:hover i {
    color: yellowgreen;
    transition: .3s;
}


/** End of Section 4 (Contact Me)
***************************************** **/


/** Section 5 (Footer)
***************************************** **/

.section-5 {
    width: 100%;
    height: 7vh;
    background-color: var(--primary-color);
    flex-direction: column;
}


.copyright {
    color: #aaa;
    font-size: 2.3rem;
    letter-spacing: 0.2rem;
    font-weight: 400;
    text-align: center;
}
/** End of Section 5 (Footer)
***************************************** **/


/* --Responsive ( CSS Media Queries )--
***************************************** **/

@media(max-width:1200px) {
    
    .navbar-link {
        font-size: 2.5rem;
        
    }
    
    .navbar-link span {
    font-size: 2rem;
    
}

    .navbar-link:hover::before {
    width: 0%;
    
}
    
.section-heading {
        font-size: 3.5rem;
    }
    
    .section-1-heading {
        font-size: 4.5rem;
    }
    
    .person-name {
        margin-top: 0;
        margin-bottom: 7rem;
    }
    
    .services {
        height: auto;
        flex-wrap: wrap;
    }
    
    .service {
        margin: 3rem 2rem;
    }
    
    
.contact-section-header > h2 {
    font-size: 5rem; 
    
}
    
.contact-section-header > p {
    font-size: 3rem;    
    margin-top: 1rem;
    
    }
    
    .social-media-link {
        padding: .5rem 0;
    }
}



@media (max-width:800px) {
    
   
    .section-1-heading {
        font-size: 3rem;
    }
    
    .person-name {
        font-size: 2.5rem;
        margin-top: 0;
        margin-bottom: 5rem;
    }
    
    .section-1-btn {
        font-size: 1.5rem;
    }
    
     .navbar-link i {
    visibility:hidden;
    
}
    
    .progress-bar {
        width: 50rem;
    }
	
    .copyright {
        font-size: 2rem;
    }
    
    
  .contact-section-header > h2 {
    font-size: 4.5rem;
    margin-top: 2rem;
  }
    
    .social-media {
        margin-top: 5rem;
        
    }

    .social-media-link {
        font-size: 1.8rem
    }
}



@media (max-width:600px){

    
    .navbar-link span {
    font-size: 1.5rem;
    
}
    .navbar-link {
        margin: 0 2rem;
    }
    
    .section-2 {
        padding: 10rem;
    }
    
    
    .section-2-heading {
        margin-bottom: 10rem;
    }
    
    .progress-bar {
        width: 45rem;
    }
    
    .project-img {
        width: 100%;
    }
    
    .copyright {
        font-size: 1.7rem;
    }
    
}


@media (max-width:500px){

    
    html {
        font-size: 55%;
    }
}


@media (max-width:450px){

    html {
    font-size: 45%;
}
    
    .section-1-heading {
        font-size: 2.5rem;
    }
    
    .navbar-link {
        margin: 0 1.5rem;
    }
    
    .section-2-heading {
        text-align: center;
    } 
    
    .progress-bar {
        width: 40rem;
    }
}

/* -- End of Responsive ( CSS Media Queries )--
********************************************* **/