:root {
  --bg-color: #000000;
  --fg-color: #dcd7ba;
  --module-bg-color: #343b58;
  --highlight-color: #957fb8;
  --border-color: #24283b;
  --title-color: #7e9cd8;
}

* {
  font-weight: Bold;
  font-family: JetBrainsMono NFP;
}

body,
.container {
  background-color: var(--bg-color);
  color: var(--highlight-color);
}

h2,
a:hover {
  color: var(--highlight-color);
}

a {
  color: var(--fg-color);
  text-decoration: none;
}

h4 {
  color: var(--title-color);
}

input {
  background: var(--bg-color);
  border: none;
  outline: none;
  color: var(--title-color);
  width: 100%;
}

.btn {
  color: var(--title-color);
  background: var(--bg-color);
  font-weight: 700;
  border-radius: 0px;
}

.btn:hover {
  background: var(--title-color);
  color: var(--bg-color);
}

.date-weather-info {
  background: var(--bg-color);
}

.main {
  width: 820px;
}

.date-weather,
.search,
.col {
  background: var(--border-color);
}