:root {
    /* Change this to change the appearance of the hexaons */
    --hex-width: 100px; 
    --hex-between: 10px;
    
    /* Other hexagon dimentions */
    --hex-height: calc(var(--hex-width) / 1.73 /* sqrt(3) */);
    --hex-margin: calc(var(--hex-width) / 2);
    --hex-border: calc(var(--hex-margin) / 1.73 /* sqrt(3) */);
    --hex-transition: all .2s ease;
    
    /* Colors */
    --color-hex-default: #000000;
    --color-hex-hover:   #FFFFFF;
    --color-angular:     #DD0031;
    --color-oracle:      #C74634;
    --color-selenium:   #00b400;
    --color-php:        #7a86b8;
    --color-adobe:       #db2c29;
    --color-robot:         #00c0b5;
    --color-gulp:        #DA4648;
    --color-haskell:     #5D4F85;
    --color-html:        #E34F26;
    --color-javascript:  #F7DF1E;
    --color-meteor:      #DE4F4F;
    --color-python:      #3776AB;
    --color-rails:       #CC0000;
    --color-java:        #0071b8;
    --color-android:     #3DDA84;
    --color-nodejs:      #026e00;
    --color-ios-swift:   #b3b3b3;
    --color-unreal:      #08888c;
    --color-flutter:     #33ace4;
    --color-css:         #214ce5;
  }
  
  /* Hexagons */
  .hexagon-container {
    display: grid;
    grid-template-columns: var(--hex-width) var(--hex-width) var(--hex-width) var(--hex-width) ;
    grid-auto-rows: calc(var(--hex-width) - 28.87px/2);
    grid-gap: var(--hex-between) var(--hex-between);
    padding-bottom: var(--hex-border);
  }
  .hexagon {
    align-items: center;
    background-color: var(--color-hex-default);
    cursor: pointer;
    display: flex;
    fill: white;
    height: var(--hex-height);
    justify-content: center;
    margin: var(--hex-border) 0;
    position: relative;
    transition: var(--hex-transition);
    width: var(--hex-width);
  }
  .hexagon img{max-width: 45px;}
  .hexagon::after,
  .hexagon::before {
    border-left: var(--hex-margin) solid transparent;
    border-right: var(--hex-margin) solid transparent;
    content: "";
    left: 0;
    position: absolute;
    transition: var(--hex-transition);
    width: 0;
  }
  .hexagon::after {
    border-top: var(--hex-border) solid var(--color-hex-default);
    top: 100%;
    width: 0;
  }
  .hexagon::before {
    border-bottom: var(--hex-border) solid var(--color-hex-default);
    bottom: 100%;
  }
    
  .hexagon:hover {
    background-color: var(--color-hex-hover);
  }
  .hexagon:hover img{display: none;}
  .hexagon:hover::after,
  .hexagon:hover::before {
    border-top-color: var(--color-hex-hover);
    border-bottom-color: var(--color-hex-hover);
    }
   
  .hexagon:nth-child(8n + 5),
  .hexagon:nth-child(8n + 6),
  .hexagon:nth-child(8n + 7),
  .hexagon:nth-child(8n + 8) {
    margin-left: calc(var(--hex-width) / 2 + var(--hex-between) / 2);
  }
  
  .hexagon > svg {
    height: 75%;
    transition: var(--hex-transition);
  }
  
  /*Caption*/
  .caption{
    font-size: 16px;
    font-weight: 700;
    display: none;
    text-align: center;
    transform: rotateY(-180deg);
  }
  /* Colors */
  .hexagon:hover{ transform: rotateY(180deg);}
  .hexagon:hover svg{display: none;}
  .hexagon:hover .caption{color: var(--secondary); display: block;}
  .color-java{
    background-color: var(--color-java);
  }
  .color-java::after,
  .color-java::before {
    border-top-color: var(--color-java);
    border-bottom-color: var(--color-java);
  }
  .color-java:hover {
    fill: var(--color-java);
  }
  
  .color-angular {
    background-color: var(--color-angular);
  }
  .color-angular::after,
  .color-angular::before {
    border-top-color: var(--color-angular);
    border-bottom-color: var(--color-angular);
  }
  .color-angular:hover {
    fill: var(--color-angular);
  }
 
  .color-css{
    background-color: var(--color-css);
  }
  .color-css::after,
  .color-css::before {
    border-top-color: var(--color-css);
    border-bottom-color: var(--color-css);
  }
  .color-css:hover {
    fill: var(--color-css);
  }


  .color-flutter{
    background-color: var(--color-flutter);
  }
  .color-flutter::after,
  .color-flutter::before {
    border-top-color: var(--color-flutter);
    border-bottom-color: var(--color-flutter);
  }
  .color-flutter:hover {
    fill: var(--color-flutter);
  }

 
  .color-unreal {
    background-color: var(--color-unreal);
  }
  .color-unreal::after,
  .color-unreal::before {
    border-top-color: var(--color-unreal);
    border-bottom-color: var(--color-unreal);
  }
  .color-unreal:hover {
    fill: var(--color-unreal);
  }
  
  .color-ios-swift {
    background-color: var(--color-ios-swift);
  }
  .color-ios-swift::after,
  .color-ios-swift::before {
    border-top-color: var(--color-ios-swift);
    border-bottom-color: var(--color-ios-swift);
  }
  .color-ios-swift:hover {
    fill: var(--color-ios-swift);
  }
  
  .color-gulp {
    background-color: var(--color-gulp);
  } 
  .color-gulp::after,
  .color-gulp::before {
    border-top-color: var(--color-gulp);
    border-bottom-color: var(--color-gulp);
  }
  .color-gulp:hover {
    fill: var(--color-gulp);
  }
  
  .color-rails {
    background-color: var(--color-rails);
  }
  .color-rails::after,
  .color-rails::before {
    border-top-color: var(--color-rails);
    border-bottom-color: var(--color-rails);
  }
  .color-rails:hover {
    fill: var(--color-rails);
  }
  
  .color-robot {
    background-color: var(--color-robot);
  }
  .color-robot::after,
  .color-robot::before {
    border-top-color: var(--color-robot);
    border-bottom-color: var(--color-robot);
  }
  .color-robot:hover {
    fill: var(--color-robot);
  }
  
  .color-html {
    background-color: var(--color-html);
  }
  .color-html::after,
  .color-html::before {
    border-top-color: var(--color-html);
    border-bottom-color: var(--color-html);
  }
  .color-html:hover {
    fill: var(--color-html);
  }
  
  .color-javascript {
    background-color: var(--color-javascript);
  }
  .color-javascript::after,
  .color-javascript::before {
    border-top-color: var(--color-javascript);
    border-bottom-color: var(--color-javascript);
  }
  .color-javascript:hover {
    fill: var(--color-javascript);
  }
  
  .color-android {
    background-color: var(--color-android);
  }
  .color-android::after,
  .color-android::before {
    border-top-color: var(--color-android);
    border-bottom-color: var(--color-android);
  }
  .color-android:hover {
    fill: var(--color-android);
  }
  
  .color-php {
    background-color: var(--color-php);
  }
  .color-php::after,
  .color-php::before {
    border-top-color: var(--color-php);
    border-bottom-color: var(--color-php);
  }
  .color-php:hover {
    fill: var(--color-php);
  }
  
  .color-nodejs {
    background-color: var(--color-nodejs);
  }
  .color-nodejs::after,
  .color-nodejs::before {
    border-top-color: var(--color-nodejs);
    border-bottom-color: var(--color-nodejs);
  }
  .color-nodejs:hover {
    fill: var(--color-nodejs);
  }
  
  .color-adobe {
    background-color: var(--color-adobe);
  }
  .color-adobe::after,
  .color-adobe::before {
    border-top-color: var(--color-adobe);
    border-bottom-color: var(--color-adobe);
  }
  .color-adobe:hover {
    fill: var(--color-adobe);
  }
  
  .color-python {
    background-color: var(--color-python);
  }
  .color-python::after,
  .color-python::before {
    border-top-color: var(--color-python);
    border-bottom-color: var(--color-python);
  }
  .color-python:hover {
    fill: var(--color-python);
  }
  
  .color-haskell {
    background-color: var(--color-haskell);
  }
  .color-haskell::after,
  .color-haskell::before {
    border-top-color: var(--color-haskell);
    border-bottom-color: var(--color-haskell);
  }
  .color-haskell:hover {
    fill: var(--color-haskell);
  }
  
  .color-selenium {
    background-color: var(--color-selenium);
  }
  .color-selenium::after,
  .color-selenium::before {
    border-top-color: var(--color-selenium);
    border-bottom-color: var(--color-selenium);
  }
  .color-selenium:hover {
    fill: var(--color-selenium);
  }
  
  .color-oracle {
    background-color: var(--color-oracle);
  }
  .color-oracle::after,
  .color-oracle::before {
    border-top-color: var(--color-oracle);
    border-bottom-color: var(--color-oracle);
  }
  .color-oracle:hover {
    fill: var(--color-oracle);
  }
  
  .color-meteor {
    background-color: var(--color-meteor);
  }
  .color-meteor::after,
  .color-meteor::before {
    border-top-color: var(--color-meteor);
    border-bottom-color: var(--color-meteor); 
  }
  .color-meteor:hover {
    fill: var(--color-meteor);
  }
  
  @media screen and (max-width:599px){
    :root {
      /* Change this to change the appearance of the hexaons */
      --hex-width:60px !important; 
    }
    .hexagon img{max-width: 30px !important;min-width: 30px !important;}
    .caption {font-size: 10px;line-height: normal;}
    .hexagon-container{justify-content: center;padding-right: 20px;}
  }