morning.html

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Morning</title>
<meta name="description" content="A poem">

<style>
body {
  margin: 4em;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(99svh - 8em);
}

@media (width < 30em) {
  body {
    margin: 2em;
  }
}

footer h4 {
  margin-block: 4em 0;
  opacity: 0.8;
}

footer p {
  margin-block: 0;
  opacity: 0.5;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: rgb(32, 34, 45);
    color: rgb(221, 221, 223);
  }
}
</style>
</head>

<body>

<p>
My legs are still hurting<br>
From the hills that I climb<br>
Oh sun in the sky<br>
Please give me some time<br>
</p>

<footer>
<h4>Morning</h4>
<p>March 2024</p>
</footer>

</body>
</html>