/* FONTS */

@font-face {
  font-family: TITLE-FONT;
  src: url(../fonts/Roboto-Black.ttf);
}

@font-face {
  font-family: CONTENT-FONT;
  src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
  font-family: NAV-FONT;
  src: url(../fonts/Roboto-Bold.ttf);
}

.header-title,
.primary-title,
.secondary-title,
.footer-title {
  font-family: TITLE-FONT;
  font-weight: 400;
}

.header-text,
.primary-text,
.secondary-text,
.footer-text {
  font-family: CONTENT-FONT;
  font-size: 1.2rem;
}

.header-nav,
.footer-nav {
  font-family: NAV-FONT;
}

/* BROWSER RESET */

body {
  box-sizing: border-box;
  margin: 0;
}

/* STICKY FOOTER */

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
  display: flex;
}

/* footer {
  margin-top: auto;
  flex-shrink: 0;
} */

/* BACKGROUND COLORS */

header,
footer {
  background-color: #a0a0a0;
}

/* main {
  display: flex;
  background-color: #ffffff;
} */

.side-bar {
  background-color: #dcdcdc;
}

/* PADDING */

.side-bar,
.content {
  padding: 1em;
}