/****
  variables, @mixin - define styles that can be re-used throughout stylesheet
****/
/** -------- **/
body {
  font-family: 'Montserrat', sans-serif;
  display: flex;
  flex-direction: column;
}
html, body {
  height: 100%;
}
h1, h2, h3, h4, h5, p {font-family: 'Montserrat', sans-serif;}

a, a:visited {
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  display: block; 
  text-align: center;
  text-shadow: 2px 2px 4px #000;
}
a:hover, a:focus, a:active, a:active {text-decoration: underline; color: #fff;}
.instagram-icon {padding: 1rem;}
.instagram-icon img {opacity: 0.7;}
.instagram-icon img:hover {opacity: 1.0;}
.hero-full-screen {
  background: url("../images/StreetPic.png") center center no-repeat;
  background-size: cover; 
  height: 100vh;
  display: flex; 
  justify-content: center;
  align-items: center;
}
.hero-full-screen {
  height: 100vh;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: url("../images/StreetPic.png") center center no-repeat;
  background-size: cover; 
}
.hero-full-screen .middle-content-section {
  text-align: center;
  color: #fefefe; 
}
.hero-full-screen .top-content-section {
  width: 100%;
}
.hero-full-screen .bottom-content-section {
  text-align: center;
  padding-bottom: 2rem;
}
.hero-full-screen .bottom-content-section img {
  height: 70px;
  width: 70px;
  margin: 1rem; 
}