body {
  background-color: #4D4D4D; /* backup if I don't like background image */
  font-family: "Special Elite", system-ui;
  font-size: 20px;
  text-align:center;
  color: #F7CBE9;
  background-image: url('https://codecraftworks.dev/web/iAO9Rm2vathuuumNbXFp/assets/straykids (1).jpg'); /* background image*/
  background-repeat: norepeat; /* image won't move*/
  background-size: 100%;/* image will always take up the whole page */
}
.header h1 {
  color: black;
  font-size: 30px;
}
.links {
  display:grid;
  background-color: #4D4D4D;
  padding: 5px; /*space between text and edge of box*/
  margin: 20px; /*makes the space between*/
}
/* the boxes of text*/
#pic{
  max-width: 100%; /*makes the width fit any screen size*/
  height: auto;
}
.About{
  background-color: #4D4D4D;
  padding: 20px; /*space between text and edge of box*/
  margin: 20px; /*makes the space between*/
  max-width: 100%;
}

h2,
h3,
h4,
h5,
h6 {
  font-size: 20px;
  color: white;
  text-align: center; /*not sure how to align lists aestheticly?*/
  padding: 2px;
  margin: 8px;
}
a:link {
  color: white;
} /* color of link before clicked*/
a:visited {
  color: #F76FCD; /* color after being clicked */
}
a:hover {
  color: #F7CBE9;
} /* color when hovered over*/