@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/lato-v14-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Lato Regular"), local("Lato-Regular"), url("../fonts/lato-v14-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-v14-latin-regular.woff2") format("woff2"), url("../fonts/lato-v14-latin-regular.woff") format("woff"), url("../fonts/lato-v14-latin-regular.ttf") format("truetype"), url("../fonts/lato-v14-latin-regular.svg#Lato") format("svg");
  /* Legacy iOS */ }
body {
  color: #262626;
  background-color: #f1ecf6;
  font-family: serif;
  font-size: 1.2rem;
  /* to keep footer at the bottom of page */
  display: flex;
  min-height: 100vh;
  flex-direction: column; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  margin-bottom: 0.6em; }

h2 {
  font-size: 36px; }

a {
  color: #7b52ab; }

a:hover {
  color: #0AAFAF;
  text-decoration: underline; }

code {
  background-color: #36175e;
  color: white;
  padding: 1rem; }

pre {
  white-space: pre-wrap; }

hr {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #CABAC8;
  border-style: solid none;
  border-width: 1px 0;
  margin: 3rem 0; }

.main {
  flex: 1 0 auto; }

.navbar {
  font-family: sans-serif; }

.navbar-brand {
  font-size: 1.5rem; }

.nav-item.active .nav-link {
  font-weight: bold; }

.posts img {
  display: block;
  width: 100%;
  max-width: 100%; }

.card-deck .card {
  min-width: 20rem;
  margin-bottom: 2rem; }
  .card-deck .card .card-img-top {
    min-height: 12rem;
    object-fit: cover; }

.pagination {
  flex-wrap: wrap; }
  .pagination .page-link {
    color: #7b52ab; }
  .pagination .page-item.active .page-link {
    background-color: #7b52ab;
    border-color: #7b52ab; }

/* Footer area */
.footer {
  padding: 1rem 0;
  margin-top: 2rem;
  color: #fff;
  background-color: #553285; }
  .footer a, .footer a:hover {
    color: #fff; }
  .footer a:hover {
    text-decoration: underline; }
  .footer .contact-list, .footer .featured-list {
    list-style-type: none;
    margin: 0;
    padding: 0; }
  .footer .license, .footer .repository {
    font-size: 90%;
    line-height: 95%; }