header {
    /* add header image below */
    /* can use a file path before the photo is uploaded to ceo */
    background: url('../images/GCA01699.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center; /* adjusts image placement, can also be set as percentages */
  

    /* note: there are many alternative ways to style the header
        other than a photo and 2 headlines. 

        Here are some other IDS examples, you can inspect the code to 
        see how they did it: 

        Headlines that fade in: http://specials.idsnews.com/iu-kappa-kappa-gamma-sorority-hazing-big-little/
        Header with a video: http://specials.idsnews.com/bloomington-bluebird-bar-coronavirus-guidelines/
        Animated header: http://specials.idsnews.com/iu-president-michael-mcrobbie-speeches-gpt-2/
        Another animated/fade-in header: http://specials.idsnews.com/steve-moore-almost-died-coronavirus-bloomington/
        Header with multiple photos: http://specials.idsnews.com/what-wasnt-said-racism-indiana-university-bloomington-iu/
        Dramatic photo header: http://specials.idsnews.com/iu-coronavirus-testing/
        Cute animation header: http://specials.idsnews.com/will-your-mail-in-ballot-arrive-in-time-to-count-usps-election-2020/index.html
        Cool typography (from W+P): http://specials.idsnews.com/a-little-less-than-kind-iu-theater-bloomington/index.html
        Not full width header: http://specials.idsnews.com/how-iu-does-its-laundry/
    */
}

/* SET ANY MORE STYLES YOU WANT HERE: */

.box-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  width: auto;
  margin: 10px;
  padding-top: 7px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #e5b74d;
  border: 2px solid #000000;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.box:hover {
  background-color: #d07c0e;
}

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

.graph-container {
  width: 100%; /* Take the full width */
  max-width: 800px; /* Set your desired max-width */
  margin: 0 auto;   /* Center the container */
}

.active {
  background-color: #8E6600;
  color: #F2EEE3; /* You might want to change the text color for better visibility */
}


.footer-logo {
  max-width: 20%; /* Ensure the image doesn't exceed its container */
  height: auto; /* Maintain the image's aspect ratio */
  display: block; /* Remove extra space below the image */
  margin: 0 auto; /* Center the image horizontally */
}

/* Optional: Add some space around the image */
.container {
  padding-top: 2rem !important;
  padding-bottom: 8px;
}

footer {
  margin-top: 0px;
}

footer .col-md-3 {
  margin-bottom: 20px; /* Adjust the value for the desired space */
}


/* MEDIA QUERIES FROM SMALLEST TO LARGEST = MOBILE FIRST */
/* use these for responsive design — you can set different styles based on how wide the screen is */
/* Extra small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
    
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    header {
        /* adjust header image positioning for larger devices if needed */
        /* you can also change the header image for mobile here */
        /* background-position: 50% 50%; */
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}