$primary-color: #333;
$secondary-color: #f0f0f0;
@import "bootstrap";
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noticia+Text:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

body {
  .navbar-brand {
    font-family: Oswald;
    text-transform: uppercase;
  }

  font-family: "Libre Franklin", Helvetica, sans-serif, sans-serif;
  background-color: $secondary-color;
  color: $primary-color;

  header {
    text-align: center;
    background-color: #333;
    color: white;
    padding: 20px 0;
  }

  ul.campaigns {
    list-style-type: none;

    li {
      margin: 10px;
      padding: 10px;
      border: solid grey 1px;
      border-radius: 10px;
      h1 {
        text-align: inherit;
        
      }
    }
  }

  nav {
    background-color: #333;
    overflow: hidden;
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    /* Style the links inside the navigation bar */
    a {
      float: left;
      color: #f2f2f2;
      text-align: center;
      padding: 10px 12px;
      text-decoration: none;
      font-size: 17px;
    }

    /* Change the color of links on hover */
    a:hover {
      background-color: #ddd;
      color: black;
    }

    /* Add a color to the active/current link */
    a.active {
    }
  }
}

header {
  background-color: $primary-color;
  padding: 10px;
  text-align: center;
}

header nav a {
  color: $secondary-color;
  text-decoration: none;
  margin: 0 15px;
}