@font-face {
  font-family: 'American Typewriter';
  src: url('../fonts/american-typewriter-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'American Typewriter';
  src: url('../fonts/american-typewriter-bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Helvetica Light';
  src: url('../fonts/helvetica-light-587ebe5a59211.ttf') format('truetype');
  font-weight: lighter;
  font-style: normal;
}
:root {
  /* Colors */
  --color-background: #F7F4F1;
  --color-navbar-footer-bg: #E8E2DC;
  --color-primary-accent: #4A7551; /* Earthy green */
  --color-secondary-accent: #3B4964; /* Deep slate blue */
  --color-text-body: #222222; /* Dark charcoal */
  --color-text-headings: #3B2F2F; /* Rich dark brown */
}
* {
  box-sizing: inherit;
  color: var(--color-text-body);
}
html {
  height: 100%;
  box-sizing: border-box;
  text-align: center;
}
body {
  height: 100%;
  background-color:var(--color-background);
  font-family:'American Typewriter';
}
nav,
footer {
  background-color: var(--color-navbar-footer-bg);
}
.bg-body-tertiary {
  background-color: var(--color-navbar-footer-bg) !important;
}
.wrapper {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
h1, h2, h3, h4, h5 {
  font-family:'American Typewriter';
  color: var(--color-text-body);
}
.index-icon {
  font-size:larger;
}
a {
  color: var(--color-text-body);
}
a:hover {
  text-decoration:underline;
}
.nav-link {
  color: var(--color-text-body)
}
.nav-link:hover{
  text-decoration: underline;
}
.icon {
  height:150px;
  width: 150px;
}
.page-link {
  background-color: var(--color-background);
  color: var(--color-text-body);
}
.page-link:hover{
  background-color: var(--color-navbar-footer-bg);
  color: var(--color-text-body);
}
.page-item.disabled .page-link {
  background-color: var(--color-navbar-footer-bg);
}
.page-item.active .page-link {
  background-color: var(--color-background);
}
.card {
  border:none;
  box-shadow: none;
  background-color: var(--color-background);
}
.card-img-top {
  border-radius: 15px;
}
.card-title {
  text-transform: capitalize;
}
.featured {
  max-width: 40vw;
}
.icon-about {
  max-width: 300px;
}