:root {
  --primary: #1db6bf;
  --secondary: #97d6da;
  --tertiary: #c8e8ea;
  --neutral-dark: #444444;
  --neutral-light: #9c9c9c;
  --footer-height: 130px;
}
* {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
}

html {
  position: relative;
  min-height: 100%;
  font-size: 22px;
}

body {
  margin-bottom: var(--footer-height); /* Margin bottom by footer height */
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
}

h1 {
  padding: .5em 0em .3em;
}

.jumbotron {
  background-image: url('/img/jumbotron-1.jpg');
  background-size: cover;
  border-radius: 0;
}

.jumbotron h3 {
  background-color: rgba(255, 255, 255, .7);
}

a, a:active, a:visited {
  text-decoration: none;
  color: var(--primary);
}

a:hover {
  color: var(--secondary);
  border-bottom: 1px dotted var(--secondary);
  text-decoration: none;
}

::placeholder {
  font-weight: normal !important;
  color: #bbbbbb !important;
}

.nav-container {
  background-color: var(--secondary);
}

.nav-container a {
  color: var(--neutral-dark);
  font-weight: 400;
}

.nav-container a:hover {
  color: white;
  border-bottom: none;
}

a.phone {
  font-size: 1.4em;
  font-weight: 400;
}

audio {
  width: 100%;
  margin: .5em 0px;
}

.episode-wrapper {
  border-bottom: 1px dotted var(--neutral-dark);
  margin-bottom: 20px;
}

.profile-image {
  margin: 0 0 40px 40px;
}

.container-fluid.footer, footer {
  background-color: var(--neutral-dark);
  color: var(--neutral-light);
}

#main-content > div {
  padding-bottom: 20px;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: var(--footer-height);
  background-color: var(--neutral-dark);
  color: var(--tertiary);
}

footer ul {
  padding-inline-start: 0;
}

footer ul li,
.list-simple {
  list-style-type: none;
}