@import url('https://fonts.googleapis.com/css?family=PT+Mono');

/* body,
html {
  position: relative;
  width: 100%;
  height: 100%;
  background: #072146;;
  font-family: "PT Mono", monospace;
} */

.masonry {
  column-count: 1;
  column-gap: 0;
  counter-reset: item-counter;
}

@media screen and (min-width: 400px) {
  .masonry {
    column-count: 2;
  }
  .item {
    font-size: smaller;
  }
}

@media screen and (min-width: 600px) {
  .masonry {
    column-count: 3;
  }
}

@media screen and (min-width: 800px) {
  .masonry {
    column-count: 4;
  }
}

@media screen and (min-width: 1100px) {
  .masonry {
    column-count: 5;
  }
}

.item {
  box-sizing: border-box;
  break-inside: avoid;
  /* padding: 5px; */
  counter-increment: item-counter;
  opacity: 0.8;
}

.item__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* height: 240px; */
  font-size: 40px;
  color: white;
  background: currentColor;
  box-sizing: border-box;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
}

.item__content:hover {
  background: whitesmoke; /* lighten(#720026, 8%) approx */
}

.item__content:before {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 13px;
  width: 8em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  font-weight: bold;
  background-color: #222;
  /* content: counter(item-counter); */
  content: '\2605 \2605 \2605 \2605 \2605'; 
  
  color: #f1c40f; /* Professional Gold/Yellow color */
  letter-spacing: 2px;
}

.item__content:after {
  color: #2f0003; /* darken(#4F000B, 10%) approx */
  /* content: 'ಠ‿ಠ'; */
}

/* SMALL */
.item__content--small {
  color: white;
  height: 100px;
}

.item__content--small:hover {
  background: whitesmoke; /* lighten(#CE4257, 8%) approx */
}

/* .item__content--small:after {
  content: '♥◡♥';
} */

/* MEDIUM */
.item__content--medium {
  color: white;
  height: 175px;
}

.item__content--medium:hover {
  background: whitesmoke; /* lighten(#FFC093, 8%) approx */
}

/* .item__content--medium:after {
  content: '◔ᴗ◔';
} */

/* LARGE */
.item__content--large {
  color: white;
  height: 280px;
}

.item__content--large:hover {
  background: whitesmoke; /* lighten(#FF7F51, 8%) approx */
}

/* .item__content--large:after {
  content: 'ಠ_๏';
} */


.name {
  font-size: 18px;
  font-weight: bold;
}