body {
  margin: 0;
  padding: 0;
  font-family: "Roboto Mono", monospace;
}

/* background-colors */

.bg-b {
  background-color: #17252a;
}

/* section nav */

nav ul > li > a:hover {
  color: #2b7a78;
  background-color: #feffff;
}

/* section aobut */

.social-links {
  font-size: 35px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.socmed-icons {
  color: #333333;
  padding: 0 15px;
}

/* icons hover color change */
.border-hover::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #000;
  transition: width 0.3s;
  margin-top: 15px;
}

.fa-envelope-square:hover {
  color: #bb001b;
}

.fa-github:hover {
  color: #ffffff;
}

border-hover:hover::after {
  width: 100%;
}

.fa-instagram:hover {
  color: #dd2a7b;
}

.fa-twitter-square:hover {
  color: #1da1f2;
}

.fa-linkedin:hover {
  color: #0e76a8;
}

/* hover border-bottom  */
:hover::after {
  width: 100%;
}

.intro-content {
  padding-top: 5vh;
}

#about {
  /* background-color: #17252A; */
  min-height: 100vh;
  color: #ffffff;
}

.greeting {
  font-size: 32px;
}

p.name {
  font-size: 35px;
  line-height: 3rem;
}

p.title {
  font-size: 20px;
  line-height: 0;
}

.abt-content {
  font-size: 22px;
  line-height: 2.5rem;
}

.avatar {
  border-radius: 50%;
  max-width: 240px;
  max-height: 240px;
  line-height: 0;
}

.about-me {
  line-height: 1.6rem;
}

/* utilities */

.pt-10 {
  padding-top: 10px;
}

.pt-5 {
  padding-top: 5px;
}

.pb-5 {
  padding-bottom: 5px;
}

.mt-5 {
  margin: 5px 0;
}

/* colors */
.my-main {
  color: #3aafa9;
}

.b-color {
  color: #17252a;
}

.light-green {
  color: #2b7a78;
}

.light-white {
  color: #def2f1;
}

.red-text {
  color: #dd2a7b;
}

.my-white {
  color: #feffff;
}

.nav-color {
  background-color: #3aafa9;
}

.waves-black {
  color: #17252a;
}