@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&family=Unica+One&display=swap");

:root {
  --primary: $primary;
  --secondary: $seconday;
  --really-dark: $reallyDark;
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  margin: 0;
  padding: 0;
  color: #1F191F;
}

h1, h2, h3, h4, h5, h6 {
  color: #3b4148;
  font-family: "Unica One", cursive;
}

p {
  line-height: 1.5em;
}

.page-header {
  background: black url("https://images.unsplash.com/photo-1618035881325-cbee2ddab47f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80");
  background-size: cover;
  color: #1F191F;
  display: block;
  height: calc(100vh - 8em);
  padding: 4em;
  text-align: center;
}
.page-header img {
  width: 300px;
}
.page-header h1 {
  display: none;
  font-size: 3.8em;
}
.page-header h2 {
  font-size: 2em;
}

.main-content {
  padding: 4em;
}

.page-title {
  text-transform: uppercase;
  text-align: center;
  font-size: 6em;
}

.callout {
  font-size: 3em;
  font-weight: 100;
  margin: 0.75em 0;
  color: #3b4148;
}

footer {
  background: #1F191F;
  color: #3b4148;
  padding: 4em;
}

.section {
  border-radius: 25px;
  padding: 80px 100px;
}
.section.section-invert {
  color: #e6e6e6;
  background: linear-gradient(45deg, #3b4148 0%, #697480 100%);
}
.section.section-invert h1, .section.section-invert h2, .section.section-invert h3, .section.section-invert h4, .section.section-invert h5, .section.section-invert h6 {
  color: #17CF97;
}