styles.css

/* Jumbotron styling */
.jumbotron {
  background-image: url("../img/zaansche schans 2.jpg");
  background-size: cover;
}
.jumbotron h1, .jumbotron p {
  color: white;
}
.container a {
  margin: 0 5% 0 0;
}
/* Navigation styling */
.left {
  float: left;
}
.right {
  float: right;
}
nav {
  position: fixed;
  width: 100% !important;
  top: 0;
  left: 0;
  background-color: #522b74;
  padding: 20px;
}
nav a:hover {
  color: #0ff;
  text-decoration: none;
}
nav a {
  color: #fff;
  text-decoration: none;
  transition: color 800ms;
  -webkit-transition: color 800ms;
}
.right a {
  padding-left: 20px;
}
.content {
  padding-top: 50px;
}
/* Contact page styling */
.background {
  background-image: url("../img/retro-pattern-sixties-floral.jpg");
  overflow: auto;
}
.header {
  width: 80%;
  min-height: 150px;
  margin: 2% auto;
  padding: 2%;
  text-align: center;
  background-color: #e2ddd8;
  border: 3px solid #804c15;
}
.contact-image {
  width: 80%;
  padding-bottom: 44%;
  margin: 0 auto;
  background-image: url("../img/eckhard-hoehmann-telephone-2.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  border: 3px solid #804c15;
}
.contact-details {
  width: 94%;
  margin: 2%
}
#details {
  margin: 2% auto;
  list-style-type: none;
}
#details li{
  margin: 1% auto;
}
.footer {
  width: 80%;
  min-height: 200px;
  margin: 2% auto;
  padding: 1%;
  background-color: #e2ddd8;
  border: 3px solid #804c15;
}
.footer {
  height: 880px
}
.footer img {
  float: right;
}
/* About page styling */
#about img {
  border: 3px solid #804c15;
  max-width: 100%;
}
#about .intro {
  background-color: #e2ddd8;
  border: 3px solid #804c15;
  margin: 0 1.2% 0 0;
}
#about .skill {
  background-color: #e2ddd8;
  border: 3px solid #804c15;
  margin: 0 -1.2% 0 0;
}
.main-text {
  width: 80%;
  min-height: 150px;
  margin: 2% auto;
  padding: 1%;
  background-color: #e2ddd8;
  border: 3px solid #804c15;
}
/* Typography */
h1 {
  font-family: Fahkwang, Futura, Helvetica, Trebuchet, sans-serif;
  font-size: 4em;
  font-weight: 300;
  color: #552c00;
}
h2 {
  font-family: Fahkwang, Futura, Helvetica, Trebuchet, sans-serif;
  font-size: 3em;
  font-weight: 300;
  color: #552c00;
}
ul {
  font-family: Fahkwang, Futura, Helvetica, Trebuchet, sans-serif;
  font-size: 1.5em;
  font-weight: 300;
  color: #552c00;
}
.footer {
  color: #552c00;
}
/* FAQ styling */
.card-header {
  background: #522b74;
  font-family: Fahkwang, Futura, Helvetica, Trebuchet, sans-serif;
}
.card-header button:hover {
  text-decoration: none;
  color: #0ff;
}
.card-header button {
  font-size: 1.5em;
  text-decoration: none;
  color: #fff;
  transition: color 1200ms;
  -webkit-transition: color 1200ms;
}
.card-body {
  font-family: Fahkwang, Futura, Helvetica, Trebuchet, sans-serif;
  font-size: 1.5em;
}
#work img {
  max-width: 100%;
  padding: 5px 0;
}