body {
  font-family: Calibri, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background: radial-gradient(circle, #4169E1, #ffffff);
  padding: 20px;
  color: #fff;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  display: inline;
  margin-right: 20px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

.hero {
  text-align: center;
  padding: 50px 0;
}

section {
  padding: 20px;
}

footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

.dark-mode {
  background: #333;
  color: #fff;
}

.dark-mode header {
  background: radial-gradient(circle, #333, #000);
}

.dark-mode nav ul li a {
  color: #fff;
}