/*@font-face kit by Fonts2u (http://www.fonts2u.com) */ @font-face {font-family:"KG Primary Penmanship Alt";src:url("KGPrimaryPenmanshipAlt.eot?") format("eot"),url("KGPrimaryPenmanshipAlt.woff") format("woff"),url("KGPrimaryPenmanshipAlt.ttf") format("truetype"),url("KGPrimaryPenmanshipAlt.svg#KGPrimaryPenmanshipAlt") format("svg");font-weight:normal;font-style:normal;}
body {
    margin: 0;
    font-family: "KG Primary Penmanship Alt";
    font-size: 1.1rem;
    background: black;
}

button, input {
    font-family: "KG Primary Penmanship Alt";
    font-size: 1.1rem;
}

#preload {
    width: 100vw;
    height: 100vh;
    margin: 0;
    display: flex;
    color: wheat;
    text-align: center;
    flex-direction: column;
}

#progress-holder {
    width: 80%;
    height: 5%;
    margin: auto;
    background: #303030;
}

#progress-bar {
    width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    transition: width 0.2s;
    animation-name: pulse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes pulse {
  0%   {background: #ffffaa; box-shadow: #ffaaaa 1px 1px 3px, #ffaaaa -1px -1px 3px, #ffaaaa 1px -1px 3px, #ffaaaa -1px 1px 3px;}
  50%  {background: #ffffe0;box-shadow: #ffe0e0 1px 1px 3px, #ffe0e0 -1px -1px 3px, #ffe0e0 1px -1px 3px, #ffe0e0 -1px 1px 3px;}
  100% {background: #ffffaa;box-shadow: #ffaaaa 1px 1px 3px, #ffaaaa -1px -1px 3px, #ffaaaa 1px -1px 3px, #ffaaaa -1px 1px 3px;}
}

.spacer {
    flex: 1;
}

.cave {
    background: #382512a6;
}

.night {
    background: #0c133aa6;
}

.fog {
    animation: fog-anim 55s linear infinite;
}

.rain {
    animation: rain-anim 0.3s linear infinite;
}

.blizzard {
    animation: blizzard-anim 0.3s linear infinite;
}

.storm {
    animation: rain-anim 0.3s linear infinite;
}

.storm:before {
    content : '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    animation: lightening 25s infinite;
}

@keyframes rain-anim {
    0% { background: url(spellquest/rain.png); background-position: 0 0; }
    100% { background: url(spellquest/rain.png); background-position: 128px 256px; }
}

@keyframes blizzard-anim {
    0% { background: url(spellquest/blizzard.png); background-position: 0 0; }
    100% { background: url(spellquest/blizzard.png); background-position: 128px 256px; }
}

@keyframes lightening {
    0% { background: white; opacity: 0 }
    30% { background: white; opacity: 0 }
    30.2% { background: white; opacity: 0.7 }
    31% { background: white; opacity: 0 }
    31.2% { background: white; opacity: 0 }
    31.4% { background: white; opacity: 0.7 }
    32.2% { background: white; opacity: 0 }
    65% { background: white; opacity: 0 }
    65.2% { background: white; opacity: 0.7 }
    66% { background: white; opacity: 0 }
    100% { background: white; opacity: 0 }
}

@keyframes fog-anim {
    0% { background: url(spellquest/fog.png); background-position: 0 0; }
    20% { background: url(spellquest/fog.png); background-position: 51.2px 7px; }
    40% { background: url(spellquest/fog.png); background-position: 102.4px 1px; }
    60% { background: url(spellquest/fog.png); background-position: 143.6px 3px; }
    80% { background: url(spellquest/fog.png); background-position: 208.8px 12px; }
    100% { background: url(spellquest/fog.png); background-position: 256px 2px; }
}

.tile {
  height: 30px;
  width: 30px;
  min-width: 30px;
  padding: 0;
  margin: 0;
  background: url(tiles-0_0.png);
}

.underground > div > .tile {
  filter: sepia(1);
}

.grass {
  background-position: 570px 540px;
}

.grass:nth-of-type(2n) {
  background-position: 600px 540px;
}

.grass:nth-of-type(3n) {
  background-position: 540px 540px;
}

.grass:nth-of-type(5n) {
  background-position: 510px 540px;
}

.grass:nth-of-type(7n) {
  background-position: 480px 540px;
}

.grass:nth-of-type(3n+1) {
  background-position: 450px 540px;
}

.grass:nth-of-type(5n+1) {
  background-position: 420px 540px;
}

.grass:nth-of-type(7n+1) {
  background-position: 390px 540px;
}

.desert {
  background-position: 600px 510px;
}

.desert_t {
  background-position: 570px 510px;
}

.desert_r {
  background-position: 540px 510px;
}

.desert_tr {
  background-position: 510px 510px;
}

.desert_b {
  background-position: 480px 510px;
}

.desert_tb {
  background-position: 450px 510px;
}

.desert_rb {
  background-position: 420px 510px;
}

.desert_trb {
  background-position: 390px 510px;
}

.desert_l {
  background-position: 360px 510px;
}

.desert_tl {
  background-position: 330px 510px;
}

.desert_lr {
  background-position: 300px 510px;
}

.desert_tlr {
  background-position: 270px 510px;
}

.desert_lb {
  background-position: 240px 510px;
}

.desert_tlb {
  background-position: 210px 510px;
}

.desert_lrb {
  background-position: 180px 510px;
}

.desert_tlrb {
  background-position: 150px 510px;
}

.ice {
  background-position: 600px 480px;
}

.ice_t {
  background-position: 570px 480px;
}

.ice_r {
  background-position: 540px 480px;
}

.ice_tr {
  background-position: 510px 480px;
}

.ice_b {
  background-position: 480px 480px;
}

.ice_tb {
  background-position: 450px 480px;
}

.ice_rb {
  background-position: 420px 480px;
}

.ice_trb {
  background-position: 390px 480px;
}

.ice_l {
  background-position: 360px 480px;
}

.ice_tl {
  background-position: 330px 480px;
}

.ice_lr {
  background-position: 300px 480px;
}

.ice_tlr {
  background-position: 270px 480px;
}

.ice_lb {
  background-position: 240px 480px;
}

.ice_tlb {
  background-position: 210px 480px;
}

.ice_lrb {
  background-position: 180px 480px;
}

.ice_tlrb {
  background-position: 150px 480px;
}

.forest {
  background-position: 600px 450px;
}

.forest_t {
  background-position: 570px 450px;
}

.forest_r {
  background-position: 540px 450px;
}

.forest_tr {
  background-position: 510px 450px;
}

.forest_b {
  background-position: 480px 450px;
}

.forest_tb {
  background-position: 450px 450px;
}

.forest_rb {
  background-position: 420px 450px;
}

.forest_trb {
  background-position: 390px 450px;
}

.forest_l {
  background-position: 360px 450px;
}

.forest_tl {
  background-position: 330px 450px;
}

.forest_lr {
  background-position: 300px 450px;
}

.forest_tlr {
  background-position: 270px 450px;
}

.forest_lb {
  background-position: 240px 450px;
}

.forest_tlb {
  background-position: 210px 450px;
}

.forest_lrb {
  background-position: 180px 450px;
}

.forest_tlrb {
  background-position: 150px 450px;
}

.plains {
  background-position: 600px 420px;
}

.plains_t {
  background-position: 570px 420px;
}

.plains_r {
  background-position: 540px 420px;
}

.plains_tr {
  background-position: 510px 420px;
}

.plains_b {
  background-position: 480px 420px;
}

.plains_tb {
  background-position: 450px 420px;
}

.plains_rb {
  background-position: 420px 420px;
}

.plains_trb {
  background-position: 390px 420px;
}

.plains_l {
  background-position: 360px 420px;
}

.plains_tl {
  background-position: 330px 420px;
}

.plains_lr {
  background-position: 300px 420px;
}

.plains_tlr {
  background-position: 270px 420px;
}

.plains_lb {
  background-position: 240px 420px;
}

.plains_tlb {
  background-position: 210px 420px;
}

.plains_lrb {
  background-position: 180px 420px;
}

.plains_tlrb {
  background-position: 150px 420px;
}

.swamp {
  background-position: 600px 390px;
}

.swamp_t {
  background-position: 570px 390px;
}

.swamp_r {
  background-position: 540px 390px;
}

.swamp_tr {
  background-position: 510px 390px;
}

.swamp_b {
  background-position: 480px 390px;
}

.swamp_tb {
  background-position: 450px 390px;
}

.swamp_rb {
  background-position: 420px 390px;
}

.swamp_trb {
  background-position: 390px 390px;
}

.swamp_l {
  background-position: 360px 390px;
}

.swamp_tl {
  background-position: 330px 390px;
}

.swamp_lr {
  background-position: 300px 390px;
}

.swamp_tlr {
  background-position: 270px 390px;
}

.swamp_lb {
  background-position: 240px 390px;
}

.swamp_tlb {
  background-position: 210px 390px;
}

.swamp_lrb {
  background-position: 180px 390px;
}

.swamp_tlrb {
  background-position: 150px 390px;
}

.tundra {
  background-position: 600px 360px;
}

.tundra_t {
  background-position: 570px 360px;
}

.tundra_r {
  background-position: 540px 360px;
}

.tundra_tr {
  background-position: 510px 360px;
}

.tundra_b {
  background-position: 480px 360px;
}

.tundra_tb {
  background-position: 450px 360px;
}

.tundra_rb {
  background-position: 420px 360px;
}

.tundra_trb {
  background-position: 390px 360px;
}

.tundra_l {
  background-position: 360px 360px;
}

.tundra_tl {
  background-position: 330px 360px;
}

.tundra_lr {
  background-position: 300px 360px;
}

.tundra_tlr {
  background-position: 270px 360px;
}

.tundra_lb {
  background-position: 240px 360px;
}

.tundra_tlb {
  background-position: 210px 360px;
}

.tundra_lrb {
  background-position: 180px 360px;
}

.tundra_tlrb {
  background-position: 150px 360px;
}

.river {
  background-position: 600px 330px;
}

.river_t {
  background-position: 570px 330px;
}

.river_r {
  background-position: 540px 330px;
}

.river_tr {
  background-position: 510px 330px;
}

.river_b {
  background-position: 480px 330px;
}

.river_tb {
  background-position: 450px 330px;
}

.river_rb {
  background-position: 420px 330px;
}

.river_trb {
  background-position: 390px 330px;
}

.river_l {
  background-position: 360px 330px;
}

.river_tl {
  background-position: 330px 330px;
}

.river_lr {
  background-position: 300px 330px;
}

.river_tlr {
  background-position: 270px 330px;
}

.river_lb {
  background-position: 240px 330px;
}

.river_tlb {
  background-position: 210px 330px;
}

.river_lrb {
  background-position: 180px 330px;
}

.river_tlrb {
  background-position: 150px 330px;
}

.sea {
  background-position: 600px 300px;
}

.sea_t {
  background-position: 570px 300px;
}

.sea_T {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 570px 300px;
}

.sea_r {
  background-position: 540px 300px;
}

.sea_R {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position:  30px 330px, 540px 300px;
}

.sea_tr {
  background-position: 510px 300px;
}

.sea_Tr {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 510px 300px;
}

.sea_tR {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 30px 330px, 510px 300px;
}

.sea_TR {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 30px 330px, 510px 300px;
}

.sea_b {
  background-position: 480px 300px;
}

.sea_B {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 60px 330px, 480px 300px;
}

.sea_tb {
  background-position: 450px 300px;
}

.sea_Tb {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 450px 300px;
}

.sea_tB {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 60px 330px, 450px 300px;
}

.sea_TB {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 60px 330px, 450px 300px;
}

.sea_rb {
  background-position: 420px 300px;
}

.sea_Rb {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 30px 330px, 420px 300px;
}

.sea_rB {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 60px 330px, 420px 300px;
}

.sea_RB {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 30px 330px, 60px 330px, 420px 300px;
}

.sea_trb {
  background-position: 390px 300px;
}

.sea_Trb {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 390px 300px;
}

.sea_tRb {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 30px 330px, 390px 300px;
}

.sea_trB {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 60px 330px, 390px 300px;
}

.sea_TRb {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 30px 330px, 390px 300px;
}

.sea_TrB {
 background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 60px 330px, 390px 300px;
}

.sea_tRB {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 30px 330px, 60px 330px, 390px 300px;
}

.sea_TRB {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 30px 330px, 60px 330px, 390px 300px;
}

.sea_l {
  background-position: 360px 300px;
}

.sea_L {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 90px 330px, 360px 300px;
}

.sea_tl {
  background-position: 330px 300px;
}

.sea_Tl {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 330px 300px;
}

.sea_tL {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 90px 330px, 330px 300px;
}

.sea_TL {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 90px 330px, 330px 300px;
}

.sea_lr {
  background-position: 300px 300px;
}

.sea_Lr {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 90px 330px, 300px 300px;
}

.sea_lR {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 30px 330px, 300px 300px;
}

.sea_LR {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 90px 330px, 30px 330px, 300px 300px;
}

.sea_tlr {
  background-position: 270px 300px;
}

.sea_Tlr {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 270px 300px;
}

.sea_tLr {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 90px 330px, 270px 300px;
}

.sea_tlR {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 30px 330px, 270px 300px;
}

.sea_TLr {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 90px 330px, 270px 300px;
}

.sea_TlR {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 30px 330px, 270px 300px;
}

.sea_tLR {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 90px 330px, 30px 330px, 270px 300px;
}

.sea_TLR {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 90px 330px, 30px 330px, 270px 300px;
}

.sea_lb {
  background-position: 240px 300px;
}

.sea_Lb {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 90px 330px, 240px 300px;
}

.sea_lB {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 60px 330px, 240px 300px;
}

.sea_LB {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 90px 330px, 60px 330px, 240px 300px;
}

.sea_tlb {
  background-position: 210px 300px;
}

.sea_Tlb {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 210px 300px;
}

.sea_tLb {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 90px 330px, 210px 300px;
}

.sea_tlB {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 60px 330px, 210px 300px;
}

.sea_TLb {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 90px 330px, 210px 300px;
}

.sea_TlB {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 60px 330px, 210px 300px;
}

.sea_tLB {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 90px 330px, 60px 330px, 210px 300px;
}

.sea_TLB {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 90px 330px, 60px 330px, 210px 300px;
}

.sea_lrb {
  background-position: 180px 300px;
}

.sea_Lrb {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 90px 330px, 180px 300px;
}

.sea_lRb {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 30px 330px, 180px 300px;
}

.sea_lrB {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 60px 330px, 180px 300px;
}

.sea_LRb {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 90px 330px, 30px 330px, 180px 300px;
}

.sea_LrB {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 90px 330px, 60px 330px, 180px 300px;
}

.sea_lRB {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 30px 330px, 60px 330px, 180px 300px;
}

.sea_LRB {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 90px 330px, 30px 330px, 60px 330px, 180px 300px;
}

.sea_tlrb {
  background-position: 150px 300px;
}

.sea_Tlrb {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 150px 300px;
}

.sea_tLrb {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 90px 330px, 150px 300px;
}

.sea_tlRb {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 30px 330px, 150px 300px;
}

.sea_tlrB {
  background: url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 60px 330px, 150px 300px;
}

.sea_TLrb {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 90px 330px, 150px 300px;
}

.sea_TlRb {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 30px 330px, 150px 300px;
}

.sea_TlrB {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 60px 330px, 150px 300px;
}

.sea_tLRb {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 90px 330px, 30px 330px, 150px 300px;
}

.sea_tLrB {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 90px 330px, 60px 330px, 150px 300px;
}

.sea_tlRB {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 30px 330px, 60px 330px, 150px 300px;
}

.sea_TLRb {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 90px 330px, 30px 330px, 150px 300px;
}

.sea_TLrB {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 90px 330px, 60px 330px, 150px 300px;
}

.sea_TlRB {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 30px 330px, 60px 330px, 150px 300px;
}

.sea_tLRB {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 90px 330px, 30px 330px, 60px 330px, 150px 300px;
}

.sea_TLRB {
  background: url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png), url(tiles-0_0.png);
  background-position: 120px 330px, 90px 330px, 30px 330px, 60px 330px, 150px 300px;
}

.hills {
  background-position: 540px 270px;
}

.hills_t {
  background-position: 540px 270px;
}

.hills_r {
  background-position: 510px 270px;
}

.hills_tr {
  background-position: 510px 270px;
}

.hills_b {
  background-position: 540px 270px;
}

.hills_tb {
  background-position: 540px 270px;
}

.hills_rb {
  background-position: 510px 270px;
}

.hills_trb {
  background-position: 510px 270px;
}

.hills_l {
  background-position: 570px 270px;
}

.hills_tl {
  background-position: 570px 270px;
}

.hills_lr {
  background-position: 600px 270px;
}

.hills_tlr {
  background-position: 600px 270px;
}

.hills_lb {
  background-position: 570px 270px;
}

.hills_tlb {
  background-position: 570px 270px;
}

.hills_lrb {
  background-position: 600px 270px;
}

.hills_tlrb {
  background-position: 600px 270px;
}

.mountains {
  background-position: 300px 270px;
}

.mountains_t {
  background-position: 300px 270px;
}

.mountains_r {
  background-position: 270px 270px;
}

.mountains_tr {
  background-position: 270px 270px;
}

.mountains_b {
  background-position: 300px 270px;
}

.mountains_tb {
  background-position: 300px 270px;
}

.mountains_rb {
  background-position: 270px 270px;
}

.mountains_trb {
  background-position: 270px 270px;
}

.mountains_l {
  background-position: 330px 270px;
}

.mountains_tl {
  background-position: 330px 270px;
}

.mountains_lr {
  background-position: 360px 270px;
}

.mountains_tlr {
  background-position: 360px 270px;
}

.mountains_lb {
  background-position: 330px 270px;
}

.mountains_tlb {
  background-position: 330px 270px;
}

.mountains_lrb {
  background-position: 360px 270px;
}

.mountains_tlrb {
  background-position: 360px 270px;
}

.alphabet:hover {
    color: #ffffaa !important;
    border-color: #ffffaa !important;
    text-shadow: #ffaaaa 0 0 10px !important;
    box-shadow: #ffaaaa 1px 1px 3px, #ffaaaa -1px -1px 3px, #ffaaaa 1px -1px 3px, #ffaaaa -1px 1px 3px !important;
}

.selected-alphabet:hover {
    color: #a7a7a7cf !important;
    border-color: #a7a7a755 !important;
    text-shadow: 2px 2px 2px black, -2px -2px 2px black, 2px -2px 2px black, -2px 2px 2px black !important;
    box-shadow: 1px 1px 3px black, -1px -1px 3px black, 1px -1px 3px black, -1px 1px 3px black !important;
}