Untitled

hr {
 height: 3px;
 background: white;
 border: none;
 margin-top: 20px;
 margin-bottom: 20px;
}

div {
 margin-bottom: 10px
}

.card {
 font-family: Georgia; 
 font-size: 10px; 
 text-align: left; 
 background-color: rgb(47,47,49);
 color: #fff;
 padding: 20px;
}

.win .example {
	font-family: Kaiti;
}

.hanzi {
 font-family: KaiTi; 
 font-size: 78px;
 border-bottom: 3px solid rgba(0,0,0,0);
 transition: border 0.5s ease,  padding 0.5s ease;
 margin-top: 20px;
}

.hanzi.whover {
 cursor: pointer;
}

.hanzi.whover:hover {
}

.hanzi.whover::before {
 font-family: KaiTi; 
 content: var(--pinyin);
 position: absolute;
 font-size: 22px;
 color: #55DD55;
 padding-left: 10px;
 padding-right: 10px;
 padding-bottom: 5px;
 border-left: 3px solid white;
 transform: translate(-10px,  -40px);
 opacity: 0;
 transition: opacity 0.5s ease;
 height: 140px;
 padding-top: 0px;
}

.hanzi.whover:hover::before {
 opacity: 1;
}

.sentence {
 font-family: KaiTi; 
 font-size:30px; 
 text-align:left;
 transition: padding 0.5s ease;
}

.pinyinSen.whover {
 cursor: pointer;
 opacity: 1;
 border-left: 3px solid white;
 padding-left: 10px;
 height: 25px;
 max-height: 80px;
 display: flex;
 padding-top: 55px;
 transform: translate(-10px, -50px);
 opacity: 0;
 transition: opacity 0.5s ease;
 white-space: nowrap;
}

.pinyinSen.whover:hover {
 opacity: 1;
}

.pinyin {
 font-family: Palatino; 
 font-size: 22px; 
 color: #55DD55;
}

.pinyinSen {
 font-family: Palatino; 
 font-size: 20px; 
 color: #55DD55; 
 text-align:left;
}

.english {
 font-family: Didot; 
 font-size: 16px;
}

.meaningSent{
 font-family: Didot; 
 font-size: 16px;  
 text-align:left
}

.description{
 font-family: Didot; 
 font-size: 16px; 
 color: #575757;
}

.image{
	margin-top: 20px;
	border-left: 3px solid white;
	padding-left: 10px;
}