/**** CSS file for web site home page to customize bookstrap 5.3 elements *****/


/* Nav item specific styling */
.navbar-brand {
  color:blue;
  font-size: 35px;
  font-style: oblique;
}
.nav-link {
font-size:25px;
}

 nav button {
  font-size:20px;
  text-align: center;
  color:black;
  border-radius: 30px;
  background-color: lightblue;
  margin-bottom: 10px;
}

 /* Dark-mode CSS */
 .dark-mode { 
  background-color: black; 
  color: white; 
} 

/* link interaction states */
/* mouse over link */
a:hover {
    color: darkorange;
  }

/* heading element specific styling */  
h1, h2 {
    text-align: center;
}
/* styling for H3,H4 */
h3, h4 {
    padding-top: 20px;
    padding-bottom: 10px;
    text-align: center;
}    
/* increase padding above and bellow for H3 in article elements  */
article {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Specific paragraph styling */
body p  {
   font-size: 25px;
   text-align: center;
}

/* background image styling*/
body {
    background-image: url('/images/Background.svg');
    background-color:lightgrey;
}    

/* styling for unordered list for second list specific styling */
ul:nth-child(2) li {
  font-size:40px;
  background-color:lightblue;
}

/* styling for ordered list on Learn More page */
ol li {
  font-size:30px;
  text-align: left;
  background-color:lightblue;
}  
ol p {
text-align: left;;
}

figcaption {
  text-align: center;
  font-size: 30px;
}

/*table colors */
table th {
  background-color:lightblue;
  color:black;
}
table tr:nth-child(even) {
  background-color: lightblue;
}
 
/* Button styling */
  .button {
    font-size:40px;
    text-align: center;
    color:black;
    margin-bottom: 10px;
    background-color: blue;
 } 

 /* thematic page break <hr> styling */
    hr {
        width: 100%;
        color: blue;
        box-shadow: 0 2px 5px blue;
        height:5px
}
/* image specific styling */    
    img {
        background-color: lightblue;
        border-color:blue;
        border-style: ridge;
        border-width: 5px;
}

/* footer H4 specific CSS */
footer h4:nth-child(2) {
  font-size: 30px;
}

/* Center footer */
footer p {
    text-align: center;
}
/* carousel specific styling */
#demo {
    margin: 0 auto;  /* Center the carousel */
    min-width: 40%; /* Min carousel width */
    min-height: 40%;/* Min carousel height */
    max-width: 50%; /* Max carousel width */
    max-height: 50%; /*Max carousel height */
}

.carousel-item {
  position: relative;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* Center the caption horizontally */
  background: rgba(0, 0, 0, 0.25); /* Optional: semi-transparent background */
  color: white; /* Text color */
  width: 100%; /* Ensure the caption takes full width */
 /* padding: 2px; /* Padding around the caption */
  text-align: center; /* Center the text */
 }

 /* reduce the <h3> header size for the carousel caption for better readability on smaller screens */
 .carousel-caption  {
  font-size: 15px; /* Adjust the font size */
  padding-top:5px;
 }

 /* Change the color of the carousel control icons */
 .carousel-control-prev-icon,
 .carousel-control-next-icon {
     background-color:blue; /* Set background color */
     width: 50px;
     height:70px;
     text-align:center;
     color: white;
     font-weight: bolder;
     font-size: 20px;
     padding-right: 10px;
     
        
 }
/* position control icons on outside of carousel images */
 .carousel-control-prev {
  left: -50px;
  bottom: 250px;
  transform: translateY(0);
 }
 .carousel-control-next {
  right: -50px;
  bottom: 250px;
  transform: translateY(0);
}

/* Scrolling container class specific styling */
.scrolling-container {
    width: 100%;           /* Ensure the container takes the full width */
    overflow: hidden;      /* Hide anything that overflows the container */
  }
  
  /* Scrolling conatiner heading specific styling */
  .scrolling-heading {
    display: inline-block;  /* Make the heading behave like a block element */
    white-space: nowrap;    /* Prevent the heading from breaking into multiple lines */
    animation: scroll-left 30s linear infinite;  /* Scroll the text from right to left */
    color: blue;
    font-size: 40px;
    font-weight:bold;
  }
  
  /* CSS for animation of scrolling heading- moves across screen right to left */ 
  @keyframes scroll-left {
    0% {
      transform: translateX(100%);  /* Start position (off the right side) */
    }
    100% {
      transform: translateX(-100%); /* End position (off the left side) */
    }
  }
 
/* Button styling */
.button {
  font-size:40px;
  text-align: center;
  color:white;
  margin-bottom: 10px;
} 

 /* Contact area styling */
 form {
  border: 2px solid black;
  border-radius: 1em;
  text-align:center;
  background-color: lightblue;
  margin-bottom:20px;  
}
label {
  display:inline-block;
  min-width: 100px;
  color:black;
  padding-top:10px;
  
}


/* styling for input textarea type */
textarea {
  width:60%;
  font-size:25px;
  border-radius: 1em;
}
/* styling for input text type */
 input submit{
  width:100%;
  padding:10px;
  font-size:15px;
  border-radius: 1em;
}  

input {
  width:45%;
  font-size:25px;
  border-radius: 1em;
}  

/* Center the div container */
.video-container {
  display: flex;
  justify-content: center;  /* Horizontally center */
  padding-bottom: 30px;
}
/*
iframe {
  max-width: 100%;
} */


a {
  color: darkblue;
  font-weight: bold;

}