#language-toggle {
  display: none;
}

#langbutton {
  position: relative;
  display: block;
  width: 25vmin;
  height: 8vmin;
  background-color: var(--eco3);
  border-radius: 6vmin;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#knob {
  width: 6vmin;
  height: 6vmin;
  background-color: #fff;
  position: absolute;
  top: 1vmin;
  left: 1vmin;
  border-radius: 50%;
  transition: 0.4s ease left, 0.4s ease background-color;
  background-image: url(../../img/langbutton/russian.png);
  background-size: cover;
  background-position: center;;
}

#language-text {
  position: absolute;
  top: 50%;
  left: 8.5vmin;
  transform: translateY(-50%);
  color: #fff;
  font-size: 3vmin;
  font-weight: bold;
  transition: color 0.4s ease, left 0.4s ease;;
  
}

#language-toggle:checked + #langbutton {
  background-color: var(--eco1);
}

#language-toggle:checked + #langbutton #knob {
  left: 18vmin;
  background-color: #ffffff;
  background-image: url(../../img/langbutton/english.jpg);
}

#language-toggle:checked + #langbutton #language-text {
  color: #ffffff;
  left: 4vmin;
  transition: left 0.4s ease;
}