back.html

<div class="reading">
  <a href="http://jisho.org/search/{{text:kanji:Reading}}">
     <span id="expression-content">{{kanji:Expression}}</span>
    <span class="hidden" id="reading-content">{{furigana:Reading}}</span>
  </a>
</div>

<hr>
<div class="snapshot">
  <span class='audio' >{{Audio}}</span>
</div>

<div  class="answer">

<div class="">
  <a id="explanation" href="http://jisho.org/search/{{text:kanji:Meaning}}">  
     <span id="expression-content1">{{kanji:Meaning}}</span>
    <span class="hidden" id="reading-content1">{{furigana:MeaningReading}}</span>
  </a>
</div>
<br>
<div class="dim">
  <a class="dim" href="http://jisho.org/search/{{text:kanji:OriginalReading}}">  
    {{furigana:OriginalReading}}
  </a>
</div>
<div id="phonetics"><a href="http://jisho.org/search/{{text:kanji:Phonetics}}%23kanji">{{Phonetics}}</a></div>

<span class="dimmer">
{{comments}}
<br>
{{#additional}}
<a href="http://jisho.org/search/{{text:kanji:additional}}">{{additional}}</a>
	<br>
{{/additional}}
</span>




</div>

<div class="info">
<span class="dimmer">{{furigana:Rule}}</span>
</div>
{{#Keyword}}
  <div id="keyword">{{Keyword}}</div>
{{/Keyword}}


<script>
 function linkHit (e) { 
      e.preventDefault();
      e.stopPropagation();
      reading.classList.remove('hidden');
      expression.classList.add('hidden');
  }
  var reading    = document.getElementById("reading-content");
  var expression = document.getElementById('expression-content');
  var clicked = false;
  expression.addEventListener('click', function(e){
     if (reading.innerText !== expression.innerText && !clicked) {
       clicked = true;
       linkHit(e);
     }
  });

 function linkHit1 (e) { 
      e.preventDefault();
      e.stopPropagation();
      reading1.classList.remove('hidden');
      expression1.classList.add('hidden');
  }
  var reading1    = document.getElementById("reading-content1");
  var expression1 = document.getElementById('expression-content1');
  var clicked1 = false;
  expression1.addEventListener('click', function(e){
     if (reading1.innerText !== expression1.innerText && !clicked1) {
       clicked1 = true;
       linkHit1(e);
     }
  });

document.addEventListener('keydown', function(e) {
  if(e.keyCode === 96){
	linkHit(e);
  }
}); 
</script>

css.css

body, .night_mode, body a{
background-color: #202020 !important;
text-decoration: none;
color: #FFFFFF;
font-size: 32px;

}

.snapshot{
display:block
width: 50%;
height:50%;
padding-bottom: 1em;
}
.reading{
padding-bottom: 1em;
}
.hidden{
display: none;
}

.card
{
color: #FFFFFF;
font-size: 20px;
text-align: center;
color: #FFFFFF;
}

div [id^=hint] {
color: #b6d7a2;;
text-decoration: none !important; 
font-size: 1em !important;
}
.hint{
font-size: 22px;
text-decoration: underline !important;
color: #BFBFBF;
}

.small{
font-size: .75em !important;
}
.light{
color: #FFFFFF;
}

.video{
margin-right: 25%

}
u, b{
text-decoration:none;
color: #6abedb;
}

[mtype=unknown]{
//color: #D92B48 !important;
}

[mtype=seen]{
//color: #6ABED8 !important;
}

[mtype=known]{
//color: #b6d7a2 !important;
}

[mtype=mature]{
//color: #FFFFFF;
}

hr{
height: 0;
border: 0;
border-bottom: 2px solid #333;
border-top: 2px solid black;
}

.dim{
color: #BFBFBF !important;
}
.big{
font-size: 40px;
}
.info{
margin-top: 20px;

}
.index{
position: fixed;
bottom: 0;
right: 0;
margin: 0;
}
.index-left{
position: fixed;
top: 0;
left: 0;
margin: 0;
}
.smaller {
font-size: .5em;
}

.image{
position: fixed;
bottom: 0;
left: 0;
margin: 0;
max-width: 5em;
max-height: 5em;
}

.image:hover{
position: fixed;
bottom: 0;
left: 0;
margin: 0;
max-width: 20em;
max-height: 20em;
}

#vocab-pos{
position: fixed;
top: 0;
right: 0;
margin: 0;
}

#phonetics b{
color: #f0c674 ;
}

#explanation{
color: #b294bb !important;
}
.dimmer{
  color: #569056 ;

}
#keyword {
padding-top: 1em;
}
#keyword a{
color: #b6d7a2 !important;
font-size: 2rem;
}

#phonetics b{
color: #f0c674 ;
}

.dimmer{
  color: #569056 ;

}

front.html

<div class="reading front">
  <a href="http://jisho.org/search/{{text:kanji:Reading}}">
     <span id="expression-content">{{kanji:Expression}}</span>
    <span class="hidden" id="reading-content">{{furigana:Reading}}</span>
  </a>
</div>

<script>
 function linkHit (e) { 
      e.preventDefault();
      e.stopPropagation();
      reading.classList.remove('hidden');
      expression.classList.add('hidden');
  }
  var reading    = document.getElementById("reading-content");
  var expression = document.getElementById('expression-content');
  var clicked = false;
  expression.addEventListener('click', function(e){
     if (reading.innerText !== expression.innerText && !clicked) {
       clicked = true;
       linkHit(e);
     }
  });
document.addEventListener('keydown', function(e) {
  if(e.keyCode === 96){
	linkHit(e);
  }
}); 
</script>