*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::selection {
  background: #0f0;
  color: #111;
}

body {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background: #111;
  color: #ccc;
  font-family: "JetBrains Mono", "SF Mono", "Cascadia Code", "Fira Code",
    Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* focus states for keyboard navigation */
a:focus-visible {
  outline: 2px solid #0f0;
  outline-offset: 2px;
}

.lang {
  color: #878787;
  text-decoration: none;
  transition: color 0.15s;
}

.lang:hover {
  color: #fff;
}