html{
  background: #ecf0f1;
  color: #34495e;
  font-family: 'Nunito', sans-serif;
  font-size: 19px;
}
a{
  color: #34495e;
}
.title{
  margin-bottom: 40px;
}
body{
  margin: 100px 15% 100px 15%;
}
.avatar{
  float: left;
  margin-right: 40px;
  width: 150px;
  border-radius: 100%;
}
.content{
  width: 100%;
}

.blog-list{
  width: 70%;
  float: left;
}
.sidebar{
  float: right;
  width: 30%;
}
footer{
  float: left;
  width: 100%;
}
h2{
  font-size: 26px;;
}
ul li a{
  font-size: 20px;
}
ul li a:hover {
  font-weight: 600;
}
time {
  font-size: 16px;
}
.love{
  font-family: Segoe UI Emoji, Segoe UI Symbol,
    Symbola, Quivira;
}
@media screen and (max-width: 860px) {
  body{
    margin: 50px 8% 50px 8%;
    font-size: 0.85rem;
  }
  .blog-list, .sidebar {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  .profile-photo{
    width: 100%;
    vertical-align: middle;
  }
  .avatar{
    float: none;
  }
  h2{
    font-size: 20px;;
  }
  ul li a{
    font-size: 16px;
  }
  ul li a:hover {
    font-weight: 600;
  }
}