@font-face {
   font-family: "omj-font";
   src: url("./uifont.ttf") format("truetype");
}
*{
  /* font-family: "ZCOOL XiaoWei", sans-serif; */
  font-family: "omj-font", sans-serif;
}
:root{
  --main-colour: rgb(30,41,59);
}
.main-bg{
  background-color: var(--main-colour); 
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-gradient {
  background-size: 300% 300%;
  animation: gradientMove 15s ease infinite;
}

.card{
  height: 100%;
  padding:1rem;
  text-align:center;

  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(13.5px);
  -webkit-backdrop-filter: blur(13.5px);
  border: 1px solid rgba(255, 255, 255, 0.3);

  transition:transform 0.25s ease,
             box-shadow 0.25s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 20px rgba(255, 255, 255, 0.12);
}

.card-thumb{
  cursor: pointer;

  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:0.5rem;
}

.card-en{
  font-size:1.125rem;
  font-weight:bold;
  color:white;
}

.card-cn{
  font-weight:500;
  color:#cad2df;
}

.card-source{
  font-size:0.875rem;
  color:#9ca3af;
  margin-top:0.5rem;
}

.control{
  color: white;
}

.card-animate{
  animation:cardReveal 0.35s ease;
}

@keyframes cardReveal{

  0%{
    opacity:0.8;
    transform:scale(0.98);
  }

  100%{
    opacity:1;
    transform:scale(1);
  }

}

@keyframes cardShake{
  0%   { transform: translateY(0); }
  20%  { transform: translateY(-4px); }
  40%  { transform: translateY(4px); }
  60%  { transform: translateY(-3px); }
  80%  { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

.radio-line{
  display: flex;
  column-gap: 0.6rem;
  align-items: center;
}

input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--form-background);
  margin: 0;

  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 50%;
  transform: translateY(-0.075em);

  display: grid;
  /* place-content: center; */
}

input[type="radio"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em currentColor;
  background-color: currentColor;
}

input[type="radio"]:checked::before {
  transform: scale(1);
}

input[type="radio"]:focus {
  outline: max(2px, 0.15em) solid currentColor;
  outline-offset: max(2px, 0.15em);
}

.char-section{
  position: sticky;
  top: 0px;
  cursor: pointer; 
  background-color: var(--main-colour); 
  padding: 1rem 1.5rem; 
  font-size: 1.25rem; 
  line-height: 1.75rem; 
  font-weight: 700; 
  color: white;
}