:root {
  --Neutral-900: hsl(0, 0%, 7%);
  --Neutral-800: hsl(0, 0%, 15%);
  --Neutral-700: hsl(240, 3%, 20%);

  --Neutral-500: hsl(240, 3%, 46%);
  --Neutral-400: hsl(240, 1%, 59%);
  --Neutral-0: hsl(0, 0%, 100%);

  --Blue-600: hsl(214, 100%, 55%);
  --Blue-500: hsl(210, 100%, 65%);

  --Red-500: hsl(354, 63%, 57%);

  --Green-500: hsl(140, 63%, 57%);
  --Green-600: hsl(139, 30%, 30%);
  --Green-700: hsl(140, 15%, 15%);



  --Yellow-400: hsl(49, 85%, 70%);
}
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  transition: .2s;
  font-family: "Sora";
  color: var(--Neutral-400);
  background-color: var(--Neutral-900);
}
p {
  margin-bottom: 0 !important;
}

.border-end,
.border-bottom ,.border-top{
  border-color: var(--Neutral-800) !important;
}
.border {
  border-color: var(--Neutral-500) !important;
}
.correct {
  color: var(--Green-500);
  transition: 0.3s;
}
.incorrect {
  color: var(--Red-500);
  position: relative;
  transition: 0.3s;
}
.curser {
  transition: .05s;
  background-color: var(--Neutral-700);
  border-radius: 7px;
}
.incorrect::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--Red-500);
  transition: 0.3s;
}
.color-Yellow {
  color: var(--Yellow-400);
}
.bg-blue-600{
  background-color: var(--Blue-600);
}
.bg-natural-800{
  background-color: var(--Neutral-800);
}
.color-red{
  color: var(--Red-500);
}
.dropdown button {
  width: 100%;
}
#words{
  filter: blur(4px);
  z-index: -1;
}

.green-shadow-600{
  box-shadow: 0 0 2px 10px var(--Green-600);
}
.green-shadow-700{
  box-shadow: 0 0 2px 25px var(--Green-700);
}
.active,button:hover{
  color: var(--Blue-500) !important;
  border-color: var(--Blue-500) !important;
  
}


input[type="radio"] {
  appearance: none;
  width: 20px ;
  height: 20px;
  border: 2px solid #999;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  margin-right: 10px;
  margin-left: 5px;
  padding: 0 !important;
}

input[type="radio"]:checked {
  border-color: var(--Blue-500);
  border-width: 5px;
}

/* input[type="checkbox"]:checked::after {
  content: "✓";
  color: white;
  position: absolute;
  left: 3px;
  top: -2px;
  font-size: 14px;
} */

#result{
  transition: 1s;
  /* height: 80vh; */
}
#img-1,#img-2{
  animation: rotate 1s infinite alternate;
  
}
#mobile-input{
  position: absolute;
  top:0;
  left: 0;
  filter: opacity(0);
  width: 100%;
  height: 100%;
  z-index: 0;
  font-size: 1.7rem;
}

@keyframes rotate {
  from{
    transform: scale(0);
  }
  to{
    transform: scale(1);
  }
}

@media (max-width: 992px) {
  .w100 {
    width: 100% !important;
  }
  .letter-format {
    font-size: 1.7rem;
  }
  .Accuracy,.WPM,#correctChar,#incorrectChar{
  font-weight: 700;
  font-size: large ;
}
}
@media (min-width: 992px) {
  .letter-format {
    font-size: 2.4rem;
  }
  .result-details div{
  width: 8rem !important;
}
.Accuracy,.WPM,#correctChar,#incorrectChar{
  font-weight: 700;
  font-size: x-large ;
}
#mobile-input{
  display: none;
}
}