style.css

/* Some specific changes to lay-out. */
* {font-family: 'Lato', sans-serif;}
nav {height: 4rem; }
.navbar-brand img {height: 30px;}
.navbar-toggler {background-color:white;}
@media (max-width: 767px){
  .navbar-nav{background-color: #6c757d;}
  #hamburger * a {color: white; text-align: center;}
  .dropdown-menu {background-color: #343a40;}
}
h1, h2 {color: rgb(34,110,147); margin-bottom: .5rem;}
a {color: black;}
a:hover {color: black;}
.row {margin: 1rem 0;}
blockquote {color: rgb(34,110,147);}
footer {margin: 3em 0!important;}
.references p {font-size: small; margin-bottom: .5rem;}

footer img {max-width:40px!important; margin-left: auto; margin-right: auto; display:block;}
#projects * p {text-align: center;}
#projects .item {flex: 0 0 50%; padding: 0 5px;}
@media (min-width: 576px){ #projects .item {flex: 0 0 20%; padding: 0 15px;} }
#contact p, a {color: rgb(34, 110, 147); text-align: center;}
i, i+a {vertical-align: middle;}

/* Prevent breaking within spans. */
span {display: inline-block;} 

/* 
The parallax effect is created making use of perspective and transform into the z-plane using CSS only.
The header-box is the box containing 
*/

.banner {height: 40vh; overflow: hidden hidden; position: relative; left:0%; top: -3rem; width:105%}
.banner::after {content:""; background-color:rgba(0,0,0,.3); position: absolute; top:0; left:0; height: 100%; width: 100%;}
.banner img {width: 100%; height: 40vh; position: absolute; top:0; left: 0; object-fit: cover;}
.banner h1 {position: absolute; top: 0; left: 0; height: 40vh; line-height: 40vh; text-align: center; width: 100%; color: white; z-index: 1;}
/* @media (min-width: 576px){.banner img {transform: translateZ(-200px) scale(2); top: -20vh;}}  */

.full-container {background: white; transform: translateZ(0);}

body, html {overflow: hidden auto;}