/* Global */
body {
  margin: 0 auto;
  padding: 0;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-weight: 400;
  background-image: url("../img/space.gif");
  background-color: black;
  cursor: url("../img/swordcursor.gif"), auto;;
}

@font-face {
  font-family: "Special Gothic Expanded One", sans-serif;
  font-weight: 400;
  src: "fonts/SpecialGothicExpandedOne.ttf" format("truetype");
}

.black-top-bar {
  background-color: black;
}

.nav-link, .navbar{
  border: 5px ridge #bbb;
  color: white;
}

.nav-link {
  margin-left: 5px;
  margin-right: 5px;
}

.btn{
  align-items: center;
  color: purple;
  font-size: 1.5rem; /* Increase icon size */
  padding: 15px; /* Add more padding */
  width: auto; /* Optional: Set a fixed width */
  height: auto;
}

.btn:hover{
  color: white;
}

.dropdown-menu, .dropdown-item{
  background-color: black;
  color: white;
}

.dropdown-item.hover{
  background-color: white;
  color: black;
}

.header, h1 {
  color: red;
  text-align: center;
  font-size: 1.75em;
  margin-top: 20px;
}

.header + .home-spacer {
  margin-top: 15px;
}

.hover:hover {
  filter: brightness(80%) sepia(100%) hue-rotate(330deg);
}

.photography{
  background-color: black;
  border: 4px solid black;
  color: white;
  text-align: center;
  max-width: 50em;
  margin: 0 auto; /* Added */
  float: none; /* Added */
  margin-bottom: 10px;
}

.panorama{
  color: white;
  font-size: x-large;
  text-align: center;
  max-width: 80%;
  margin: 0 auto;
  float: none;
  margin-top: 20px;
}

.img-fluid{
  margin-top: 10px;
  margin-bottom: 10px;
}

.fadeIn {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.hidden {
  opacity: 0;
  transform: translateY(20px); /* Slight downward offset for a smooth effect */
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.ekko-lightbox {
  background: rgba(0, 0, 0, 0.8);
  border: none;
  padding: 0; /* Adjust the alpha value to control darkness */
}

/* You might need to adjust the lightbox container styles */
.ekko-lightbox-container {
  background: transparent; /* Set the container background to be transparent */
  border: none;
  padding: 0;
}

.modal-body, .modal-content, .modal-header, .ekko-lightbox-nav-overlay {
  background: transparent; /* Set the container background to be transparent */
  border: none;
  padding: 0;
}

.modal-header button, .modal-header button:hover {
  color: white;
}

footer{
  font-family: 'Times New Roman', Times, serif;
  width: 100%;
  font-size: small;
  color: white;
  text-align: center;
  max-width: 50em;
  margin: 0 auto; /* Added */
  float: none; /* Added */
  padding-top: 30px;
}