/******* font size *******/

@media only screen and (orientation: landscape) {

	#KanjiBack,
	#KanjiBack *,
	#KanjiFront,
	#KanjiFront * {
		font-size: 10vw;
		line-height: 10vw;
	}

	.IsKana #KanjiBack,
	.IsKana #KanjiBack *,
  .IsKana,
	.IsKana * {
		font-size: 5vw;
		line-height: 5vw;
	}

	#mean {
		font-size: 1.5vw;
	}

	#kana_hint_main,
	#voc_furi,
	#kun_post,
	#kun_pre {
		font-size: 3vw;
	}

}

@media only screen and (orientation: portrait) {

	#KanjiBack,
	#KanjiBack *,
	#KanjiFront,
	#KanjiFront * {
		font-size: 45vw;
		line-height: 45vw;
	}

	#KanjiBack.IsKana,
	#KanjiBack.IsKana * {
		font-size: 22vw;
		line-height: 22vw;
	}

	#mean, #furigana {
		font-size: 6vw;
	}

	#kana_hint_main,
	#voc_furi,
	#kun_post,
	#kun_pre {
		font-size: 12vw;
	}

	a {
		color: red;
		text-decoration: none;
	}
}

/********* general *********/

@font-face {
	font-family: HGRKK;
	src: url(_HGRKK.ttf);
}

.card {
	text-align: center;
}

#KanjiFront,
#KanjiBack {
	font-family: hgrkk;
}

#stop_sound {
	margin-left: -50px;
	z-index: 10000;
	opacity: 0;
}

#kana_key {
	display: none;
}

#kanji_key {
	display: none;
}

#kanji_only {
	display: none;
}

#dict_key {
	display: none;
}

#back {
	display: block;
}

#read_title {
	text-decoration: underline;
}

#kanji_title {
	text-decoration: underline;
}

#compo_wani {
	color: #dd99ff;
}

.EFDRC-ctrl,
.EFDRC-outline {
	display: inline-block;
	padding-top: 10px;
}

#answer,
.hide,
ruby rt {
	visibility: hidden;
}

ruby:active rt,
ruby:hover rt {
	visibility: visible;
}

img {
	padding: 2px;
}

#read_mnemo_personal i {
	color: #ffaaff;
}

#read_mnemo_personal,
#kanji_mnemo_personal,
#mean {
	display: inline-block;
	text-align: left;
}

#external_links a {
    white-space: nowrap;
    overflow: hidden;
}

/********* mobile *********/

.soundLink svg {
	max-width: 50px
}


/*********** loader **********/
.lds-dual-ring {
  display: inline-block;
  width: 20px;
  height: 20px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 16px;
  height: 16px;
  margin: 2px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}