<footer class="bg-dark text-center text-light text-lg-start">
  <!-- Grid container -->
  <div class="container p-4">
    <!--Grid row-->
    <div class="row">
      <!--Grid column-->
      <div class="col-lg-6 col-md-12 mb-4 mb-md-0">
        <!-- <h5><b style="color:#9D131C; font-size: 30px;">C</b>ourse<b style="color:#9D131C; font-size: 30px;">I</b>nsider</h5> -->
        <h5>
          <img
            class="circular--square"
            src="/images/text-logo.png"
            alt="CourseInsider"
            style="width: 200px"
            />
        </h5>

        <p>
          CourseInsider is an application designed to provide CIS students at
          the University of North Alabama with specific insights about the
          courses they take. This comes in the form of ratings, difficulty
          levels, and languages/applications used.
        </p>
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-6 col-md-12 mb-4 mb-md-0">
        <!-- <h5 class="text-uppercase">Footer text</h5>
  
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
            molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae
            aliquam voluptatem veniam, est atque cumque eum delectus sint!
          </p> -->
        <h5>About</h5>
        <ul>
          <li><a href="search2">Search for Courses</a></li>
          <li><a href="#">Meet the Team</a></li>
          <li><a href="https://github.com/HubbbaBubbba/StackOps"  target="_blank">Repo</a></li>
        </ul>
      </div>
      <!--Grid column-->
    </div>
    <!--Grid row-->
  </div>
  <!-- Grid container -->

  <!-- Copyright -->
  <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
    Â© 2023 Copyright:
    <a class="text-light" href="https://github.com/HubbbaBubbba/StackOps#readme" target="_blank"
      >Stack_OPs.com</a
    >
  </div>
  <!-- Copyright -->
</footer>


<!-- internal style sheet -->
<style>
  body {
    background-color: rgba(108, 121, 119, 0.192);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  footer {
    /* position: relative; */
    margin-top: auto;
    font-family: "Anton";
    font-weight: 100;
  }

  .bg-dark ul {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
  }

  .bg-dark ul a {
    color: white;
    text-decoration: none;
    opacity: 0.6;
  }

  .navbar-brand {
    font-family: "Anton";
    font-size: 22px;
  }

  h1 {
    font-family: "Anton";
    text-decoration: underline;
  }

  h1 {
    font-family: "Anton";
    text-decoration: underline;
  }

  /* .footer-dark{
    position: absolute; 
    bottom: 0;
    width: 100%;
    font-family: 'Anton';
    font-weight: 100;
    
} 

.footer-dark {
    padding:50px 0;
    color:#f0f9ff;
    background-color:#282d32;
  }
  
  .footer-dark h3 {
    margin-top:0;
    margin-bottom:12px;
    font-weight:bold;
    font-size:16px;
  }
  
  .footer-dark ul {
    padding:0;
    list-style:none;
    line-height:1.6;
    font-size:14px;
    margin-bottom:0;
  }
  
  .footer-dark ul a {
    color:inherit;
    text-decoration:none;
    opacity:0.6;
  }
  
  .footer-dark ul a:hover {
    opacity:0.8;
  }
  
  @media (max-width:767px) {
    .footer-dark .item:not(.social) {
      text-align:center;
      padding-bottom:20px;
    }
  }
  
  .footer-dark .item.text {
    margin-bottom:36px;
  }
  
  @media (max-width:767px) {
    .footer-dark .item.text {
      margin-bottom:0;
    }
  }
  
  .footer-dark .item.text p {
    opacity:0.6;
    margin-bottom:0;
  }
  
  .footer-dark .item.social {
    text-align:center;
  }
  
  @media (max-width:991px) {
    .footer-dark .item.social {
      text-align:center;
      margin-top:20px;
    }
  }
  
  .footer-dark .item.social > a {
    font-size:20px;
    width:36px;
    height:36px;
    line-height:36px;
    display:inline-block;
    text-align:center;
    border-radius:50%;
    box-shadow:0 0 0 1px rgba(255,255,255,0.4);
    margin:0 8px;
    color:#fff;
    opacity:0.75;
  }
  
  .footer-dark .item.social > a:hover {
    opacity:0.9;
  }
  
  .footer-dark .copyright {
    text-align:center;
    padding-top:24px;
    opacity:0.3;
    font-size:13px;
    margin-bottom:0;
  } */
</style>
