/* css styles */

.image-container {
    position: relative;
    display: inline-block;
  }
  
  /*-- Add the CSS for the image hover effect --*/
.image-hover {
    transition: transform 0.2s; /* Add a smooth transition effect */
    display: block; /* Ensure the image takes up space */
    width: 100%; /* Make sure the image covers the entire container */
    }

.image-hover:hover {
    transform: scale(1.3); /* Increase the scale (size) of the image on hover */
    }

.image-click.clicked {
        transform: scale(3); /* Increase the scale (size) of the image on click */
      }

/*-- Add the CSS for the image name --*/
.image-name {
    position: absolute;
    top: 95%; /* Position the text vertically in the middle */
    left: 50%; /* Position the text horizontally in the middle */
    transform: translate(-50%, -50%); /* Center the text */
    background: rgba(0, 0, 0, 0.7); /* Optional background color for better readability */
    color: white; /* Text color */
    padding: 5px 10px; /* Optional padding around the text */
    border-radius: 5px; /* Optional border-radius for a rounded background */
    }



/* Light mode styles */
body {
  background: url('img/parchment_background.jpg') repeat;
  color: #2f2f26; /* Assuming this is readable on light backgrounds */
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  body {
    background: #1e1e1e; /* Dark background */
    color: #f7eaac; /* Lighter text for readability on dark background */
  }

  .container {
    background: rgba(0, 0, 0, 0.8);
    border-color: #555;
    color: #ffffff; /* Ensure text inside containers is also readable */
  }

  /* Add dark mode styles for other elements as needed */
}

.navbar li.nav-item a.nav-link a[href*="index.html"] span {
  color: #164a58 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'New Rocker', cursive;
  color: #4a3b29;
}

p {
  color: #5e4d17; /* Example of a lighter color for better readability */
}

quarto-listing quarto-listing-container-default{
  color: #d4af37;
}

.navbar {
  background-color: #21215b; /* Deep green for the fantasy feel */
  border-bottom: 3px solid #878e23;
}

.navbar a:hover {
  color: #d4af37; /* Golden color */s
  text-decoration: none; /* Removes the underline */s
}

.navbar a.active, .navbar a:active {
  color: #d4af37; /* Golden color */
  background-color: transparent; /* Optional: change if you want a background for active links */
}

.navbar a.active, .navbar a:focus {
  color: #d4af37; /* Set your desired color */
  background-color: transparent; /* Set the background if needed, or leave as transparent */
}

/* Optional: if the active state is set by a different class, use that class name instead */
.navbar .your-active-class {
  color: #d4af37; /* Set your desired color */
  background-color: transparent; /* Set the background if needed, or leave as transparent */
}

.nav-link {
  color: #f4e4bc;
}

.container {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.button {
  background-color: #8B4513;
  color: white;
  padding: 10px 20px;
  text-align: center;
  display: inline-block;
  border: none;
  border-radius: 4px;
}

.button:hover {
  background-color: #A0522D;
}

.icon {
  background: url('img/sword_icon.png') no-repeat center;
  width: 30px;
  height: 30px;
}


/* Fonts */

.new-rocker-regular {
  font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
}

.almendra-display-regular {
  font-family: "Almendra Display", serif;
  font-weight: 400;
  font-style: normal;
}

.almendra-regular {
  font-family: "Almendra", serif;
  font-weight: 400;
  font-style: normal;
}

.almendra-bold {
  font-family: "Almendra", serif;
  font-weight: 700;
  font-style: normal;
}

.almendra-regular-italic {
  font-family: "Almendra", serif;
  font-weight: 400;
  font-style: italic;
}

.almendra-bold-italic {
  font-family: "Almendra", serif;
  font-weight: 700;
  font-style: italic;
}