:root {
  --dark: #293a55;
  --blue: #71b964;
  --cream: #eaecf3;
  --darkgreen: #599150;
  --opgreen: #599150b9;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--cream);
}

h1,
h2,
h3,
h4,
h5,
hr {
  font-family: "Comfortaa", cursive;
  color: var(--dark);
}

p,
a {
  font-family: "Roboto", sans-serif;
}

p {
  font-weight: 300;
  color: var(--dark);
}

header {
  background-color: var(--dark);
}

nav a,
nav h1 {
  color: white !important;
}

.jumbotron h1 {
  background-color: var(--opgreen);
  text-align: center;
  font-size: 6vw;
  padding: 1vw;
  margin: auto;
  font-style: italic;
}

.details img {
  width: 100%;
  height: 75%;
}

.quantity label {
  margin: 0 15px 0 0;
}

.quantity input {
  max-width: 50px;
  text-align: center;
  margin: 0;
}

.btn {
  background-color: var(--blue) !important;
  color: white !important;
  border: none;
}

.btn:hover {
  background-color: var(--darkgreen) !important;
  font-style: italic;
}

hr {
  opacity: 1.25;
}

footer {
  width: 100%;
  margin: 0px;
  background-color: var(--dark);
}

footer p {
  margin: 0;
  text-align: center;
  color: white;
}

.logo {
  padding-bottom: 5px;
}