/* DARK BACKGROUND */
/* DARK TEXT */
/* DARK BORDER */
/* LIGHT BACKGROUND */
/* LIGHT TEXT */
/* LIGHT BORDER */
.swiper {
  width: 100%;
  height: 100%; }

.project-listing {
  margin-bottom: 48px; }
  .project-listing .info {
    margin-top: 10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: start;
        align-items: flex-start; }
  .project-listing .avatar {
    background-color: #ccc;
    background-size: cover;
    background-position: center center;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: 3px; }
  .project-listing .title-author-metrics {
    -ms-flex: 1;
        flex: 1; }
  .project-listing .title-author-metrics ul {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1; }
    .project-listing .title-author-metrics ul li h3 {
      font-size: 16px;
      margin-bottom: 0; }
  .project-listing .title-author-metrics .metrics {
    font-size: 12px;
    margin: 0; }
    .project-listing .title-author-metrics .metrics p {
      color: black;
      margin-bottom: 0;
      text-align: right; }
    .project-listing .title-author-metrics .metrics span:not(:last-child) {
      margin-right: 17px; }
    .project-listing .title-author-metrics .metrics i {
      color: #6e6d7a;
      margin: 0 1px 0 0; }
  .project-listing .title {
    font-size: 16px !important;
    font-weight: bold;
    line-height: 1.3;
    text-decoration: none;
    display: inline-block;
    color: white; }
  .project-listing .title:hover .photo > .overlay {
    display: block; }
  .project-listing .author {
    font-size: 14px;
    font-weight: 300;
    text-decoration: none;
    display: inline-block;
    color: black;
    word-break: break-all; }
  .project-listing .photo {
    background-color: black;
    background-size: cover;
    background-position: center center;
    aspect-ratio: 1.26;
    width: 100%;
    position: relative;
    border-radius: 4px; }
    .project-listing .photo .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #f44336;
      opacity: 0.3;
      z-index: 2;
      display: none;
      border-radius: 4px; }
    .project-listing .photo:hover .overlay {
      display: block; }
    .project-listing .photo .difficulty {
      z-index: 3;
      position: absolute;
      top: 15px;
      right: 15px;
      text-transform: uppercase;
      padding: 3px 6px;
      font-size: 10px;
      letter-spacing: 1px;
      color: white;
      font-weight: 500;
      border-radius: 4px; }
    .project-listing .photo .easy {
      background: #558b2f; }
    .project-listing .photo .normal {
      background: #f9a825; }
    .project-listing .photo .hard {
      background: #d84315; }
    .project-listing .photo .fa-thumbs-up {
      position: absolute;
      top: 15px;
      right: 15px;
      color: #ffffff5c;
      padding: 7px;
      background: #999;
      border-radius: 50%;
      z-index: 3; }
      .project-listing .photo .fa-thumbs-up:hover {
        color: white; }
    .project-listing .photo .fa-folder-open {
      position: absolute;
      top: 15px;
      right: 60px;
      color: #ffffff5c;
      padding: 7px;
      background: #999;
      border-radius: 50%;
      z-index: 3; }
      .project-listing .photo .fa-folder-open:hover {
        color: white; }

body.light-mode .project-listing .title {
  color: black; }