/* ----------------------------------------------------------------
	CSS Variables
-----------------------------------------------------------------*/

:root {
  --h1-size: 7rem;
  --h2-size: 3rem;
  --h-font1: 'Cutive Mono', monospace;
  --h-font2: 'IBM Plex Mono', monospace;
  --h-font3: 'Share Tech', sans-serif;
  --h-font4: 'Share Tech Mono', monospace;
  --h-font5: 'Source Code Pro', monospace;
  --h-font6: 'Space Mono', monospace;
  --h-font7: 'VT323', monospace;

  --p-font1: 'Source Sans Pro', sans-serif;
  --p-font2: 'Raleway', sans-serif;

  --primarycolor: #000520;
  --secondarycolor: #0bffff;

}

.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
}

/* ----------------------------------------------------------------
	Fonts
-----------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6, li a {
  font-family: var(--h-font2);
}

a {
  color: var(--secondarycolor);
}

p {
  font-family: var(--p-font2);
  font-size: 1.2rem;
  font-weight: 200;
}

span.sec {
  font-family: var(--p-font2);
  color: var(--secondarycolor);
}

h1.sec {
  color: var(--secondarycolor);
}

/* ----------------------------------------------------------------
	Backgrounds
-----------------------------------------------------------------*/

.bkg1 {
  background-color: var(--primarycolor);
}

.bkg2 {
  background-color: var(--secondarycolor);
}

/* ----------------------------------------------------------------
	Section
-----------------------------------------------------------------*/

section,
footer {
  padding: 10rem 0;
}

/* ----------------------------------------------------------------
	Header
-----------------------------------------------------------------*/

.break {
  display: block;
}

.header-dlb {
  padding: 10rem 1rem;
}

.header-dlb h1 {
  font-size: var(--h1-size);
}

.sub-header-dlb {
  font-size: 2rem;
  font-family: var(--h-font2);
}

/* ----------------------------------------------------------------
	Services
-----------------------------------------------------------------*/

.services {
  color: #fff;
}

.services h1 {
  font-family: var(--h-font2);
  line-height: 1.3em;
  font-weight: 300;
}

.services p {
  width: 80%;
  margin: auto;
}

.img-filter {
  border-radius: 0 50% 50% 0;
  mix-blend-mode: luminosity;
}

.services .row {
  margin: 150px 0;
}
/* ----------------------------------------------------------------
	Team Members
-----------------------------------------------------------------*/

.team {
  color: var(--primarycolor);
}

.team h1 {
  font-family: var(--h-font2);
  line-height: 1.3em;
  font-weight: 300;
}

/* ----------------------------------------------------------------
	About
-----------------------------------------------------------------*/

.about {
  color: var(--primarycolor);
}

/* ----------------------------------------------------------------
	Footer
-----------------------------------------------------------------*/

.footer-box {
  color: #fff;
}

.footer-box h4 {
  margin-bottom: 1.5rem;;
}

footer .social {
  padding: 2rem 0;
}