h1 {
    text-align: center;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: normal;
}

body {
  margin: 0;
  padding-top: 70px; /* prevents content overlap */
}

/* Reset default list styles in the navbar*/
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;           /* makes it horizontal */
  justify-content: center; /* center links */
  gap: 30px;

  background-color: #111;
  padding: 16px 0;
}

/* Fix the navbar to the top */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

/* Link styles to navbar */
.nav-list a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  text-transform: lowercase;
}

/* Hover  effect for navbar */
.nav-list a:hover {
  opacity: 0.7;
}

.nav-list a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  text-transform: lowercase;

  display: inline-block; /* IMPORTANT for transform */
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-list a:hover {
  transform: scale(1.1); /* zoom in a bit */
  opacity: 0.8;
}

.nav-list a {
  color: white;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.2s ease, text-shadow 0.2s ease;
}

.nav-list a:hover {
  transform: scale(1.1);
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.6),
    0 0 12px rgba(247, 142, 196, 0.8);
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #111;
}

.banner {
  height: 220px; /* adjust */
  background-image: url("./banner.jpg");
  background-size: cover;
  background-position: center;
  margin: 0;
}