p {
    color: darkslategrey;
}

a {
    color: green;
}
body {
  font-size: 14px;
  color: darkslategrey;
}

h1 {
  color:olive;
}

body {
  background-image: url("hydrothermalvent.jpg"),  url("deepdarkness.avif");
    background-repeat: no-repeat;
  background-size: cover, 3180px 1670px;
}


backbutton {
  bottom: 10px;
  height: 300px;
  width: 190px;
  
}


// <uniquifier>: Use a unique and descriptive class name

.honk-<uniquifier> {
  font-family: "Honk", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" 15,
    "SHLN" 50;
}

/* .info {
  font-family: monospace;
  position: absolute;
  line-height: 20px;
  font-size: 14px;
  left: 20px;
  top: 20px;
} */


/* Container needed to position the button. Adjust the width as needed */
.container {
  position: relative;
  width: 50%;
}

/* Make the image responsive */
.container img {
  width: 100%;
  height: auto;
}

/* Style the button and place it in the middle of the container/image */
.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.container .btn:hover {
  background-color: black;
}