@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,700;1,300;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300;700&display=swap');

body {

  color: white;
  background-color: #121212;
  font-family:"Courier New", monospace;
  font-style: Light 300;
  font-size: 17px;
}



h1 {
  font-family: "Courier Prime", monospace;
  font-style: "italic";
  font-size: 25px;
}

h2 {
  font-family: "Courier Prime", monospace;
  font-style: italic;
}


.responsive {
  width: 100%;
  height: auto;
}


img {

  max-width: 100%;
  height: auto;
}

 /* unvisited link */
a:link {
  color: white;
}

/* visited link */
a:visited {
  color: white;
}

/* mouse over link */
a:hover {
  color: grey;
}

/* selected link */
a:active {
  color: white;
}


<!---menu here--->
<style>
 /* Add a black background color to the top navigation */
.topnav {
  background-color: black;
  overflow: hidden;
  position: fixed;
  top: 10;
  width: 100%;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: none;
  position: ansolute
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 16px 15px;
  }

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/*       IMAGE OVERLAY CRAP          */


* {box-sizing: border-box}

/* Container needed to position the overlay. Adjust the width as needed */
.container {
  position: relative;
  width: 100%;
  max-width: auto;
}

/* Make the image to responsive */
.image {
  display: block;
  width: 100%;
  height: auto;
}

/* The overlay effect - lays on top of the container and over the image */
.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.85); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: 1s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.container:hover .overlay {
  opacity: 1;
}


/* you've gotten this far. there may be other things here, to be found after digging around. why don't you check? */