<commit_before>    body{background-color:#111;}
    nav{height:100px;position: absolute;top:0;left:0;right: 0;z-index: 9999999;}
    footer{position:absolute;bottom:0;left:0;right:0;margin:0 30px;}
    nav ul{list-style: none;display:inline-flex;float: right;padding-top: 15px;}
    nav li{padding:10px;}
    nav ul li{margin:0 30px;}
    .bg-stage{
        overflow-x: hidden;
        overflow-y: hidden;
        padding:7% 0 20% 0;
        margin:5% 5% 0 5%;
        background-image: url("../images/stages.png");
        background-size:80%;
        background-position:center center;
        background-color: #a0d169;
        height: auto;
        background-repeat: no-repeat;
    }
    h2 {font-family:ArcadeClassic;color:#252524;}

    .bg-stage .unlocked-stage img {padding:30px;height: 270px !important; margin:0 20px;border:solid 1px #000;background-color: rgba(123, 123, 120, .9) !important;border-radius:5px;}
    .bg-stage .locked-stage img {padding:30px;height: 270px !important; margin:0 20px;border:solid 1px #000;background-color: rgba(51, 51, 51, .9) !important;border-radius:5px;}
    
    .bg-stage .unlocked-stage img:hover {padding:10px;transition:.5s ease-in-out;border:solid 5px #242423;}
    .bg-stage .locked-stage img:hover {padding:10px;transition:.5s ease-in-out;border:solid 5px #7b7b78;}
    nav a.navbar-brand{padding: 5px !important;
    width: 100px;
    max-width: 120px;
    transition: .5s;
    margin-left:40px;}
    button.level-btn {box-shadow:1px 1px 5px #000;border-radius:10px;border-width:5px;width:80%;margin:0 auto;padding:0;background:#334a59;}
    button.level-btn h3{font-family: ArcadeClassic !important;color:#fff;cursor:pointer; margin:5px;}
    button.level-btn:hover{cursor:pointer;}
img {
}
    /*
    .bg-stage-3{position: relative;background:#66b9bf;z-index:1; margin:0;}
    .bg-stage-3:after{position:absolute;border:40px solid #333;bottom:0;left:-15%;height:400px;;overflow-x:hidden;content:'';transform:skew(60deg, 0deg);background-color: #777;}
    .bg-stage-3:before{position:absolute;border:40px solid #333;bottom:0;right:-20%;height:400px;overflow-x:hidden;content:'';transform:skew(-60deg, 0deg);background-color: #777;}
    .bg-stage img{margin:0 auto;}
    div.stage-3{position: absolute;height:0px;}
    .bg-stage-3 a{z-index: 999999999;}

    .bg-stage-2{position: relative;padding:0;z-index:1;}
    .bg-stage-2:after{position:absolute;border:40px solid #333;top:0;left:-35%;z-index:1;height:400px;overflow-x:hidden;content:'';transform:skew(-60deg, 0deg);background-color: #777;}
    .bg-stage-2:before{position:absolute;border:40px solid #333;top:0;right:-30%;z-index:1;height:400px;overflow-x:hidden;content:'';transform:skew(60deg, 0deg);background-color: #777;}
    div.stage{content:'';position:absolute;height:0px;top:0;transition:.7s ease-in-out;}
    div.stage:hover{display:block;transition:.7s ease-in-out;height:270px;background-color: #66b9bf;z-index: 3;border-radius: 10px;}
    */
    div.stage:before{
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    div.stage:hover{background-color: #008b95; transition: .5s;border:5px solid #777;border-radius: 30px;}
    div.stage {display:inline-block;vertical-align: middle;
        background-color: #fff;}
    div.stage img{display:inline-block;vertical-align: middle;}
    .wrapper-1, .wrapper-2 {margin:10px auto;z-index: 99999;overflow-x: hidden;}
    .wrapper-1 div.stage{max-height:210px;height: 100%;}
    .wrapper-2 div.stage{max-height:260px;height: 100%;}

    .wrapper-1 img {max-height: 200px;padding:10px;}
    .wrapper-2 img {max-height: 250px;padding:10px;}
    div.stage:hover img{transition:.5s ease-in-out;padding:0px;}
    /* POPUP */
    .popup-1,.popup-2,.popup-3,.popup-4,.popup-5 {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
span.locked {position:absolute;top:80px;bottom:0;left:0;right: 0;font-size:120px;color:#7b7b78 !important;text-shadow:1px 1px #242423;text-align:center;color:#ffce12;}
span.locked:hover, .locked-stage:hover span.locked{animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;}
span.unlocked {position:absolute;top:80px;bottom:0;left:0;right: 0;font-size:120px;color:#ffce12 !important;text-shadow:1px 1px #242423;text-align:center;color:#ffce12;}  
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.popuptext-1 p,.popuptext-2 p,.popuptext-3 p,.popuptext-4 p,.popuptext-5 p{
color:#252524;
}
/* The actual popup */
.popup-1 .popuptext-1 {
    visibility: hidden;
    width: 250px;
    background-color: #ebea70;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 999;
    top: 100%;
    left: 38%;
    margin-left: -80px;
    padding:5px;
    border:solid 3px #252524;
}
.show h2{margin:7px !important;}
/* Popup arrow */
.popup-1 .popuptext-1::after,.popup-2 .popuptext-2::after,.popup-3 .popuptext-3::after,.popup-4 .popuptext-4::after {
    content: "";
    position: absolute;
    top: -20%;
    left: 50%;
    margin-left: -20px;
    border-width: 20px;
    border-style: solid;
    border-color: transparent  transparent #242423 transparent;
}

.popup-5 .popuptext-5::after{
    content: "";
    position: absolute;
    top: -27%;
    left: 50%;
    margin-left: -20px;
    border-width: 20px;
    border-style: solid;
    border-color: transparent  transparent #242423 transparent;
}

/* Toggle this class - hide and show the popup */
.popup-1 .show,.popup-1,.popup-2 .show,.popup-2,.popup-3 .show,.popup-3,.popup-4 .show,.popup-4,.popup-5 .show,.popup-5 {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/**/
.popuptext p{
color:#252524;
}
/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 250px;
    background-color: #ebea70;
    color: #fff;
    text-align: center;
    border-radius: 20px;
    padding: 8px 0;
    position: absolute;
    z-index: 999;
    top: 100%;
    left: 38%;
    margin-left: -80px;
    padding:5px;
    border:solid 3px #252524;
    box-shadow: 3px 3px 10px #000;
}
.show h2{margin:7px !important;
    line-height: 20px;}
/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: -40px;
    left: 50%;
    margin-left: -20px;
    border-width: 20px;
    border-style: solid;
    border-color: transparent  transparent #242423 transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show,.popup {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}
/**/

.unlocked-stage > img{animation: infinite pulse 1.5s;}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 1);
  }
  30% {
      -webkit-box-shadow: 0 0 0 20px rgba(204,169,44, 0.7);
  }
  70% {
      -webkit-box-shadow: 0 0 0 20px rgba(204,169,44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 1);
    box-shadow: 0 0 0 0 rgba(204,169,44, 1);
  }
  30% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.7);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.7);
  }
  70% {
      -moz-box-shadow: 0 0 0 20px rgba(204,169,44, 0);
      box-shadow: 0 0 0 20px rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}/*
@keyframes pulse {
    0%{padding:10px;}
    30%{padding:5px;}
    50%{padding:3px;}
    70%{padding:5px;}
    100%{padding:10px;}
}
@keyframes pulse {
    0%{height:100%;}
    30%{height:50%;}
    50%{height:30%;}
    70%{height:50%;}
    100%{height:100%;}
}*/
    /*
    div.stage:before{transition:.5s;position:absolute;content: ''; border-right: solid 40px #fff;height: 0px !important;border-top:solid 40px #fff;left:10px;top:0;z-index:-1;transform:skew(60deg, 0deg);}
    div.stage:after{transition:.5s;position:absolute;content: ''; border-right: solid 40px #fff;height: 0px !important;border-top:solid 40px #fff;right:10px;top:0;z-index:-1;transform:skew(60deg, 0deg);}
    div.stage:hover:before{transition:.5s;position:absolute;content: ''; border-right: solid 40px #333;border-top:solid 40px #333;height: 200px !important;left:10px;top:0;z-index:-1;transform:skew(60deg, 0deg);}
    div.stage:hover:after{transition:.5s;position:absolute;content: ''; border-right: solid 40px #333;border-top:solid 40px #333;height: 200px !important;right:10px;top:0;z-index:-1;transform:skew(60deg, 0deg);}

*/<commit_msg>css draft commit<commit_after>    body{background-color:#111;}
    nav{height:100px;position: absolute;top:0;left:0;right: 0;z-index: 9999999;}
    footer{position:absolute;bottom:0;left:0;right:0;margin:0 30px;}
    nav ul{list-style: none;display:inline-flex;float: right;padding-top: 15px;}
    nav li{padding:10px;}
    nav ul li{margin:0 30px;}
    .bg-stage{
        overflow-x: hidden;
        overflow-y: hidden;
        padding:7% 0 20% 0;
        margin:5% 5% 0 5%;
        background-image: url("../images/stages.png");
        background-size:80%;
        background-position:center center;
        background-color: #a0d169;
        height: auto;
        background-repeat: no-repeat;
    }
    h2 {font-family:ArcadeClassic;color:#252524;}

    .bg-stage .unlocked-stage img {padding:30px;height: 270px !important; margin:0 20px;border:solid 1px #000;background-color: rgba(123, 123, 120, .9) !important;border-radius:5px;}
    .bg-stage .locked-stage img {padding:30px;height: 270px !important; margin:0 20px;border:solid 1px #000;background-color: rgba(51, 51, 51, .9) !important;border-radius:5px;}
    
    .bg-stage .unlocked-stage img:hover {padding:10px;transition:.5s ease-in-out;border:solid 5px #242423;}
    .bg-stage .locked-stage img:hover {padding:10px;transition:.5s ease-in-out;border:solid 5px #7b7b78;}
    nav a.navbar-brand{padding: 5px !important;
    width: 100px;
    max-width: 120px;
    transition: .5s;
    margin-left:40px;}
    button.level-btn {box-shadow:1px 1px 5px #000;border-bottom:solid 5px #aaa;border-top:solid 5px #ccc;border-radius:10px;border-width:5px;width:80%;margin:0 auto;padding:0;background:#333;}
    button.level-btn h3{font-family: ArcadeClassic !important;color:#fff;cursor:pointer; margin:5px;}
    button.level-btn:hover{cursor:pointer;}
img {
}
    /*
    .bg-stage-3{position: relative;background:#66b9bf;z-index:1; margin:0;}
    .bg-stage-3:after{position:absolute;border:40px solid #333;bottom:0;left:-15%;height:400px;;overflow-x:hidden;content:'';transform:skew(60deg, 0deg);background-color: #777;}
    .bg-stage-3:before{position:absolute;border:40px solid #333;bottom:0;right:-20%;height:400px;overflow-x:hidden;content:'';transform:skew(-60deg, 0deg);background-color: #777;}
    .bg-stage img{margin:0 auto;}
    div.stage-3{position: absolute;height:0px;}
    .bg-stage-3 a{z-index: 999999999;}

    .bg-stage-2{position: relative;padding:0;z-index:1;}
    .bg-stage-2:after{position:absolute;border:40px solid #333;top:0;left:-35%;z-index:1;height:400px;overflow-x:hidden;content:'';transform:skew(-60deg, 0deg);background-color: #777;}
    .bg-stage-2:before{position:absolute;border:40px solid #333;top:0;right:-30%;z-index:1;height:400px;overflow-x:hidden;content:'';transform:skew(60deg, 0deg);background-color: #777;}
    div.stage{content:'';position:absolute;height:0px;top:0;transition:.7s ease-in-out;}
    div.stage:hover{display:block;transition:.7s ease-in-out;height:270px;background-color: #66b9bf;z-index: 3;border-radius: 10px;}
    */
    div.stage:before{
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    div.stage:hover{background-color: #008b95; transition: .5s;border:5px solid #777;border-radius: 30px;}
    div.stage {display:inline-block;vertical-align: middle;
        background-color: #fff;}
    div.stage img{display:inline-block;vertical-align: middle;}
    .wrapper-1, .wrapper-2 {margin:10px auto;z-index: 99999;overflow-x: hidden;}
    .wrapper-1 div.stage{max-height:210px;height: 100%;}
    .wrapper-2 div.stage{max-height:260px;height: 100%;}

    .wrapper-1 img {max-height: 200px;padding:10px;}
    .wrapper-2 img {max-height: 250px;padding:10px;}
    div.stage:hover img{transition:.5s ease-in-out;padding:0px;}
    /* POPUP */
    .popup-1,.popup-2,.popup-3,.popup-4,.popup-5 {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
span.locked {position:absolute;top:80px;bottom:0;left:0;right: 0;font-size:120px;color:#7b7b78 !important;text-shadow:1px 1px #242423;text-align:center;color:#ffce12;}
span.locked:hover, .locked-stage:hover span.locked{animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;}
span.unlocked {position:absolute;top:80px;bottom:0;left:0;right: 0;font-size:120px;color:#ffce12 !important;text-shadow:1px 1px #242423;text-align:center;color:#ffce12;}  
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.popuptext-1 p,.popuptext-2 p,.popuptext-3 p,.popuptext-4 p,.popuptext-5 p{
color:#252524;
}
/* The actual popup */
.popup-1 .popuptext-1 {
    visibility: hidden;
    width: 250px;
    background-color: #ebea70;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 999;
    top: 100%;
    left: 38%;
    margin-left: -80px;
    padding:5px;
    border:solid 3px #252524;
}
.show h2{margin:7px !important;}
/* Popup arrow */
.popup-1 .popuptext-1::after,.popup-2 .popuptext-2::after,.popup-3 .popuptext-3::after,.popup-4 .popuptext-4::after {
    content: "";
    position: absolute;
    top: -20%;
    left: 50%;
    margin-left: -20px;
    border-width: 20px;
    border-style: solid;
    border-color: transparent  transparent #242423 transparent;
}

.popup-5 .popuptext-5::after{
    content: "";
    position: absolute;
    top: -27%;
    left: 50%;
    margin-left: -20px;
    border-width: 20px;
    border-style: solid;
    border-color: transparent  transparent #242423 transparent;
}

/* Toggle this class - hide and show the popup */
.popup-1 .show,.popup-1,.popup-2 .show,.popup-2,.popup-3 .show,.popup-3,.popup-4 .show,.popup-4,.popup-5 .show,.popup-5 {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/**/
.popuptext p{
color:#252524;
}
/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 250px;
    background-color: #ebea70;
    color:#252524;
    color: #fff;
    text-align: center;
    border-radius: 20px;
    padding: 8px 0;
    position: absolute;
    z-index: 999;
    top: 100%;
    left: 38%;
    margin-left: -80px;
    padding:5px;
    border:solid 3px #252524;
    box-shadow: 3px 3px 10px #000;
}
.show h2{margin:7px !important;
    line-height: 20px;}
/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: -40px;
    left: 50%;
    margin-left: -20px;
    border-width: 20px;
    border-style: solid;
    border-color: transparent  transparent #242423 transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show,.popup {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}
/**/

.unlocked-stage > img{animation: infinite pulse 1.5s;}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 1);
  }
  30% {
      -webkit-box-shadow: 0 0 0 20px rgba(204,169,44, 0.7);
  }
  70% {
      -webkit-box-shadow: 0 0 0 20px rgba(204,169,44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 1);
    box-shadow: 0 0 0 0 rgba(204,169,44, 1);
  }
  30% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.7);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.7);
  }
  70% {
      -moz-box-shadow: 0 0 0 20px rgba(204,169,44, 0);
      box-shadow: 0 0 0 20px rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}/*
@keyframes pulse {
    0%{padding:10px;}
    30%{padding:5px;}
    50%{padding:3px;}
    70%{padding:5px;}
    100%{padding:10px;}
}
@keyframes pulse {
    0%{height:100%;}
    30%{height:50%;}
    50%{height:30%;}
    70%{height:50%;}
    100%{height:100%;}
}*/
    /*
    div.stage:before{transition:.5s;position:absolute;content: ''; border-right: solid 40px #fff;height: 0px !important;border-top:solid 40px #fff;left:10px;top:0;z-index:-1;transform:skew(60deg, 0deg);}
    div.stage:after{transition:.5s;position:absolute;content: ''; border-right: solid 40px #fff;height: 0px !important;border-top:solid 40px #fff;right:10px;top:0;z-index:-1;transform:skew(60deg, 0deg);}
    div.stage:hover:before{transition:.5s;position:absolute;content: ''; border-right: solid 40px #333;border-top:solid 40px #333;height: 200px !important;left:10px;top:0;z-index:-1;transform:skew(60deg, 0deg);}
    div.stage:hover:after{transition:.5s;position:absolute;content: ''; border-right: solid 40px #333;border-top:solid 40px #333;height: 200px !important;right:10px;top:0;z-index:-1;transform:skew(60deg, 0deg);}

*/



.hexrow > div.hexagon {
    width: 100px;
    height: 173.2px; /* ( width x cos(30) ) x 2 */
    /* For margin:
    right/left = ( width x sin(30) ) makes no overlap 
    right/left = (( width x sin(30) ) / 2) leaves a narrow separation
    */
    margin: 0 25px; 
    position: relative;
    /*background-image: url("http://localhost/progmia/assets/images/home_bg.jpg");*/
    background: #fff;
    background-position: -50px 0; /* -left position -1 x width x sin(30) */
    background-repeat: no-repeat;
    background-size: auto 120%;
    color: #000000;
    text-align: center;
    line-height: 173.2px; /*equals height*/
    display: inline-block;
    opacity: .7;
}

.hexrow > div.hexagon:hover {
    opacity: 1;
    text-shadow: 1px 1px 2px #000;
    transition:.5s;
}
.hexrow > div.hexagon:nth-child(odd) {
    top: 43.3px; /* ( width x cos(30) / 2 ) */
}

.hexrow > div.hexagon:nth-child(even) {
    top: -44.8px; /* -1 x( ( width x cos(30) / 2) + (hexrow bottom margin / 2)) */ 
}

.hexrow > div.hexagon > div.first {
    background: #fff;
    position: absolute;
    width: 100%;
    height: 100%; 
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    background-image: inherit;
    
    -ms-transform:rotate(60deg); /* IE 9 */
    -moz-transform:rotate(60deg); /* Firefox */
    -webkit-transform:rotate(60deg); /* Safari and Chrome */
    -o-transform:rotate(60deg); /* Opera */
    transform:rotate(60deg);
}

.hexrow > div.hexagon > div.first:before {
    content: '';
    position: absolute;
    width: 200px; /* width of main + margin sizing */
    height: 100%;
    background-image: inherit;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto 120%;
    bottom: 0;
    left: 0;
    z-index: 1;
    
    -ms-transform:rotate(-60deg) translate(-150px, 0); /* IE 9 */
    -moz-transform:rotate(-60deg) translate(-150px, 0); /* Firefox */
    -webkit-transform:rotate(-60deg) translate(-150px, 0); /* Safari and Chrome */
    -o-transform:rotate(-60deg) translate(-150px, 0); /* Opera */
    transform:rotate(-60deg) translate(-150px, 0);
    
    -ms-transform-origin: 0 0; /* IE 9 */
    -webkit-transform-origin: 0 0; /* Safari and Chrome */
    -moz-transform-origin: 0 0; /* Firefox */
    -o-transform-origin: 0 0; /* Opera */
    transform-origin: 0 0;
}

.hexrow > div.hexagon > div.second {
    background: #fff;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    overflow: hidden;
    background-image: inherit;
    
    -ms-transform:rotate(-60deg); /* IE 9 */
    -moz-transform:rotate(-60deg); /* Firefox */
    -webkit-transform:rotate(-60deg); /* Safari and Chrome */
    -o-transform:rotate(-60deg); /* Opera */
    transform:rotate(-60deg);
}
.navbar-game {}
.navbar-game ul{list-style: none;}

.hexrow > div.hexagon > div.second:before {
    content: '';
    position: absolute;
    width: 200px; /* starting width + margin sizing */
    height: 100%;
    background-image: inherit;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto 120%;
    bottom: 0;
    left: 0;
    z-index: 1;
    
    /*translate properties are initial width (100px) and half height (173.2 / 2 = 86.6) */
    -ms-transform:rotate(60deg) translate(100px, 86.6px); /* IE 9 */
    -moz-transform:rotate(60deg) translate(100px, 86.6px); /* Firefox */
    -webkit-transform:rotate(60deg) translate(100px, 86.6px); /* Safari and Chrome */
    -o-transform:rotate(60deg) translate(100px, 86.6px); /* Opera */
    transform:rotate(60deg) translate(100px, 86.6px);
    
    -ms-transform-origin: 100% 0; /* IE 9 */
    -webkit-transform-origin: 100% 0; /* Safari and Chrome */
    -moz-transform-origin: 100% 0; /* Firefox */
    -o-transform-origin: 100% 0; /* Opera */
    transform-origin: 100% 0;
}

.hexrow > div.hexagon > span {
    display: inline-block;
    margin: 50px -30px;
    line-height: 1.1;
    vertical-align: middle;
    white-space: normal; 
    font-size:80px;
    font-family: Calibri;
    font-weight: 800;
    color:#fff;
}
{'fraction_non_alphanumeric': 0.171739227307161, 'fraction_numerical': 0.08698364600507999, 'mean_word_length': 3.4343015214384507, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 4, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5152690', 'n_tokens_mistral': 9674, 'n_tokens_neox': 8304, 'n_words': 1642}