body {
  --black-color: rgb(24,24,24);
  --orange-color-300: rgb(255, 181, 85);
  --orange-color-500: rgb(255, 161, 38);
  --orange-color-900: rgb(133, 92, 21);
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgb(24, 24, 24);
}
header {
  text-align: center;
  color: var(--orange-color-300);
}
header p {
  margin: 0 auto;
  text-align: left;
  width: 60vw;
  color: rgb(255, 199, 125);
  font-size: 0.8rem;
}
header a {
  display: block;
  margin: 0.3rem;
  text-align: center;
  text-decoration: none;
  color: var(--orange-color);
  text-shadow: 1px 1px 1px rgb(43, 43, 43);
}
main {
  background-color: antiquewhite;
  border-radius: 5px;
  width: 60vw;
  padding: 1.5rem;
  margin: 2rem auto;
}
ul {
  margin: 0 auto;
  width: 60vw;
  list-style: none;
  padding: 0;
}
ul li::before {
  content: "\2192";
  color: var(--orange-color-900);
  margin: 0.2rem;
}
ul a {
  font-size: 1rem;
  text-decoration: none;
  color: rgb(19, 19, 19);
  color: var(--orange-color-900);
}
ul a:hover {
  /* text-shadow for better contrast and hover visibility */
  text-shadow: 1px 1px 1px rgb(32, 32, 32);
  color: var(--orange-color-500);
}
footer {
  background-color: rgb(170, 65, 12);
  padding: 3rem;
}
footer a {
  text-decoration: none;
  color:antiquewhite;
  font-size: 1rem;
}
footer a:hover {
  text-decoration: underline;
  text-decoration-color: antiquewhite;
  text-shadow: 1px 1px 1px black;
}