styles.css

/* css styles */


.hexBadges {
  position: relative;
  width: 500px;
  margin-top: -50px;
  height: 600px; }
  .hexBadges img {
    width: 120px;
    height: 139px;
    position: absolute;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.25s;
    -moz-transition-duration: 0.25s;
    -o-transition-duration: 0.25s;
    transition-duration: 0.25s; }
    .hexBadges img.r0.c0, .hexBadges img.r2.c0, .hexBadges img.r4.c0 {
      left: 0; }
    .hexBadges img.r0.c1, .hexBadges img.r2.c1, .hexBadges img.r4.c1 {
      left: 125px; }
    .hexBadges img.r0.c2, .hexBadges img.r2.c2, .hexBadges img.r4.c2 {
      left: 250px; }
    .hexBadges img.r0.c3, .hexBadges img.r2.c3, .hexBadges img.r4.c3 {
      left: 375px; }
    .hexBadges img.r1.c0, .hexBadges img.r3.c0, .hexBadges img.r5.c0 {
      left: 62px; }
    .hexBadges img.r1.c1, .hexBadges img.r3.c1, .hexBadges img.r5.c1 {
      left: 187px; }
    .hexBadges img.r1.c2, .hexBadges img.r3.c2, .hexBadges img.r5.c2 {
      left: 312px; }
    .hexBadges img.r1.c3, .hexBadges img.r3.c3, .hexBadges img.r5.c3 {
      left: 437px; }
    .hexBadges img.r0 {
      top: 0px; }
    .hexBadges img.r1 {
      top: 107.5px; }
    .hexBadges img.r2 {
      top: 215px; }
    .hexBadges img.r3 {
      top: 322.5px; }
    .hexBadges img.r4 {
      top: 430px; }
    .hexBadges img.r5 {
      top: 537.5px; }
      
      
@media screen and (max-width: 1023px) {
  .hexBadges {
    width: 350px; }
    .hexBadges img.r0.c2, .hexBadges img.r2.c2, .hexBadges img.r4.c2 {
      left: 125px; }
    .hexBadges img.r1.c2, .hexBadges img.r3.c2, .hexBadges img.r5.c2 {
      left: 187px; } }


/* some tweaks added later*/
code {
  margin: 0;
  padding: 1px 2px;
  border: none;
  color: inherit;
}

pre {
  padding: 0.25em 0.5em;
}