body {
    background: #274bac;
    color: #28282a;
    margin-top: 3rem;
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: #646262;
  }

  my-project {
    color: #e5e5e5;
  }

  a {
    color:#000000;
    
  }

  a:hover {
    color: #dff0df;
    background-color: #493645;
  }

  ul {
    margin: 0;
  }

   .centered {
    position: absolute;
    text-align: center;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #17171a;
  }

  #heroBox {
    color: #0000005e;
    background-color: #0000003d;
    padding: 20px;
    border: 1px;
    border-color: #000000;
  }

  .bottom-centered {
    text-align: center;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000000;
  }

  .bottom-centered-child {
    text-align: center;
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000000;
  }

  .hero-image {
    background-position: center;
    width: 20px;
  }
  
  .hero-text {
    text-align: center;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(69, 70, 73);
  }

  .hero-text button {
    border: 1px;
    position: absolute;
    outline: 0;
    padding: 10px 25px;
    color: black;
    background-color: rgb(186, 186, 186);
     cursor: pointer;
  }
  
  .hero-text button:hover {
    background-color: #555;
    color: white;
  }

  .bg-steel {
    background-color: #000000;
  }
  
  .site-header .navbar-nav .nav-link {
    color: #cbd5db;
  }
  
  .site-header .navbar-nav .nav-link:hover {
    color: #ffffff;
  }
  
  .site-header .navbar-nav .nav-link.active {
    font-weight: 500;
  }
  
  .content-section {
    background: #ffffff;
    padding: 10px 20px;
    border: 1px solid #dddddd;
    border-radius: 3px;
    margin-bottom: 20px;
  }
  
  .article-title {
    color: #444444;
  }
  
  a.article-title:hover {
    color: #428bca;
    text-decoration: none;
  }
  
  .article-content {
    white-space: pre-line;
  }
  
  .article-img {
    height: 65px;
    width: 65px;
    margin-right: 16px;
  }
  
  .article-metadata {
    padding-bottom: 1px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e3e3e3
  }
  
  .article-metadata a:hover {
    color: #333;
    text-decoration: none;
  }
  
  .article-svg {
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }
  
  .account-img {
    height: 125px;
    width: 125px;
    margin-right: 20px;
    margin-bottom: 16px;
  }
  
  .account-heading {
    font-size: 2.5rem;
  }

  .about-me {
    /* margin-right: 20px; */
    /* margin-bottom: 16px; */
    padding-top: 90px;
    padding-bottom: 90px;
    color: #274bac;
  }

  .about-me-picture {
    /* margin-right: 20px; */
    /* margin-bottom: 16px; */
    padding-left: 100px;
    color: #274bac;
  }

  .about-me-text {
    padding-left: 60px;
    padding-right: 120px;
  }

  /* Style all font awesome icons */
.fa {
  font-size: 60px;
  width: 30px;
  height: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  margin-top: 5px;
  padding-top: 6px;
  padding-left: 1px;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}

 /* LinkedIn */
.fa-linkedin {
  background: #0A66C2;
  color: white;
}

/* Github */
.fa-github {
  background: #171515; 
  color: white;
}

.footer {
  padding: 120px;
}

.copyright {
  margin-top: 40px;
}

.section {
  position: relative;
  text-align: center;
  color: #00f000;
  padding: 50px;
}

.project-body {
  background: #ffffff;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
  height: 50px;
  width: 50px;
}

.project_item {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 30px;
  text-align: center;
  margin-top: 30px;
}

.project_item a:hover {
content:"";
background: #000;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all .3s ease;
}

.project_text {
width: 100%;
left: 50%;
bottom: 0;
transform: translateX(-50%);
text-align: center;
transition: all .4s ease 0s;
color: pink;
}