body {
  font-family: "Inter", Arial, sans-serif;
  background: #e3e8ed;
  color: #111013;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Inter", Arial, sans-serif;
  font-weight: 600;
}

a, a:hover, a:active {
  color: #01a7b9;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

a:hover {
  border-bottom: 1px solid #00bfb6;
}

.logo {
  width: 40px;
  margin-left: 2px;
}

header {
  margin-top: 2rem !important;
}

footer {
  margin-top: 2rem;
}

footer a {
  color: #888;
}

.text-muted {
  color: #474c51 !important;  
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
}

.icon-list li::before {
  display: block;
  flex-shrink: 0;
  width: 1.5em;
  height: 1.5em;
  margin-right: .5rem;
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto;
}


.home h1 {
  font-size: 4.5rem;
  font-weight: 800;
}


/**
 * Themes
 **/

/* Flashy Theme */

body.flashy {
  color: #accaab;
  background: #2f2f2f;
}

.flashy h1, 
.flashy h2, 
.flashy h3, 
.flashy h4, 
.flashy h5,
.flashy h6 {
  color: #51da4c;
}

.flashy .text-muted {
  color: #accaab !important;
}

.flashy a, a:active, a:visited {
  color: #fff;
  border-bottom: 1px dotted #51da4c;
}

.flashy a:hover {
  border-bottom: 1px solid #51da4c;
}

.flashy footer.border-top {
  border-top-color: #808d80 !important;
  opacity: .25;
}

/**
 * Project pages
 */

.project-description {
  margin-top: 2rem;
}

.project-screenshots {
  margin-top: 3rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.project-screenshots img {
  width: 100%;
  height: auto;
  background: #f8f9fa;
  border-radius: 4px;
  margin-top: 1rem;
}

.project-links {
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .project-screenshots {
    max-width: 100%;
  }
}

/**
 * Blog images
 */

.post-hero {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 2rem auto;
  border-radius: 4px;
}