/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}

.container {
  max-width: 960px;
}

.pricing-header {
  max-width: 700px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #fff7ed;
}

/* Added */
body {
  font-family: "Libre Franklin", sans-serif;
  background-color: #fff7ed;
}

.permanent-marker-regular {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
}

h1,h2,h3 {
  font-family: "Permanent Marker", cursive;
}

.navbar {
  background-color: #fff7ed !important;;
}

/* Setting the color of the table was a pain. Below specifies the the colors for general tables. The Collection table uses a filtering library, and the colors for that table are specified in collection.html */
.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: #dcd1d3; 
 }
 .table-striped>tbody>tr:nth-child(even)>td, 
.table-striped>tbody>tr:nth-child(even)>th {
   background-color: #fff7ed; 
 }

 /* Sets the size of the notification dropdown menu. It also allows wrapping of the words. In practice, it will wrap once
 it reaches the minimum size, instead of wrapping to avoid the max-width. The current max-width seems ignored. But these 
 settings work on desktop and mobile  */
 .dropdown-menu {
  max-width: 80vw;    /* 80% of the viewport width */
  min-width: 300px;
  overflow-x: auto;  /* horizontal scrollbar if needed */
  width: auto;
}
.dropdown-menu .dropdown-item {
  white-space: normal; 
  word-break: normal; 
}