*{
    margin: 0;
    padding: 0;
    font-family: 'Roboto Condensed', sans-serif;
}
  
/* navbar */
  
.navbar-nav{
    margin-right: 0 !important;
    padding-right: 100px;
}
  
.navbar{
    background-color: #222222;
    color: white !important;
    padding-bottom: 5px; 
}
  
.nav-item a{
    color: white !important;
}
  
.nav-item{
    padding-left: 2px;
}
  
.navbar-brand{
    color: white !important;
    padding-left: 100px;
}
  
#navbar button{
    color: white !important;
}
  
/* banner, social, projects, interesting, about */
  
#banner-container, #footer-container {
    background-color: DarkSlateGrey;
    color: white !important;
    padding-top: 20px;
    padding-bottom: 0px;
    text-align: center;
      
}

#social-container, #projects-container, #interesting-container, #about-container {
    background-color: White;
    color: black !important;
    padding-top: 20px;
    padding-bottom: 0px;
}

#banner-row img{
    max-width: 70%;
    height: auto;
    display: block;
}
  
#banner-row h3 {
    color: White;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 50px;
    text-align: center;
}

#banner-row p {
  color: White;
  text-align: center;
}
  
#banner-row, #social-row, #projects-row, #interesting-row, #about-row a a:link {
    color: black !important;
    border: none;
    border-radius: 5px;
    padding: 5px;
}

#footer-row a a:link {
    color: White !important;
    border: none;
    border-radius: 5px;
    padding: 5px;
}

#banner-row {
  padding-top: 25px; 
  padding-bottom: 25px;
}

#banner-col, #social-col, #projects-col, #interesting-col, #about-col {
    padding-left: 20px;
}

h1 {
  text-align: center;
  color: DarkSlateGrey;
  padding-top: 30px; 
}

h3 {
    text-align: center;
    color: DarkSlateGrey;
    padding-top: 15px; 
}

p {
    color: black;
}

a {
    color: darkslategray !important;
    border: none;
    border-radius: 5px;
    padding: 5px;
}

ul {
    list-style-type: circle;
}


/* media */
@media only screen and (max-width: 987px){
    .navbar-brand{
        padding-left: 0px;
    }
}
  
@media only screen and (max-width: 768px){
    #banner-row img{
        padding-top: 20px;
    }
  
   .social-col{
       width: 33%;
   }
  
}