Anki.css

.mobile .card {font-family: "AvenirNext", "NotoSansCJKjp-Regular", "HiraginoSans-W3"; }
@font-face { font-family: myfont; src: url('_NotoSansCJKjp-Regular.otf'); }

.card {
    font-family: NotoSansCJKjp-Regular;
    font-size: 20px;
    text-align: left;vocab-hint
    color: #000;
    background: #f3f3f3;
    margin: 0px;
}

.shadow {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px;
}

.button, .replaybutton {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px;
}

.sentence1, .vocab1 {
    position: relative;
    width: auto;

    padding: 1.2em 1em;
    margin: 0.2em;
    border: 1px solid #ddd;
    border-radius: 8px;

    font-size: 24px;
    background: #fff;
    color: #666;
}

.iphone .sentence1, .iphone .vocab1 {
  margin:1em;
}

.sentence1.audio { 
  padding: 1.5em 1em;
}


.sentence2, .vocab2  {
    position: relative;
    width: auto;

    padding: 1em;
    margin: 0.2em;
    border: 1px solid #ddd;
    border-radius: 8px;

    background: #fff;
    color: #666;
    font-size: 24px;
}


.iphone .sentence2, .iphone .vocab2 {
  margin:1em;
}


.shuffle {
    font-size: 20px;
    color: white;
    text-shadow: 1px 2px 0 #303A47;
    margin: 10px;
}

.shuffle div {
 background: #414E60;
}

#example {
    margin: 0.5em;
    padding: 0 1em;
    color: #666;
    font-size: 24px;
    text-align: left;
}

#info {
    margin: 0.5em;
    padding: 0.5em 1em;
    color: #999;
    font-size: 18px;
    text-align: left;
}

#info p {
  margin: 0.5em 0.5em;
}

.iphone #example, .iphone #info {
  margin-left: 1em;
  margin-right: 1em;
}

b {
  color: #00a;
}

.buttons {
  margin: 0em;
}

.iphone .buttons {
  margin-left: 1em;
  margin-right: 1em;
}

.button, .vocab-hint a, .replaybutton {
    float: left;
    display: block;
    min-width: 80px;
    min-height: 1em;
    margin: 0.5em 0.5em;

    font-size: 14px;
    font-weight: regular;
    background-color: #fff;
    color: #666;

    text-align: center;
    padding: 0.5em;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
}


.replaybutton {
  display: none;
  margin: 0.5em 1em;
}

.vocab-hint {
  margin: 0.5em;
}

.iphone .vocab-hint {
  margin: 1em;
}

.vocab-hint a {
   padding: 1em;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px;
}

.clear { clear: both; }

nokana ruby rt { 
  opacity:0.0; 
  font-size:0
}

notext1 b { 
  background-color: #ddd; 
  color:transparent; 
}

notext2 b { 
  background-color:#ddd; 
  color:transparent;
}

#typeans { 
    font-size: 20px !important;
    background: #E5E5E5;
    color: #BFBFBF;
    width: 18em; 
    margin: 10px;
 }

.typeGood {
 color: #BFBFBF;
 background: #E5E5E5;
}
.typeBad {
 background: #E5E5E5;
 color: #F48989;
}
.typeMissed {
 background: #E5E5E5;
 color: #FFFF66;
}

/* audio bars */

#vu {
  position: relative;
  height: 20px;
}

#vu span.bar {
  display: block;
  position: absolute;

  left: 0px;
  bottom: 6px;
  width: 9px;
  height: 5px;
  background: #666;
  animation: audio-wave 0.7s infinite ease-in-out;
}

#vu span.bar:nth-child(2) {
left: 11px;
height: 20px;
animation-delay: 0.1s;
animation-duration: 0.5s;
}

#vu span.bar:nth-child(3) {
left: 22px;
height: 15px;
animation-delay: 0.1s;
animation-duration: 1.0s;
}

#vu span.bar:nth-child(4) {
left: 33px;
height: 5px; 
animation-delay: 0.1s;
animation-duration: 0.8s;
}

#vu span.bar:nth-child(5) {
left: 44px;
height: 12px;
animation-delay: 0.15s;
animation-duration: 0.7s;
}


@keyframes audio-wave {
    0% { height:5px; transform:translateY(0px);}
    25% {height:20px;transform:translateY(0px);}
    50% {height:5px;transform:translateY(0px);}
    100% {height:5px;transform:translateY(0px);}
}