html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  background: #333;
  color: #eee;
}

a {
  color: #adff2f;
  text-decoration: none;
}

a:hover {
  background: rgba(100, 200, 100, 0.3);
}

* {
  box-sizing: border-box;
}

.show-lang [lang]::before {
  content: "<" attr(lang);
  padding-right: 0.25rem;
  color: orange;
}

.show-lang [lang]::after {
  content: ">";
  padding-left: 0.25rem;
  color: orange;
}

.show-lang [lang] {
  transition: background-color 0.5s;
}

.show-lang [lang]:hover {
  background-color: rgba(0, 0, 0, 0.2);
  transition: background-color 0.5s;
}

.show-lang [lang]:hover::before,
.show-lang [lang]:hover::after {
  color: red;
  transition: color 0.5s;
}

.show-lang [lang]::before,
.show-lang [lang]::after {
  transition: color 0.5s;
}