* {
  margin: 0%;
  padding: 0%;
  font-family: "Solway", serif;
}

nav {
  margin-left: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav img {
  width: 100px;
}

/* vere image ollond navil img kodukknm */
nav li {
  display: inline;
  margin-right: 20px;
}

/* nav nte ullil kodukknm... li centril varan flex koduthadath ,align items centre kodukknm.. */
nav a {
  color: black;
  text-decoration: none;
  font-size: 20px;
  font-weight: 100px;
}

/*  ethellam nav inte ullil koukknm bcz vere ond */

nav a:hover {
  color: red;
  text-decoration: underline;

}

/* a pseudo class is used to define a special state of an element eg;hover,mouseclick chyumbo ondavunna mattamngalkk karanm */

#home {

  margin: 100px 0px 0px 100px;
  margin-left: 100px;
  position: relative;
  height: 70vh;
}

/* top,right,left,bottom */
.homecontents h1 {
  font-family: "Edu NSW ACT Cursive", cursive;
  font-size: 40px;
  margin-bottom: 15px;
}

.homecontents {
  width: 30%;
  text-align: justify;
}

.homecontents a {
  text-decoration: none;
  background-color: black;
  padding: 8px;
  color: wheat;
  border-radius: 10px;
}

.homecontents p {

  margin-bottom: 30px;
}

.secondname {
  font-family: "Edu NSW ACT Cursive", cursive;
  color: goldenrod;

}

.home-images {

  width: 60%;
  height: 73vh;
  /*change frome % to vh */
  position: absolute;
  right: 0;
  top: -100px;
}

.img {
  position: absolute;
  height: 90%;
  left: 0%;
  top: 0%;
  transition: left 2s, top 5s;
}

/* parentinte ullil araikkanm positins okke kodukkndath */


.home-images:hover #shape {
  top: -50px;
}

#about {

  margin-left: 100px;
}

.main-head {


  text-align: center;
}

.sub-head {

  text-align: center;
  color: green;
  font-size: small;

}

.about-container {

  display: grid;
  grid-template-columns: auto auto;
  gap: 70px;
  align-items: center;
}

.about-image img {

  width: 80%;
}

.about-content p {

  text-align: justify;
  margin-bottom: 20px;
  width: 70%;
  font-size: large;
}

.about-content ul {

  list-style: none;
  font-size: large;
}

.about-content li {

  margin: 10px;
}

#skills {
  margin-left: 100px;
  margin-top: 100px;


}

.skill-container {

  display: grid;
  grid-template-columns: auto auto;

  gap: 100px;


}





.bars {

  display: flex;
  justify-content: space-between;
  position: relative;
}

.base-bar {

  background-color: black;
  height: 0.5rem;
  width: 100%;
  border-radius: 0.7rem;
  position: absolute;
  top: 30px;

}

.skill-chart {

  margin-bottom: 80px;
}

.html {

  background-color: orange;
  width: 89%;
  position: absolute;
}

.css {
  background-color: orange;
  width: 89%;
  position: absolute;

}

.js {


  background-color: orange;
  width: 89%;
  position: absolute;
}

.react {


  background-color: orange;
  width: 89%;
  position: absolute;
}

.contact-container {

  display: flex;
  justify-content: center;
  margin-top: 25PX;
  gap: 20px;

}


.contact-container i {
  font-size: 40px;
}

.icons {
  padding: 20px;
}

.icons a {
  color: black;
}

.icons:hover {

  background-image: linear-gradient(rgb(26, 26, 2), purple);
  border-radius: 50%;
  animation: rotate 4s;
}

@keyframes rotate {
  0% {
     transform: rotate(30deg);
    background-image: linear-gradient(to top beige, purple);

  }

  10% {transform: rotate(-30deg);
    background-image: linear-gradient(to top beige, purple);
  }

  15% {transform: rotate(30deg);
    background-image: linear-gradient(to top beige, purple);
  }

  20% {transform: rotate(-30deg);
    background-image: linear-gradient(to top beige, purple);
  }
}

footer p{

  text-align: center;font-weight: 600;margin-top: 70PX;
}
footer div{

  float: right;margin-right: 15PX;
}

html{

  scroll-behavior: smooth;
}
::-webkit-scrollbar{
  width: 10px;
}
::-webkit-scrollbar-track{
  background-color: black;
}
::-webkit-scrollbar-thumb{
background-color: rgb(182, 163, 59);
border-radius: 10px;

}