*{
  margin: 0;
  padding: 0;
}

.sec-title{
  text-align: center;
  padding-top: 30px;
  font-family: "Jersey 10", sans-serif;
  font-size: 3rem;
}


/* header */

.header-img{
  background-image:     url(../img/firstview.jpg);
  height: 800px;
  background-size: cover;
  background-position: center;
}

header h1{
  padding-top: 300px;
  text-align: center;
  font-size: 150px;
  font-family: "Jersey 10", sans-serif;
}

.blue{
  color: #4169e1;
}

nav ul li a{
  font-family: "Jersey 10", sans-serif;
  font-size: 2rem;
}

@media screen and (max-width:500px) {
  header h1{
    font-size: 120px;
  }

  .nav{
    max-width: 425px;
  }
}


/* about */

#about{
  max-width: 1200px;
  margin: 120px auto 0;
}

.about-wrapper{
  display: flex;
  margin-top: 60px;
}

.about-img{
  text-align: center;
  width: 600px;
  height: 400px;
  border-radius: 50%;
}

.about-text{
  padding-left: 20px;
}

.about-greeting{
  
}

.about-subtitle{
  color: #1e90ff;
}

.about-desc{
  padding-top: 20px;
}

.about-career{

}

.career-list{
  list-style: none;
  padding-left: 0;
  padding-top: 20px;
}

.career-item{

}

@media screen and (max-width: 500px) {
  .about-img{
    width: 100%;
    height: auto;

  }

  .about-wrapper{
    display: block;
  }
}


/* skills */

#skills{
  max-width: 1200px;
  margin: 60px auto 0;
}

.skill-wrapper{
  margin-top: 30px;
}

.skill-list{
  list-style: none;
  display: flex;
}

.skill-img{
  text-align: center;
  height: 180px;
}

.skill-desc{

}

.skill-name{
  text-align: center;
}

@media screen and (max-width: 500px) {
  .skill-list{
    display: block;
    justify-content: center;
    margin: 0 20px;
  }
}

/* works */

#works{
  max-width: 1200px;
  margin: 60px auto 0;
}

.works-wrapper{
  display: flex;
  gap: 30px;
  margin: 50px 20px 0;
  height: 300px;
}

.works-img{
  width: 50%;
}

.works-img img{
  width: 100%;
  object-fit: contain;
}

.works-container{
  width: 50%;
}

.works-list{
  list-style: none;
  margin-top: 30px;
}

.works-item{

}

.works-desc{
  padding-left: 2rem;
}

.works-link{
  text-align: center;
}

@media screen and (max-width: 500px) {
  .works-wrapper{
    display: block;
    text-align: center;
  
  }

  .works-img{
    width: 100%;
    padding-top: 30px;
  }

  .works-container{
    width: 100%;
    padding-bottom: 20px;
  }

  .works-list{
    margin-top: 20px;
    padding: 0;
  }

  .works-desc{
    padding: 0;
    margin-bottom: 40px;
  }
}


/* contact */

#contact{

}

.contact-text{
  text-align: center;
}

.contact-message{

}

.contact-mail{
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 30px;
}

@media screen and (max-width: 500px) {
  #contact{
    margin-top: 150px;
  }
}


/* footer */

footer{
  background: #ccc;
  text-align: center;
}

.footer-list{
  padding-top: 30px;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 0 16px;
}

.footer-item{

}

.footer-item a{
  text-decoration: none;
  color: black;
}

.copyright{
  margin: 0;
  padding-bottom: 10px;
}