.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.percent-off {
  color: #fc6262;
}

a:hover {
  text-decoration: none;
}

header {
  line-height: 1;
  border-bottom: 1px solid #212124;
}

.header-logo {
  color: white;
  font-size: 2.25rem;
}

.header-logo:hover {
  text-decoration: none;
}

.tagline {
    font-size: 0.6rem;
    white-space: nowrap;
}

.nav {
  line-height: 1;
  border-bottom: 1px solid #212124;
}

body {
  background-color: black;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.jumbotron {
  background-color: #212124;
}

.jumbotron-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card {
  background-color: #212124;
}

.featured-img {
  width: auto;
  height: auto;
  object-fit: contain;
}

.product-card-img {
  width: auto;
  height: 300px;
  object-fit: cover;
}

.author-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.more-header {
  line-height: 1;
  border-bottom: 1px solid #212124;
}

.more-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

footer {
  background-color: #212124;
}