body {
  font-family: 'Montserrat', sans-serif;
  margin: 0; 
  text-align: center;
}

html {
  scroll-behavior: smooth;
}

/*Nav bar section*/
    nav {
        background-color:#34d399; 
        padding: 10px 100px;
        display: flex;
        justify-content:space-between;
        align-items: center;
    }

    nav ul {
        display: flex;
        gap: 30px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    nav img {
        width: auto; 
        height: 36px;
        object-fit: contain;
    }


    nav li a {
        color: white;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-bottom: 2px solid transparent; 
        padding-bottom: 3px;
        transition: border-bottom-color 0.3s ease;
    }

    /*Underline effect*/
    nav li a:hover {
        border-bottom-color: white;  
    }
/*End of nav bar section*/

/*Welcome section*/
    .welcome {
        background-image: url('assets/backgroundtech.jpg');
        background-size: cover;
        background-position: center;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .typingclass{
        display: inline-block;
    }

    .typing {
        font-size: 60px;
        color: white;
        white-space: nowrap;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        border-right: 5px solid white; /*cursor*/
        animation: 
            typing 2s steps(49),
            cursor .4s step-end infinite alternate;
    }

    /*typing effect*/
    @keyframes typing {
        from { width: 0; }
    }

    /*blinking cursor*/
    @keyframes cursor {
        50% {  border-color: transparent; }
    }
/*End of Welcome section*/

/*About me section*/
    .me {
        display: flex; 
        align-items: center; 
        gap: 40px; 
        padding: 85px 100px;
        background-color: #111827;
    }

    .me img {
        width: 300px;
        height: 300px; 
        border-radius: 50%; 
        object-fit: cover; 
        display: block;
        margin-left: 40px; 
    }

    .me h1 {
        color:white;
        font-weight: bold; 
        font-size: 67px;
        text-align: left;
        margin: 0 0 10px 0;
        border-bottom: 5px solid #f64c72;
        width: 300px;
        padding-bottom: 5px; 
        white-space: nowrap;
    }

    .me p {
        color:white;
        font-size: 24px;
        text-align: justify;
        line-height: 1.7;
        margin: 10px 0; 
    }
/*End of About me section*/

/*Projects section*/
    
    .projects {
        display: flex;
        flex-direction: column; /*the boxes for the projects would stack vertically*/
        gap: 30px;
        align-items: center;
        padding: 40px;
    }

    .projects h1 {
        color:#111827;
        font-size: 67px;
        font-weight: 800;
        text-align: center;
        margin: 0 auto 10px auto;
        border-bottom: 5px solid #f64c72;
        width: 300px;
        white-space: nowrap;
    }

    /*Make a box for project*/
    .projectinfo {
        display: flex; /*aligning the image and the text horizontally*/
        border: 4px solid #111827;
        gap: 20px; 
        border-radius: 20px;
        padding: 40px;
        text-align: center;
        width: 1000px;
        height: auto;
    }

    .projectinfo img {
        width: 400px;
        height: auto;
        border-radius: 12px;
    }

    .projecttext h3 {
        color: #111827;
        font-size: 28px;
        font-weight: 800;
        text-align: left;
        margin-left: 40px; 
    }

    .projecttext p {
        color: #111827;
        font-size: 18px;
        text-align: left;
        line-height: 1.7;
        margin-left: 40px; 
    }

    .projecttext a {
        text-align: left;  
    }

    .githublink {
        display:flex;
        align-items: center;
        padding-left: 40px;
        gap: 15px;
        font-weight: 600;
        text-decoration: none;
        color: #111827;
    }

    .githublink img {
    width: 33px;
    height: 33px;
    }

    .githublink:hover {
    opacity: 0.7;
    }
/*End of Projects section*/

/*Skills section*/
    .skills {
        display: flex; 
        flex-direction: column;
        align-items: center;
        gap: 40px; 
        padding: 85px 100px;
        background-color: #111827;
    }

    .skills h1 {
        color:white;
        font-size: 67px;
        font-weight: 800;
        text-align: center;
        margin: 0 auto 10px auto;
        border-bottom: 5px solid #f64c72;
        width: 200px;
        white-space: nowrap;
    }

    .skillcontainer {
        display: flex;
        gap: 35px; 
    }
    .skillcontainer img {
        width: 80px; 
        height: 80px;
        object-fit: contain;
    }

    .skillinfo {
        color:white;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        transition: transform 0.25s ease-in-out;
    }

    .skillinfo:hover {
    transform: scale(1.08);
    }
/*End of Skills section*/    

/*Contact section*/
    .contact {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
        padding: 40px;
    }

    .contact h1 {
        color:#111827;
        font-size: 67px;
        font-weight: 800;
        text-align: center;
        margin: 0 auto 10px auto;
        border-bottom: 5px solid #f64c72;
        width: 425px;
        white-space: nowrap;
    }

    .contact p {
        color: #111827;
        font-size: 20px;
        text-align: center;
        line-height: 1.7;
        margin-left: 40px; 
    }

    .contactainer {
        display: flex;
    }
/*End of contact section*/