:root {
  --dark-forest-green: #0B3D20;
  --mystic-purple: #473854;
  --ethereal-gold: #C9A678;
  --dusky-rose: #986C6A;
  --parchment-white: #F4EDE4;
  --deep-sapphire: #0A3A4A;
  --emerald-green: #087830;
  --antique-gold: #DAA520;
  --burgundy-: #800020;
  --twilight-mist: #8A9597;
}


html, body {
  scroll-behavior: smooth;
  background-color: black; /* Sets the background of the entire page */
  color: var(--parchment-white); /* Sets the default text color to a light shade for contrast */
  font-family: "Space Grotesk", sans-serif; /* Example of setting a default font */
  font-optical-sizing: auto;
  font-style: normal;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background: black none !important; /* No image, just a color, with important */
}


@media (max-width: 991.98px) { /* Covers extra small and small devices up to medium devices */
  html, body {
      background-color: black !important; /* Ensures the background stays black */
      color: white; /* Keeps text visible */
  }
}


/* Force a black background on small and medium screens */
@media (max-width: 991.98px) { /* Covers extra small and small devices up to medium devices */
  html, body {
      background-color: black !important; /* Ensures the background stays black */
      color: white; /* Keeps text visible */
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) { /* Covers medium to large devices */
  html, body {
    background-color: black !important; /* Ensures the background stays black */
    color: var(--parchment-white); /* Ensures the color stays consistent */
  }
}

@media (min-width: 1200px) { /* Covers extra large devices */
  html, body {
    background-color: black !important; /* Ensures the background stays black */
    color: var(--parchment-white); /* Ensures the color stays consistent */
  }
}

     /*nav*/
  
     .breadcrumb {
      padding: 10px 15px; /* Adjust padding as needed */
      border-radius: 5px; /* Rounded corners */
      position: fixed;
      width:100%;
      z-index: 2;
      color: var(--parchment-white);
    }
      .breadcrumb a {
        color: var(--ethereal-gold);
      }
      
  .author-name{
    font-family: "Whisper", cursive;
    font-weight: 400;
    font-style: normal;
    font-size:90px;
    z-index: 2;
    color: var(--parchment-white);
  }
  

  /* Media Queries */
@media (max-width: 768px) {
  .author-name {
    padding-top: 60px; /* Increased padding for mobile to separate from breadcrumb */
  }
}

@media (max-width: 991.98px) {
  .breadcrumb {
    top: 0; /* Ensures the breadcrumb is at the very top on smaller screens */
  }
  .author-name {
    text-align: center; /* Centers the author name on smaller screens */
  }
}
  .navbar-nav .nav-item {
    margin-right: 30px; /* Increases space between nav items */
  }
  
  .nav-item{
    font-size: 30px;
    color: var(--ethereal-gold);
    }
    
    .nav {
      padding-left: 0; /* Removes padding for list */
      list-style: none; /* Removes list style */
     
    }
    
    .nav-link {
      color: var(--ethereal-gold) !important; /* Apply ethereal gold color to nav links */
    }
    
    .nav-link:hover, .nav-link:focus {
      color: darken(var(--ethereal-gold), 10%) !important; /* Darken the color slightly on hover for contrast */
      text-decoration: none; /* Optional: Removes the underline on hover */
    }
    
    .nav-link:hover, .nav-link:focus {
      color: var(--parchment-white) !important; /* Manually specified darker shade of gold */
      text-decoration: none; /* Optional: Removes the underline on hover */
    }
    
    
    
    a, .nav-link {
      color: var(--parchment-white);
    }
    a:hover, .nav-link:hover {
      color: var(--parchment-white);
    }


    .highlight-link a {
      background-color: var(--mystic-purple); /* Light blue background */
      border: 2px solid var(--ethereal-gold) /* Light blue border */
    }
         
    .list-inline-item a:hover {
      transform: scale(1.2); /* Slightly enlarge on hover */
      background-color: var(--ethereal-gold);
    }
  

    .iframe-container {
      width: 100%;
      height: 100vh; /* Full viewport height */
      background-color: black !important;
    }
    .iframe-container iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }
  
    .modal-content {
      background-color: black;
      color: white;
    }
    .modal-header, .modal-body {
      background-color: black;
    }
    .modal-header .close {
      color: white;
    }
  
    @media (max-width: 576px) {
      .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
      }
      .modal-content {
        height: 100%;
      }
      .iframe-container {
        height: calc(100vh - 56px); /* Adjust for smaller screens */
      }
    }
    /*nav*/

    .title-box {
      width: 50%;
      margin-bottom: 20px;
      background-color: var(--mystic-purple); 
      color: var(--ethereal-gold);
      box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Optional: adds a shadow for depth */
      border-radius: 8px; /* Optional: rounds the corners */
    }
    
    .text-box {
      background-color: black;
      color: var(--ethereal-gold);
      font-size: 18px; /* Adjusted for better readability */
      padding: 30px; /* Add more padding */
      text-align: center;
    }
    
    @media (max-width: 991.98px) {
      .col-md-6 {
        padding: 0; /* Remove padding to use space more efficiently */
      }    
      .text-box {
        width: 100%; /* Use full width for text content */
        font-size: 14px; /* Slightly smaller font for small devices */
        padding: 10px; /* Adjust padding */
      }
    }
    
    @media (min-width: 992px) and (max-width: 1199.98px) {
      .text-box {
        font-size: 18px; /* Increase font size for medium screens */
      }
    }

      /* Ensures the image covers the full half of the screen */
  .img-fluid.h-100 {
    object-fit: scale-down;
    height: 100%;
    width: 100%;
  }

  @media (max-width: 991.98px) {
    .img-fluid.h-100 {
      height: 50vh; /* Reduce height on smaller screens to minimize negative space */
      object-fit: cover; /* Ensure the image covers the height and width without distortion */
    }
  }