styles.scss

// Colors
$red: #ea3515;
// Fonts
$font-family-serif: 'Roboto Slab', serif;
$font-family-sans-serif: 'Open Sans', sans-serif;
$headings-font-family: $font-family-serif;
$font-family-base: $font-family-sans-serif;
$h2-font-size: 2.6rem;

@import './node_modules/bootstrap/scss/bootstrap.scss';

html,
body {
  height: 100%;
}

.logo {
  max-width: 100%;
}

.navgiation-heading {
  font-size: 1.2em;
  font-family: $font-family-sans-serif;
}

button {
  cursor: pointer;
}

.main-heading {
  font-size: 4em;
  margin-top: 0;

  @include media-breakpoint-down(md) {
    & {
      font-size: 2.2em;
    }
  }
}

// Map overlay fix
$iframe-height: 500px;
.overlay {
  background: transparent;
  position: relative;
  width: 100%;
  height: $iframe-height; /* your iframe height */
  top: $iframe-height; /* your iframe height */
  margin-top: -$iframe-height; /* your iframe height */
}

.scroll {
  opacity: 0.3;
  background-color: $red;
  width: 40px;
  height: 40px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  border-radius: 5px;
  border: none;
  z-index: 1000;

  &:hover {
    opacity: 1;
  }
}

.arrow-up {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -9px;
  margin-left: -8px;
}