#block-block-12 .f-keys {
  display: grid;
  grid-template-columns: repeat(3, 33% [col-start]);
  grid-gap: 16px;
  position: relative;
  left: 10px;
  bottom: 5px;
}
#block-block-12 .f-key {
    background: black;
}

#block-block-12 .f-key:active .outer {
    opacity: .8;
}

#block-block-12 .four-key-group {
  display: inline-grid;
  grid-template-columns: repeat(4, 40px [col-start]);
  grid-gap: 8px;
}

#block-block-12 .f1-4,
#block-block-12 .f5-8 {
  //margin-right:10px;
}

#block-block-12 .f-key {
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

#block-block-12 .inner:hover .key-popup-message {
  display: inline;
  position: absolute;
  border-radius: 5px;
  border: 1px solid rgb(22 255 22);
}
#block-block-12 .outer:hover {
  border: 1px solid black;
}

#block-block-12 .outer:hover .inner {
  border: 1px solid white;
}

#block-block-12 .inner:hover {
  border: 1px solid white;
}

#block-block-12 .key-popup-message {
  display: none;
  font: 1.3em Inconsolata, monospace;
  color: white;
  z-index: 2;
  padding: 5px 10px;
  left: 0px;
  bottom: 40px;
  background: green;
  font-weight: normal;
  text-shadow: 1px 1px 1px rgb(150 255 150);
  z-index:1000;
}

#block-block-12 .outer {
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid grey;
  border-radius: 3px;
  background: linear-gradient(58deg, rgba(61, 61, 52, 1) 0%, rgba(75, 77, 49, 1) 67%, rgba(246, 246, 200, 1) 100%);
}

#block-block-12 .inner {
  margin: auto;
  width: 32px;
  height: 32px;
  border: 1px solid black;
  border-radius: 3px;
  position: relative;
  top:1px;
  background: linear-gradient(205deg, rgba(61, 61, 52, 1) 0%, rgba(75, 77, 49, 1) 21%, rgba(246, 246, 200, 1) 100%);
  //border-image:linear-gradient(red 0%, green 100%);
  //border-top:1 px solid green;

}

#block-block-12 .key-message {
  text-shadow: 1px 1px black;
}

#block-block-12 .key-popup-message {
  display: hidden;
}

#block-block-12 .f1 .inner {
  left: -2px;
  background: url("https://www.2600.com/sites/all/themes/twoThousandSixHundred/images/facebook-left.png");
  background-size: 100%;
  color: white;
  font-weight: bold;
}

#block-block-12 .f2 .inner {
  left: -2px;
  background: url("https://www.2600.com/sites/all/themes/twoThousandSixHundred/images/facebook-left.png");
  background-size: 100%;
  color: white;
  font-weight: bold;
}

#block-block-12 .f3 .inner {
  left: -1px;
  background: url("https://www.2600.com/sites/all/themes/twoThousandSixHundred/images/facebook-left.png");
  background-size: 100%;
  color: white;
  font-weight: bold;
}

#block-block-12 .f4 .inner {
  background: url("https://www.2600.com/sites/all/themes/twoThousandSixHundred/images/twitter.png");
  background-size: 100%;
}

#block-block-12 .f5 .inner {
  background: url("https://www.2600.com/sites/all/themes/twoThousandSixHundred/images/youtube-icon.svg") no-repeat;
  background-size: 45px;
  background-position:center;
}
#block-block-12 .f6 .inner {
    background:#f00075;
}
#block-block-12 .f6 .inner img{
    width:22px;
    padding:5px;
    filter: invert(100%);
}

#block-block-12 .f1 .key-message,
#block-block-12 .f2 .key-message,
#block-block-12 .f3 .key-message {
  position: relative;
  left: 15px;
  font-size: 18px;
  top: 2px;
  text-shadow: 1px 1px 1px black;
}

#block-block-12 .f4 .inner {}

#block-block-12 .f5 .inner {}

#block-block-12 .f6 .inner {}

#block-block-12 .f7 .inner {
padding: 2px;
}

#block-block-12 .f8 .inner {
}
#block-block-12 .f8 .inner svg {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#block-block-12 .f9 .inner {
  left: 1px;
}

#block-block-12 .f10 .inner {
  left: 1px;
}

#block-block-12 .f11 .inner {
  left: 2px;
}

#block-block-12 .f12 .inner {
  left: 2px;
}
#block-block-12 .f-key a {
     text-decoration: none;
 }