@font-face {
  font-family: myFirstFont;
  src: url("/fonts/Eds-Market-Narrow-Slant/Eds Market Narrow Slant.otf");
}

body {
    background-color: #261f26;
    font-family: 'myFirstFont', sans-serif;
    color: #ffffff;
}



header {
    background-color: #261f26;
    top: 0;
    z-index: 1; /* Ensure the navigation bar stays on top of other content */
    width: 100%;
  }

  .header-image{
    width: 100%;
    height: 100%;
    background-position: top-left;
  }

  .nav-item{
    padding-left:5%;
    padding-right:5%;
    font-size: large;
  }

  .nav{
    width: 80%;
    padding-left: 7%;
  }

  .article-image-tall{
    max-width: 300px;
    height: 100%;
    background-position: top-left;
    position: relative;
  }

  .article-image-wide{
    padding-left: 10%;
    width: 80%;
    max-height: 500px;
    background-position: top-left;
    position: relative;
  }

  .info-pannel{
    background-color: #1D181D;
    color: #ffffff;
    padding: 20px;
    margin: 20px;
    border-radius: 5px; 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  }

  .no-padding{
    padding: 0%;
    margin: 0%;
  }

  .left-side{
      margin-left: 0!important;
      margin-right: 0!important;
  }

  .center-image{
    display: block;
    width: 100%;
    max-height: 100%;
    position: relative;
  }

  .center-content{
    text-align: center;
  }

  .facebook-button{
    background-image: url('/images/CSCFacebook.png'); 
    width: 100px;
    height: 100px;
    z-index: 1;
  }

  .sm-padding{
    padding: 5%;
  }

  .red-link{
    color: #a71f23;
  }

  .eds-market-narrow{
    font-family: 'Eds Market Narrow Slant', sans-serif;
  }

  .helvetica{
    font-family: 'Helvetica', sans-serif;
    font-size: large;
  }

  .center-text{
    text-align: center;
  }


  /* Carousel base class */
.carousel {
  margin: 5%;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}


.btn-bd-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
}


.bi {
  vertical-align: -.125em;
  fill: currentColor;
}