/* **********************************************************
 * 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');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet');


@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;
    font-family: "Roboto Mono", monospace;
    line-height:1.3em;
}

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


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

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

body {
    background-color: var(--color-bg);
    color: var(--color-fg);
    /* cursor: url('/assets/cursor.png') 0 0, auto; */
    
}

a {
  /* cursor: inherit; */
}

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

/* hover image */
.hover-container {
  position: relative; /* Keep this for any relative positioning within the container */
  border-bottom: 1px dashed grey;
  z-index: 10;
}

.hover-image {
  display:none;
  position:fixed; 
  top: 50%; /* Center vertically */
  left: 24.7%; /* Center horizontally */
  transform: translate(-47%, -50%); /* Adjust to account for the image's own dimensions */
  width: auto;
  height: 47%;
  z-index: -1; /* Ensure the image is on top */
  
  opacity:0;
  mix-blend-mode: exclusion;
}

/* p.hover-image {
  right:50%;
  color: inherit;
  font-weight: bold;
  font-size: small;
  line-height: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0);
  z-index: 0;
} */

.hover-container:hover .hover-image {
  display: block;
  opacity: 1; 
}

.box{
  padding: 50%;
  background-color: rgba(255, 255, 255, 0);
  /* border: 1px dashed grey; */
}

.img-border {
  border: 0.2px solid black;
  border-radius: 1px; /* Optional, for rounded corners */
}




  /* 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;
   
    }

    

  

  

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