* {
  box-sizing: border-box;
}


body {
  margin: 0;

  background: #ffffff;
  color: #222222;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 14px;
  line-height: 1.6;
}


a {
  color: #1673d1;
  text-decoration: none;
}


a:hover {
  text-decoration: underline;
}


.container {
  width: 900px;
  max-width: calc(100% - 40px);

  margin: 0 auto;
  padding: 25px 0 50px;
}



/* -----------------------
   HEADER
----------------------- */

.page-header {
  text-align: center;

  margin-bottom: 30px;
}


.page-header h1 {
  margin: 0;

  font-size: 30px;
  font-weight: 400;
}



/* -----------------------
   PROFILE
----------------------- */

.profile {
  display: grid;

  grid-template-columns: 190px 1fr;

  gap: 35px;

  align-items: start;

  padding-bottom: 32px;
}


.profile-left {
  text-align: center;
}


.avatar {
  display: block;

  width: 165px;
  height: 205px;

  margin: 0 auto 10px;

  object-fit: cover;

  border-radius: 10px;
}


.profile-links {
  font-size: 13px;
  line-height: 1.8;
}


.profile-links span {
  color: #999999;

  margin: 0 2px;
}


.profile-right p {
  margin-top: 0;
  margin-bottom: 14px;
}



/* -----------------------
   SECTIONS
----------------------- */

.section {
  border-top: 1px solid #cccccc;

  padding: 14px 0 28px;
}


.section h2 {
  margin: 0 0 20px;

  font-size: 20px;
  font-weight: 600;
}



/* -----------------------
   NEWS
----------------------- */

.news {
  margin: 0;
  padding-left: 18px;
}


.news li {
  margin-bottom: 3px;
}


.news span {
  color: #444444;
}



/* -----------------------
   PROJECT
----------------------- */

.project {
  margin-bottom: 28px;
}


.project h3 {
  margin: 0 0 5px;

  font-size: 16px;
  font-weight: 600;

  color: #1673d1;
}


.project p {
  margin: 0 0 5px;

  max-width: 650px;
}


.project-links {
  font-size: 13px;
}



/* -----------------------
   FOOTER
----------------------- */

footer {
  border-top: 1px solid #cccccc;

  margin-top: 10px;

  padding-top: 20px;

  text-align: right;

  color: #777777;

  font-size: 12px;
}



/* -----------------------
   MOBILE
----------------------- */

@media (max-width: 650px) {

  .container {
    max-width: calc(100% - 30px);

    padding-top: 20px;
  }


  .profile {
    grid-template-columns: 1fr;

    gap: 25px;
  }


  .avatar {
    width: 160px;
    height: 200px;
  }


  .profile-right {
    max-width: 500px;

    margin: 0 auto;
  }


  footer {
    text-align: center;
  }

}