@font-face {
    font-family: '212 Keyboard';
    src: url('../fonts/212-Keyboard.otf') format('opentype');
}

[class^="key-"], [class*=" key-"] {
    font-family: '212 Keyboard', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 3.5em;
}

/* Sizes */

.key-xxs {
    font-size: 2em;
}

.key-xs {
    font-size: 2.5em;
}

.key-sm {
    font-size: 3em;
}

.key-lg {
    font-size: 4em;
}

.key-xl {
    font-size: 4.5em;
}

.key-xxl {
    font-size: 5em;
}

.key-1x {
    font-size: 1em;
}

.key-2x {
    font-size: 2em;
}

.key-3x {
    font-size: 3em;
}

.key-4x {
    font-size: 4em;
}

.key-5x {
    font-size: 5em;
}

.key-6x {
    font-size: 6em;
}

.key-7x {
    font-size: 7em;
}

.key-8x {
    font-size: 8em;
}

.key-9x {
    font-size: 9em;
}

.key-10x {
    font-size: 10em;
}

.key-11x {
    font-size: 11em;
}

.key-12x {
    font-size: 12em;
}

/* Sizes */

/* Alphabetic Keys (A-Z) */

.key-a::before {
    content: "A";
}

.key-b::before {
    content: "B";
}

.key-c::before {
    content: "C";
}

.key-d::before {
    content: "D";
}

.key-e::before {
    content: "E";
}

.key-f::before {
    content: "F";
}

.key-g::before {
    content: "G";
}

.key-h::before {
    content: "H";
}

.key-i::before {
    content: "I";
}

.key-j::before {
    content: "J";
}

.key-k::before {
    content: "K";
}

.key-l::before {
    content: "L";
}

.key-m::before {
    content: "M";
}

.key-n::before {
    content: "N";
}

.key-o::before {
    content: "O";
}

.key-p::before {
    content: "P";
}

.key-q::before {
    content: "Q";
}

.key-r::before {
    content: "R";
}

.key-s::before {
    content: "S";
}

.key-t::before {
    content: "T";
}

.key-u::before {
    content: "U";
}

.key-v::before {
    content: "V";
}

.key-w::before {
    content: "W";
}

.key-x::before {
    content: "X";
}

.key-y::before {
    content: "Y";
}

.key-z::before {
    content: "Z";
}

/* Alphabetic Keys (A-Z) */

/* Number Keys (0-9) */

.key-0::before {
    content: "0";
}

.key-1::before {
    content: "1";
}

.key-2::before {
    content: "2";
}

.key-3::before {
    content: "3";
}

.key-4::before {
    content: "4";
}

.key-5::before {
    content: "5";
}

.key-6::before {
    content: "6";
}

.key-7::before {
    content: "7";
}

.key-8::before {
    content: "8";
}

.key-9::before {
    content: "9";
}

/* Number Keys (0-9) */

/* Command Keys */

.key-enter::before {
    content: "a";
}

.key-alt::before {
    content: "b";
}

.key-ctrl::before {
    content: "c";
}

.key-fn::before {
    content: "d";
}

.key-tab::before {
    content: "e";
}

.key-caps-lock::before {
    content: "f";
}

.key-shift::before {
    content: "g";
}

.key-backspace::before {
    content: "h";
}

.key-insert::before {
    content: "i";
}

.key-home::before {
    content: "j";
}

.key-delete::before {
    content: "k";
}

.key-end::before {
    content: "l";
}

.key-esc::before {
    content: "m";
}

.key-command::before {
    content: "n";
}

.key-option::before {
    content: "o";
}

.key-num-lock::before {
    content: "p";
}

.key-arrow-up::before {
    content: "q";
}

.key-arrow-down::before {
    content: "r";
}

.key-arrow-left::before {
    content: "s";
}

.key-arrow-right::before {
    content: "t";
}

.key-page-up::before {
    content: "u";
}

.key-page-down::before {
    content: "v";
}

.key-space::before {
    content: "w";
}

.key-print-screen::before {
    content: "x";
}

.key-windows::before {
    content: "y";
}

/* Commands Keys */

/* Special Keys */

.key-dollar::before {
    content: "$"
}

.key-plus::before {
    content: "+"
}

.key-hyphen-or-minus::before {
    content: "-"
}

.key-asterisk::before {
    content: "*"
}

.key-slash::before {
    content: "/"
}

.key-equal::before {
    content: "="
}

.key-percent::before {
    content: "%"
}

.key-double-quotes::before {
    content: "\""
}

.key-single-quotes::before {
    content: "'"
}

.key-number-sign::before {
    content: "#"
}

.key-at::before {
    content: "@"
}

.key-ampersand::before {
    content: "&"
}

.key-underscore::before {
    content: "_"
}

.key-paren-left::before {
    content: "("
}

.key-paren-right::before {
    content: ")"
}

.key-comma::before {
    content: ","
}

.key-period::before {
    content: "."
}

.key-semicolon::before {
    content: ";"
}

.key-colon::before {
    content: ":"
}

.key-question::before {
    content: "?"
}

.key-exclamation::before {
    content: "!"
}

.key-backslash::before {
    content: "\\"
}

.key-bar::before {
    content: "|"
}

.key-brace-left::before {
    content: "{"
}

.key-brace-right::before {
    content: "}"
}

.key-less::before {
    content: "<"
}

.key-greater::before {
    content: ">"
}

.key-bracket-left::before {
    content: "["
}

.key-bracket-right::before {
    content: "]"
}

.key-grave::before {
    content: "`"
}

.key-circumflex::before {
    content: "^"
}

.key-tilde::before {
    content: "~"
}

/* Special Keys */

/* Function Keys */

.key-f1::before {
    content: "F1";
}

.key-f2::before {
    content: "F2";
}

.key-f3::before {
    content: "F3";
}

.key-f4::before {
    content: "F4";
}

.key-f5::before {
    content: "F5";
}

.key-f6::before {
    content: "F6";
}

.key-f7::before {
    content: "F7";
}

.key-f8::before {
    content: "F8";
}

.key-f9::before {
    content: "F9";
}

.key-f10::before {
    content: "F10";
}

.key-f11::before {
    content: "F11";
}

.key-f12::before {
    content: "F12";
}

/* Function Keys */