Forward_Station_Server/css/style.css

body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.6em;
}
.container-fluid {
  background-color: #efecee;
}
.profile-sidebar {
  background-color: #454243;
  word-wrap: break-word;
  color: #eee;
}
.profile-sidebar h1 {
  font-weight: bold;
  color: #fff;
}
.profile-sidebar h2 {
  font-size: 0.9em;
  font-weight: bold;
  color: #5BC798;
}
.profile-sidebar a {
  color: #eee;
}
.nav-sidebar {
  background-color: #d8d4d6;
  word-wrap: break-word;
}
.nav-sidebar {
  padding: 4px;
}
.nav-sidebar ul {
  list-style: none;
  margin: 15px 0 0 0;
  padding: 0;
}
.nav-sidebar ul li {
  margin-bottom: 20px;
}
.nav-sidebar a {
  color: #444;
  font-size: 0.9em;
  transition: color 0.5s;
}
.nav-sidebar a:hover,
.nav-sidebar a:focus,
.nav-sidebar a:active {
  text-decoration: none;
  color: #777;
}
.social-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.social-links li {
  display: inline;
}
.social-links a .fa-facebook-square {
  color: #6a6a6a;
  transition: color 0.3s;
}
.social-links a .fa-linkedin-square {
  color: #2d6b88;
  transition: color 0.3s;
}
.social-links a .fa-twitter-square {
  color: #3b91b2;
  transition: color 0.3s;
}
.social-links a .fa-google-plus-square {
  color: #a37873;
  transition: color 0.3s;
}
.social-links a:hover .fa-facebook-square,
.social-links a:focus .fa-facebook-square,
.social-links a:active .fa-facebook-square {
  color: #3b5998;
}
.social-links a:hover .fa-linkedin-square,
.social-links a:focus .fa-linkedin-square,
.social-links a:active .fa-linkedin-square {
  color: #007bb5;
}
.social-links a:hover .fa-twitter-square,
.social-links a:focus .fa-twitter-square,
.social-links a:active .fa-twitter-square {
  color: #00aced;
}
.social-links a:hover .fa-google-plus-square,
.social-links a:focus .fa-google-plus-square,
.social-links a:active .fa-google-plus-square {
  color: #dd4b39;
}
hr {
  border-top: 1px solid #ccc;
}
.content {
  padding: 0 62px 80px 62px;
  min-height: 100vh;
}
.content h2 {
  font-weight: bold;
  font-size: 1.2em;
  margin-left: -40px;
  color: #5BC798;
  text-transform: uppercase;
}
.content h3 {
  font-size: 1.1em;
  color: #147286;
  font-weight: bold;
  text-transform: uppercase;
}
.content .skills-ul {
  -webkit-column-count: 3;
          column-count: 3;
  padding-left: 0;
}
.fa-star {
  color: gold;
}
@media (min-width: 992px) {
  hr {
    display: none;
  }
}
@media (min-width: 1200px) {
  .wrapper {
    position: relative;
    width: 1170px;
  }
  .profile-sidebar {
    position: fixed;
    width: 292px;
    top: 0;
    bottom: 0;
    overflow-y: hidden;
    overflow-x: hidden;
  }
  .profile-sidebar .profile-pic {
    margin-left: -15px;
    max-width: calc(100% + 30px);
  }
  .nav-sidebar {
    position: fixed;
    width: 165px;
    margin-left: 292px; 
    top: 0;
    bottom: 0;
    overflow-y: hidden;
    overflow-x: hidden;
  }
}
@media (max-width: 1199px) {
  .container-fluid {
    padding: 0;
  }
  .profile-sidebar,
  .nav-sidebar {
    position: relative;
    min-height: 100vh;
  }
  .container {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .profile-pic {
    max-height: 300px;
    max-width: 300px;
    border-radius: 50%;
  }
  .profile-sidebar {
    padding: 15px 0;
    text-align: center;
    min-height: inherit;
  }
}