$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=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 {
    padding: $spacer * .25 $spacer * .5 ;
  }
  .navbar-brand {
    font-family: Oswald;
    text-transform: uppercase;
    i {
      margin-right: $spacer * .25;
    }
  }

  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;
  }

  .hero {
    margin-top: $spacer * .5;
    text-align: center;
    font-size: $font-size-base * .8;
    h1 {
      font-family: Oswald;
      color: #592B1A;
      font-weight: bold;
      text-transform: uppercase;
    }

  }

  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;
    .navbar-brand {
      color: #592B1A;
      font-weight: 600;
    }
    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 {
    }

  }
  .card-title a {
    color: inherit;
    text-decoration: none;
    &:hover {
      color: $gray-700;
      transition: color .2s ease-in;
    }
    &:not(:hover) {

      transition: color .2s ease-in;
    }
  }
  // .card img {
  //   height: 150px;
  //   width: 150px;
  // }
}

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

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