:root {
  --bg: #282828;
  --bg1: #505050;
  --fg: #ebdbb2;
  --fg3: #a89984;
  --fg4: #928374;
  --yellow: #fabd2f;
  --blue: #83a598;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Space Mono", monospace, sans-serif;
  overflow-x: hidden;
}

.custom-link {
  color: var(--fg4);
  text-decoration-line: underline;
  text-decoration-color: var(--fg4);
  transition: 200ms ease-in-out;
}

.custom-link:hover {
  color: var(--blue);
  text-decoration-color: var(--blue);
}

.custom-list {
  list-style: circle;
}

h1 {
  font-family: "JetBrains Mono", "Space Grotesk", "JetBrainsMono Nerd Font";
}

.si {
  font-size: 0.9em;
  vertical-align: middle;
}

.custom-contact-btn {
  border: 1px solid var(--fg);
  color: var(--fg);
  background-color: transparent;
}

.custom-contact-btn:hover {
  background-color: var(--fg);
  color: var(--bg);
}

.form-control.custom-contact-btn {
  background-color: transparent;
  color: var(--fg);
}

.form-control.custom-contact-btn::placeholder {
  color: var(--fg3);
}