body {
    padding: 0;
    margin: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12pt;
    background-color: #151515; 
    color:#acacac;
}

code, pre {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #acacac;
    border-radius: 0.2em;
}

pre {
    margin: 0.5em;
    padding: 0.5em;
    border-radius: 0.5em;
}

a {
  color: #bbb;
}
.bg-primary {
  background-color: #a00000 !important;
}

.nav-switch {
  color: #050505;
}

.nav-link {
  color: #050505;
}

.nav-link:hover {
  color: #777;
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

.navbar-toggler {
  border: 1px solid #a00000;
  font-size: unset;
}

.card-subtitle {
  font-size: small;
  color: #777 !important;
}

.card-subtitle .date {
  float: right;
}

.sort-form {
  margin-left: auto !important;
}

input[type=radio] {
  display: none;
}

label img {
  padding: 0;
  margin: 0 5px 0 0;
  max-width: 100%;
  display: unset;
}

.overview-title {
  color: #a00000;
}

.offcanvas {
  background-color: #a00000;
}

.truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 75;
}

.image-container {
  position: relative;
}

.thumbnail-text {
  position: absolute;
  text-align: center;
  width: 100%;
  color: #a00000;
  font-weight: bold;
  background: rgb(0, 0, 0);/* Fallback color */
  background: rgba(0, 0, 0, 0.5);/* Black background with opacity */
  padding: 15px;
  bottom: 0;
}

/*
 * Footer
 */
 .blog-footer {
  padding: 1rem 0;
  margin-top: 40px;
  color: #151515;
  text-align: center;
  font-size: small;
  background-color: #444;
  border-top: .05rem solid #000;
}
.blog-footer p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
## <= 1280px
--------------------------------------------------------------*/
@media screen and (max-width: 1280px) {
  img {
    max-width: 90%;
    padding: 10px;
    margin: auto;
    display: block;
  }

  .content {
    max-width: 95%;
    margin: 0 auto;
    padding: 0 0.5em;
    font-size: 14pt;
  }

  .postHead {
    font-size: 12pt;
    color: #444;
  }

  .projectHeading {
    font-size: 24pt;
    color: #a00000;
    padding: 20px;
    margin-top: 20px;
  }

  ul.menu {
    background-color: #050505;
    color: #ffffff;
    font-weight: 900;
    font-size: 20pt;
    margin: 0;
    padding: 0 0 0 1em;
    white-space: nowrap;
    overflow: hidden;
  }

  ul.menu div#burger-symbol {
    display: block;
    float: right;
    margin: 0;
    cursor: pointer;
    padding: 0.9em 0.5em 0em 2em;
    position: relative;
  }

  ul.menu h1#menu-heading {
    display: none;
    font-weight: lighter;
    font-size: 18pt;
  }

  ul.overview li a {
    color: #a00000;
    text-decoration: underline;
    cursor: pointer;
    font-size: 20pt;
  }
}

/*--------------------------------------------------------------
## >= 1280px
--------------------------------------------------------------*/
@media screen and (min-width: 1280px) {
  img {
    max-width: 80%;
    padding: 20px;
    margin: auto;
    display: block;
  }

  .content {
    max-width: 75%;
    margin: 0 auto;
    padding: 0 0.5em;
  }

  .postHead {
    font-size: 11pt;
    color: #444;
  }

  .projectHeading {
    font-size: 16pt;
    color: #a00000;
    margin-top: 20px;
  }

  ul.menu {
    background-color: #050505;
    color: #ffffff;
    font-weight: 900;
    font-size: 16pt;
    margin: 0;
    padding: 0 0 0 1em;
    white-space: nowrap;
    overflow: hidden;
  }

  ul.menu div#burger-symbol {
    display: block;
    float: right;
    margin: 0;
    cursor: pointer;
    padding: 0.7em 0.5em 0em 2em;
    position: relative;
  }

  ul.menu h1#menu-heading {
    display: none;
    font-weight: lighter;
    font-size: 16pt;
  }

  ul.overview li a {
    color: #a00000;
    text-decoration: underline;
    cursor: pointer;
    font-size: 13pt;
  }
}

.post {
    padding: 1.5em;
    margin: 1em auto;
    background-color: #050505;
    border-radius: 0.5em;
    border-width: 1px;
    border-color: #444;
    border-style: solid;
}

.post p:first-child {
    margin-top: 0.3em;
}

.postHead .date {
    float: right;
}

ul.menu a {
    color: #a00000;
    text-decoration: none;
    cursor: pointer;
}

ul.menu a:hover {
    text-decoration: underline;
    color: #acacac;
}

ul.menu li {
    display: inline-block;
    margin: 1em;
}

ul.overview li a:hover {
    text-decoration: underline;
    color: #acacac;
}