.navbar {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    margin: 0 auto;

  }
  .navbar ul {
    list-style-type: none !important;
  }
  
  .navbar li {
    float: left !important;
  }
  
  .navbar li a {
    display: block !important;
    color: white !important;
    text-align: center !important;
    padding: 14px 16px !important;
    text-decoration: none !important;
  }
  
  .navbar li a:hover {
    background-color: #111 !important;
  }


  @media screen and (min-width: 64em) {
    .navbar-inner {
      max-width: 64em;
      padding: 0rem 5.20rem;
      margin: 0 auto;
    }}
  @media screen and (min-width: 42em) and (max-width: 64em) {
    .navbar-inner {
      padding: 0rem 3.2rem;
      margin: 0 auto;

    }}
  
  @media screen and (max-width: 42em) {
    .navbar-inner {
      padding: 0rem .2rem;
      margin: 0 auto;

    }}



  .image-link{
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.2);
    display: inline-block;
    border-style: solid;
    margin: 2px;
  }
  .image-link img:hover {
    filter: alpha(opacity=80);
    opacity: .8;
}

/*
Creating Subsections
*/

.first-section{
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 2rem !important;
}

.sub-section{
  border-bottom: 1px solid #dee2e6;
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}


/*
CSS for boxes
*/

.box {
  display: inline-block;
  margin: .75rem;
  border-style: solid;
  border-width: 1px;
  border-radius: 0.3rem;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s; 
  padding: 0.75rem 1rem; 
}

  .box a{
    color: #606c71 ;
  } 
  .box a:hover{
    color: #1e6bb8 !important;
    text-decoration: none;
  }

  /* @media screen and (min-width: 64em) {
    .box {
      padding: 0.75rem 1rem; } }
  
  @media screen and (min-width: 42em) and (max-width: 64em) {
    .box {
      padding: 0.6rem 0.9rem;
      font-size: 0.9rem; } }
  
  @media screen and (max-width: 42em) {
    .box {
      display: block;
      width: 100%;
      padding: 0.75rem;
      font-size: 0.9rem; } */

/*
CSS for buttons
*/

.btn {
  display: inline-block;
  margin-bottom: 1rem;
  border-style: solid;
  border-width: 1px;
  border-radius: 0.3rem;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s; }

  .btn + .btn {
    margin-left: 1rem; }

.btn:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  background-color:#606c71;
  border-color: #606c71; }

  .btn a{
    color: #606c71 !important;
  }

@media screen and (min-width: 64em) {
  .btn {
    padding: 0.75rem 1rem; } }

@media screen and (min-width: 42em) and (max-width: 64em) {
  .btn {
    padding: 0.6rem 0.9rem;
    margin-bottom: .33rem;
    font-size: 0.9rem; } }

@media screen and (max-width: 42em) {
  .btn {
    display: block;
    width: 100%;
    padding: 0.75rem;
    margin-bottom: .33rem;
    font-size: 0.9rem; }
    .btn + .btn {
      margin-top: 1rem;
      margin-left: 0; } }

a .btn {
  color:#606c71 ;
  text-decoration: none;
}

.small-link a{
  text-decoration: none;
}

.small-link a:hover{
  color:#1e6bb8;
  text-decoration: underline !important;
}

.skill-icons-list{
  padding-left: 0;
  list-style: none;
  display: inline-block;
}

.skill-icons{
  /* color: #868e96; */
  font-size: 2.5rem; 
  margin-right: .75rem;
  display: inline-block;
  margin-right: .75rem;
}

.skill-icons:hover{
  color: #BD5D38
}

#top_button {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0px 5px;
  border-radius: 4px;
}

#top_button:hover {
  background-color: #555;
  color: white;
}