/* 
Group 3
Final progress report

Colors
Background: #F5F5F5
Buttons: #4A90E2
Borders and Headings: #A8E6CF
Card Backgrounds: #333333
*/

/* Header customs */

#index-header {
  background-image: url(images/perry-header-background.jpg);
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  height: 40vh;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}

header h1 {
  font-size: 2.5em;
  margin: 0;
  padding: 10px;
  border-radius: 15px;
  color: #4a90e2;
}

#index-header-content {
  background-color: rgba(51, 51, 51, 0.9);
  padding: 20px;
  border-radius: 15px;
  display: inline-block;
  margin-top: 1.8em;
}

/* Heading customs */

h1 {
  font-family: "Tagesschrift", system-ui;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  color: #4a90e2;
}

h2 {
  font-family: "Tagesschrift", system-ui;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  color: #4a90e2;
}

h3 {
  font-family: "Tagesschrift", system-ui;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  color: #4a90e2;
}

p {
  font-family: "Source Code Pro", monospace;
  line-height: 1.6;
  color: #F5F5F5;
  /* Font family and text customs */
}

#problem-p {
  font-size: x-large;
}

footer p a {
  color: #F5F5F5;
}

.text-decoration-none {
  text-decoration: none;
  /* Sets up no text decor for links */
}

.carousel-control-prev-icon {
  background-color: #333333;
  border-radius: 15px;
  padding: 30px;
}

.carousel-control-next-icon {
  background-color: #333333;
  border-radius: 15px;
  padding: 30px;
}

.carousel-img {
  display: block;
  margin: auto;
  height: auto;
  border-radius: 15px;
  height: 50vh;
  /* Manages the carousel images */
}

.carousel-div {
  background-color: #333333;
  /* Carousel div background */
}

.carousel-div h3:hover {
  color: #A8E6CF;
}

.carousel-caption-custom {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 10px;
  /* Carousel caption styling */
}

.custom-card {
  background-color: #333333;
  /* customizes card backgrounds and borders */
}

.custom-card-hover:hover {
  background-color: #A8E6CF;
}

.custom-card-hover:hover h2 {
  color: #333333;
}

.custom-card-hover:hover p {
  color: #4a90e2;
}

.custom-card-events {
  background-color: #333333;
  border: #A8E6CF 0.5em solid;
  /* customizes card backgrounds and borders in events */
}

.event-border {
  border: #333333 0.5em solid;
  border-radius: 15px;
  /* Sets up a border around the events & amendments div */
}

.list-group-item {
  border: #A8E6CF 0.2em solid;
  /* Sets list item borders, overrides BS5 defaults */
}

body {
  background-color: #F5F5F5;
  font-size: large;
  /* Body background color */
}

footer {
  background-color: #333333;
  /* Background color for the footer */
}

footer a:hover {
  color: #A8E6CF;
}

nav {
  background-color: #333333;
  /* Custom background color for the nav */
}

.navbar-brand {
  color: #A8E6CF;
  font-family: "Tagesschrift", system-ui;
  background-color: #333333;
  /* Sets the words of the navbar color and font family */
}

.navbar-brand:hover {
  color: #4a90e2;
}

.nav-link {
  color: #F5F5F5;
  font-family: "Source Code Pro", monospace;
  /* nav link color and font family */
}

.nav-link:hover {
  color: #4a90e2;
}

.navbar-toggler {
  color: #A8E6CF;
  background-color: #A8E6CF;
  /* Sets color for the nav toggler */
}

.active-nav {
  background-color: #A8E6CF;
  border-radius: 15px;
  color: #333333;
  /* Sets the active link color */
}


.active a {
  color: #333333;
  /* Sets the active link text color */
}

.thanks-a {
  color: #A8E6CF;
}

.btn {
  background-color: #A8E6CF;
  border-color: #A8E6CF;
  color: #333333;
  /* Sets button color */
}

.btn-primary:hover {
  background-color: #4a90e2;
}

label {
  color: #A8E6CF;
  /* Sets the label color */
}

@media screen and (max-width: 900px) {
  #index-header-content {
    padding: 0px;
    margin-top: 0em;
  }

  header h1 {
    font-size: 2em;
    margin: 0;
    padding: 10px;
    border-radius: 15px;
    color: #4a90e2;
  }

}

@media screen and (max-width: 780px) {

  .carousel-img {
    width: 100%;
    height: auto;
    /* Ensures the size of the carousel imgs are uniform below 780px */
  }

  .event-border {
    border: #333333 0px solid;
  }


}

@media screen and (max-width: 430px) {

  #problem-p {
    font-size: small;
    /* fixes small issue with the carousel and screens below 400px */
  }

  .carousel-caption-custom {
    left: 40%;
    transform: translateX(-26%);
    /* Carousel caption styling */
  }

}

@media print {
  .no-print {
    display: none;
    /* Hide elements not meant for print */
  }
}