* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Roboto", sans-serif;
}

/* Navigation Bar */
nav {
  background-color: #333;
}

.nav {
  color: #ffffff;
  height: 80px;
  width: 80%;
  justify-content: space-between;
  margin: auto;
}
.flexclass {
  display: flex;
  align-items: center;
}

.nav-links {
  width: 30%;
  list-style-type: none;
  justify-content: space-around;
  margin-right: 30%;
}

.nav a {
  color: #ffffff;
  text-decoration: none;
}

.nav .active {
  font-weight: bold;
}

.nav-title {
  margin-left: 20px;
}

.btn {
  height: 35px;
  width: 100px;
  background-color: #17a2b8;
  color: #ffffff;
  border: none;
  font-size: 16px;
  margin-right: 3%;
}

/* main body */
main {
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  margin: auto;
}

/* LEFT SIDE - content*/

.content {
  flex-wrap: wrap;
  margin-top: 1rem;
  flex: 2;
}

/* user card */

.user-card {
  flex-wrap: wrap;
  background-color: #fff;
  border: 2px solid #999;
  margin: 20px 20px;
  font-size: 1.2rem;
  overflow: hidden;
}

.card-header {
  background-color: #17a2b8;
  height: 125px;
  margin-bottom: 70px;
}

.card-body {
  padding: 20px;
}

.card-body h1,
.card-body h2,
.card-body h3,
.card-body p {
  margin: 20px 0px;
}

.avatar-m {
  border-radius: 50%;
  background-color: #fff;
  height: 140px;
  padding: 5px;
  margin-top: 7%;
  margin-left: 2%;
}

.icon-s {
  height: 20px;
}

/* Education */

.education {
  background-color: #fff;
  border: 2px solid #999;
  margin: 30px 20px;
  font-size: 1.2rem;
  overflow: hidden;
}

.education-header {
  text-indent: 20px;
  color: #fff;
  background-color: #333333;
  height: 80px;
}

.education-header h3 {
  text-indent: 20px;
}

.education-body {
  text-indent: 20px;
  font-style: bold;
  margin-top: 10px;
}

.education-body h4 {
  color: #999;
}
.education-body p {
  font-weight: bold;
}

/* RIGHT SIDE - sidebar*/
.sidebar {
  margin-top: 1rem;
  flex: 1;
}

/* requests connections */

.requests {
  background-color: #fff;
  border: 2px solid #999;
  margin: 20px 20px;
  font-size: 1.2rem;
  overflow: hidden;
}

.requests-header {
  color: #ffffff;
  background-color: #333333;
  height: 80px;
  margin-bottom: 20px;
}

.number2 {
  color: #333;
  background-color: #999;
  border: #999 solid 5px;
  border-radius: 50%;
  height: 24px;
  width: 24px;
  margin: 10px;
  text-align: center;
}

.requests-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 20px;
}

.req-users {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 20px;
}

.requests-body h4 {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 25px;
}

.requests-body img {
  border-radius: 50%;
  background-color: #fff;
  height: 42px;
}

/* your connections */

.connections {
  background-color: #fff;
  border: 2px solid #999;
  margin: 30px 20px;
  font-size: 1.2rem;
  overflow: hidden;
}

.connections-header {
  color: #ffffff;
  background-color: #333333;
  height: 80px;
  margin-bottom: 20px;
}

.number500 {
  color: #333;
  background-color: #999;
  border: #999 solid 5px;
  border-radius: 50%;
  height: 24px;
  width: 64px;
  margin: 10px;
  text-align: center;
}

.connections-body {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.connections-users {
  display: flex;
  flex-direction: row;
  padding-left: 10%;
  margin-top: 7%;
}

.connections-body h4 {
  margin-top: 10px;
  margin-left: 10px;
}

.connections-body img {
  border-radius: 50%;
  background-color: #fff;
  height: 42px;
}

.view-more {
  height: 80px;
  background-color: #fff;
  border-top: 2px solid #999;
  margin-top: 10%;
  font-size: 1.2rem;
}