style.css

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    background-color: #111827;
    color: #ffffff;
}
/* ---header section--- */

/* ----nav section---- */

.navsection{
    display: flex;
    gap: 30px;
    margin: 45px;
}

/* ---Hamberger menu--- */

img[alt="hambrger"]{
    height: 30px;
    width: 30px;
    display: none;
}

/* ----navigation menu----*/

.list{
    display: flex;
    flex-direction: row;
    font-size: 28px;
    position: absolute;
    top: 30px;
    right: 27px;
    gap: 20px;
}
.list li{
    list-style: none;
    font-weight: 500;
    cursor: pointer;
}
.list li:first-child{
    background-color: rgb(79, 79, 209);
    border-radius: 20px;
    padding: 5px 10px;
}
/* ---main section--- */
.para{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    max-width: 100vw;
    margin: 30px;
    gap: 30px;
}

/* ---para1--- */
.para1{
    display: flex;
    flex-direction: row;
    gap: 10px;
    font-weight: 600;
    align-items: center;
}

/* ---Waving hand img --- */
.para1 img{
    /* width: 3vw; */
    height: 45px;
}

/*--- h1 size--- */
.para1 h1{
     font-size: 45px;
}
/* ---para2--- */
.para2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
/* ---para2 h1 size---- */
.para2 h1{
    font-size: 75px;
}
/* ---para2 h2 size and colour---- */
.para2 h2{
   font-size: 43px;
    color: rgb(197, 197, 89);
}
/* ----Pc image--- */
.pcimage img{
    width: 30vw;
}


/* ---Main section--- */

/* ---making underline on projects bottom--- */
.line{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ---Giving height,width and colour to bottom--- */
.horizontal-line{
    height: 10px;
    width: 160px;
    background-color: #0000ff;
    border-radius: 20px;
    margin-bottom: 10px;
}
.main{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 70px;
}

.main div h1 { 
    font-size: 50px;
    font-weight: bold;
}


/* ----project list----- */



/* ---all project images--- */

.project-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content:center;
    justify-items: center;
    row-gap: 10px;
    column-gap: 20px;

}

/* ---project image size--- */

.project-list img{
   width: 20vw;
}

/* ----project image text--- */

.project-list div span{
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    font-size: 20px;
    font-weight: 200;
}

/* --project--- */

.project{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;

}


    /* ----footer section---- */


/* ---horizontal line--- */
.horizontal-divider{
    height: 10px;
    width: 240px;
    background-color: #0000ff;
    border-radius: 20px;
    margin-bottom: 10px;
}
/* ---contact me--- */
.footer h1 { 
    margin-top: 50px;
    font-size: 50px;
    font-weight: bold;
}

/* -------social media------- */

.social-media img{
      width: 30px;
}

.social-media{
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
}


/*------- media query------ */

@media screen and (max-width:576px)  {
   .list li{
    display: none;
   } 
   img[alt="hambrger"]{
    display: block;
  }
  .para{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .para1{
    display: flex;
    flex-direction: column;
 }
 .para1 h1{
    font-size: 35px;
 }
 .para2{
    display: flex;
    flex-direction: column;
 
 }
 .para2 h1{
    font-size: 50px;
 }
 .para2 h2{
    font-size: 30px;
 } 
.pcimage img{
    width: 60vw;
}
.main h1{
    font-size: 30px;
}
.horizontal-line{
    height: 8px;
    width: 150px;
    background-color: #0000ff;
    border-radius: 20px;
    margin-bottom: 10px;
}
.project-list{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 20px;
    column-gap: 20px;
}
.project-list img{
    width: 50vw;
}
.footer h1{
    font-size: 30px;
}
.horizontal-divider{
    height: 8px;
    width: 150px;
    background-color: blue;
    border-radius: 20px;
    margin-bottom: 10px;
}
.project-list div span{
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    font-size: 15px;
    font-weight: 200;
}
.project{
    margin-top: 10px;
}
}