@font-face {
  font-family: "Apercu Mono Pro";
  /*
    Ensure this path is correct relative to the CSS file
    and that the file is actually a .woff format (or change format() to "woff")
    If you have the .woff2 file, use that instead for better compression.
  */
  src: url("assets/css/fonts/font (1)/ApercuMonoPro-Medium.woff")
    format("woff2");
}

html {
  scroll-behavior: smooth;
}

* {
  font-family: "Apercu Mono Pro", monospace;
  font: "Apercu Mono Pro";
}

body {
  background-color: #fafafa;
  /* Use only font-family and include a generic fallback */
  font-family: "Apercu Mono Pro", monospace;
  /* Using a single padding value for consistency across the entire page */
  padding: 7.5px;
  margin: 0;
  text-align: left; /* All text-based elements inherit left alignment */
  color: black;
}

img {
  /* Need to make the img go green when i hover over it*/
}

ul {
  list-style-type: none;
  padding-inline-start: 0px;
  font: "Apercu Mono Pro";
  font-family: "Apercu Mono Pro", monospace;
  text-align: left;
  font-size: 70px;
  font-weight: 350;
}

/* * Apply the transition property to the base state (ul li).
 * This tells the browser to animate the 'color' and 'font-style' changes 
 * over half a second (0.5s) when the hover state is entered or left.
 */
ul li {
  transition: color 0.5s ease-in-out, font-style 0.5s ease-in-out;
}

ul li:hover {
  color: #00ff00;
}

p {
  text-align: center;
}

.image-with-caption {
  /* Moves the element to the right, allowing text to wrap on the left */
  float: right;

  /* Add space between the image and the text */
  margin-left: 20px;
  margin-bottom: 20px;
}

/* Target all anchor tags inside the navigation list */
ul li a {
  /* * 1. Remove the underline from the link.
   */
  text-decoration: none;

  /* * 2. Force the link color to inherit the color 
   * of its parent (the <li> or <ul>). 
   * If the parent text is black, the link will be black.
   */
  color: inherit;
}

/* * Optional: Style for when the user hovers over the link.
* It's good practice to provide a visual cue that it's clickable.
* You can remove this block if you want absolutely no change.
*/
ul li a:hover {
  /* For example, make it slightly lighter/darker or add a subtle effect */
  opacity: 0.8;
  /* Or, if the other list items change color on hover, use that color */
  /* color: #FF0000; */
}

/* Optional: Style for a link that has been "visited" (clicked before) */
ul li a:visited {
  /* Set visited links to the same color as unvisited links to keep a consistent look */
  color: inherit;
}