html{
}



#boring{
  margin-top: 30px;
  font-family:  -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica,helvetica neue,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
  line-height: 1.9em;
}

.slug{
  margin-left: 20px;
  text-decoration: none;
  pointer-events: none;
  position: relative;
  top: -20px;
}

.row{
  cursor: pointer;
  display: block;
  text-decoration: none;
  white-space: nowrap;
  font-family: monospace; 
  /*font-family: Consolas, 'Lucida Console', monospace; */
  display: inline-block;
  width: 370px;
  font-size: 14px;

  user-select: none;
  -webkit-tap-highlight-color: transparent;

}
.row:hover .slug{
  text-decoration: underline;
}
.row:hover .month, .row:hover .year{
  opacity: 1 !important;
}

.row:hover .thumbnail{
  border-bottom-width: 2px;
  margin-bottom: -1px;
}

.row .slug{
  color: #333;
}
.row.is-top .slug{
  color: #f0f;
  font-weight: 600;
}

.row.is-top .thumbnail{
  /*border: 1px solid purple;*/
}


.thumbnail{
  background-size: cover;
  background-position: center center;
  width: 100px;
  height: 50px;
  display: inline-block;
  border: 1px solid #333;
  position: relative;
  /*top: 18px;*/
  /*margin-left: 20px;*/
}

.month, .year{
  color: #999;
  font-size: 12px;
}

.header{
  font-family:  -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica,helvetica neue,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
  font-family: monospace;
}

.header a, .header span{
/*  opacity: 1;
  font-weight: 300;
*/}

.header-right{
  margin-right:  32px;
}



html{
  background: #f1f1f1;;
}

.year-label{
  position: relative;
  color: #333;
  font-family: monospace;
  left: -80px;
  margin-bottom: 20px;
  height: 0px;
  top: 30px;
  font-size: 12px;
}

.year{
  margin-bottom: 40px;
}

@media (max-width: 930px){

  .row{
    width: 100%;
  }

  .year-label{
    top: -20px;
    left: 0px;
    font-size: 14px;
  }

  .year:first-child .year-label{
    display: none;
  }

  .header-right{
    margin-right: 0px;
  }

}