/* **********************************************************
 * add custom styles after imports below
 * ********************************************************** */

@import "default.css";
@import "layout.css";
@import "menu.css";
@import "queries.css";

/* **********************************************************
 * to import a font, use the @import option, you can find
 * lots of font options at fonts.google.com for example.
 * ********************************************************** */

@import url('https://rsms.me/inter/inter.css');

@font-face {
  font-family: 'NationalPark'; /* Choose a name for the font */
  src: url('/fonts/NationalPark-Medium.woff') format('woff'); /* Path to the .woff file */
  font-weight: normal; /* Adjust according to the font's weight */
  font-style: normal; /* Adjust according to the font's style (normal/italic) */
}

html {
    font-family:monospace;
    /* line-height: 1.4em; */
    
    
}

#example-1 p{
    /* font-family:inter; */
    font-family:'NationalPark', sans-serif;
   
    line-height: 1.4em;
}


p {
  font-family:'NationalPark', sans-serif;
 
  line-height: 1.4em;
}

.p2 {
  font-family:monospace;
}


/* **********************************************************
 * Customizing
 *
 * changes to default settings like colors, typography,
 * spacing can be made in default.css
 *
 * other custom settings, start below
 *
 * ********************************************************** */

* {
    line-height: 115%;
    font-weight: 400;
}

body {
    background-color: var(--color-bg);
    color: var(--color-fg);
}

::selection {
  background-color: rgb(31, 31, 31);
  color:rgb(255, 255, 255);
}

  /* Week Numbers */
  .week_numbers {
    display:block;
    /* gap: 10px; */
    position: fixed;
    left:0;
    bottom: 0; /* Stick to the bottom of the viewport */
    padding: 30px;
    z-index: 300; /* Ensure it stays above other content */
    width: 100%;
    justify-content: space-between;
  
    }

    .image-container {
      position: relative; /* Position relative for absolute positioning of hover image */
      display: inline-block; /* Allow the container to wrap around the image */
  }
  
  .original-image {
      display: block; /* Ensure the original image is displayed */
  }
  




  /* hover image */
  .image-container {
    position: relative; /* Position relative for absolute positioning of hover image */
    display: inline-block; /* Allow the container to wrap around the image */
}

.original-image {
    display: block; /* Ensure the original image is displayed */
    transition: opacity 0.3s ease; /* Add transition for opacity */
}

.hover-image {
    position: absolute; /* Position it on top of the original image */
    top: 0;
    left: 0;
    width: 100%; /* Make it the same size as the original */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Start hidden */
    transition: opacity 0.3s ease; /* Add transition for opacity */
}

.image-container:hover .hover-image {
    opacity: 1; /* Show the hover image on hover */
}

.image-container:hover .original-image {
    opacity: 0; /* Hide the original image on hover */
}


/* SLIDERS */
.slider {
  position: relative; /* Position relative for absolute positioning of buttons */
  overflow: hidden; /* Hide overflow to prevent showing images outside the container */
  margin: auto; /* Center the slider */
}

.slider-container {
  display: flex; /* Use flexbox to align images in a row */
  transition: transform 0.5s ease; /* Add transition for sliding effect */
  width: 100%; /* Full width of the slider */
}

.slider-container img {
  width: 100%; /* Make images responsive */
  flex: 0 0 100%; /* Each image takes full width of the container */
}

button {
  position: absolute; /* Position buttons on top of the slider */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Adjust for button height */
  background-color: rgba(0, 0, 0, 0); /* Semi-transparent background */
  border: none; /* Remove default border */
  cursor: pointer; /* Change cursor to pointer */
  padding: 10px; /* Add some padding */
  z-index: 100; /* Make sure buttons are above images */
}

.prev {
  left: 10px; /* Position left */
}

.next {
  right: 10px; /* Position right */
}



@media (orientation: portrait) {
    * {
        font-size: 16px;
    }
}