p{
    color: darkslategray;
    font-size: 20px;
    font-family: Arial;
}

li {
    color: darkslategray;
    font-size: 20px;
    font-family: Arial;
}

#navbar {
    padding: 20px;
    background-color: #fff8f5;
}


/* LIGHT DARK MODE BUTTON */

body {
            background-color: #f0f0f0;
            color: #333;
    
  
        }

body.dark-mode {
            background-color: #333;
            color: #333;
}    

    button { 
      position: absolute;
      right: 2px;
      padding: 4px;
    }

/* FOOTER */

footer {

    /*background-color: #fdb899;*/
    background-color: #fdb999;

margin-top: 50px;
}

.carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-color: #333; /* Dark gray background */
        border-radius: 20%; /* Optional: for a circular background */
        padding: 30px; /* Optional: adds space around the arrow icon */
    }

/* HEADER */
header {
    background-color: #f8d0bd; 
    color: darkslategray;
    margin-bottom: 50px;
    text-align: center; 
    padding: 15px;
    font-family: 'Comic Sans MS', cursive;
    font-style: italic;
}

.different-font {
    font-family: 'Comic Sans MS', cursive;
    font-style: italic;
}


/*HEADER IMAGE*/

    .header2 {
      position: relative;
      width: 100%;
      height: 300px;
      overflow: hidden;
      background-color: white;
    }

    #header-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .header-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 32px;
      font-weight: bold;
      text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
      text-align: center;
    }

    #change-img {
      display: block;
      margin: 20px auto;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }

/*Overlay Images*/
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Artwork page */

.caption {
  background-color:#f8d0bd; 
  margin: 5px;
  padding: 10px;
}

/* Video */

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