/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #010808;
  color: #dfceb5;
  font-family: 'nimbus', 'Courier New';
  line-height: 1.8; /* Increases spacing by 1.8 times the font size */
}

@font-face {
    font-family: 'harting';
    src: url('fonts/harting.plain.woff2') format('woff2'),
         url('fonts/harting.plain.woff') format('woff'),
         url('fonts/harting.plain.ttf') format('truetype');
         font-weight: normal;
         font-style: normal;
}

@font-face {
    font-family: 'nimbus';
    src: url('fonts/NimbusMono-Regular.woff2') format('woff2'),
         url('fonts/NimbusMono-Regular.woff') format('woff'),
         url('fonts/NimbusMono-Regular.ttf') format('truetype');
         font-weight: normal;
         font-style: normal;
}



.custom-icons li::marker {
  content: "☆ "; /* Sets a custom emoji or symbol */
  color: #d19f4d; /* Changes only the bullet color */
}



.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    position: relative;
    width: 100%;
    max-width: 900px;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}



a {
  color: #0bb36f;                  /* Emerald green color */
  text-decoration: none;           /* Remove default underline */
  border-bottom: 2px solid transparent; /* Hidden border placeholder */
  transition: border-color 0.3s ease;   /* Smooth animation */
  transition: color 0.3s ease;
}


a:hover {
  color: #076b43;
  font-style: italic;
  border-bottom-color: none;    /* Reveal underline border on hover */
}




.small-image {
  width: 500px;  /* Scales the width down to 200 pixels */
  height: auto;  /* Keeps the correct aspect ratio automatically */
}

.fit-image {
  max-width: 100%;  /* Ensures image never spills out of the column */
  height: auto; /* Preserves original aspect ratio */
  object-position: center; /* Forces the image to stay perfectly centered while scaling */
}

.center-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 25%; /* Adjust the image size as needed */
}

.image-gallery {
  display: flex;             /* Activates Flexbox layout */
  justify-content: center;   /* Centers images horizontally */
  align-items: center;       /* Centers images vertically */
  gap: 15px;                 /* Adds consistent space between images */
  flex-wrap: wrap;           /* Allows images to wrap on small screens */
}

.image-gallery img {
  max-width: 50%;           /* Prevents images from overflowing */
  height: auto;              /* Keeps the original image aspect ratio */
}

.gallery-item {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Creates 2 equal columns */
  gap: 20px;                            /* Space between images */
  max-width: 1000px;                    /* Limits maximum gallery width */
  margin: 0 auto;                       /* Centers gallery on the page */
  padding: 45px;                        /* Inner spacing for outer edges */
}

.gallery-item img {
  width: 100%;                          /* Fills the column width */
  height: 600px;                        /* Sets uniform height for all images */
  object-fit: cover;                    /* Crops image cleanly without distortion */
}
@media (max-width: 600px) {
  .gallery-item {
    grid-template-columns: 1fr;
  }
}


.highlight-box {
  border: 2px solid #10b981; /* 2px thick, solid line, orange color */
  border-radius: 8px;        /* Optional: Rounds the corners */
  padding: 15px;             /* Optional: Adds space inside the box */
  margin-bottom: 10px;       /* Optional: Space between boxes */
}