body {
  background: linear-gradient(to bottom, #9DCAEB, #AFD5F0, #C3EEFA, #D4FAFA);
  /* background: linear-gradient(to bottom, #F7FDFD, #E7FCFF, #CFF9FB, #B9F2FB, #92E7F0); */
  background-attachment: fixed; /*edit*/
  font-family: "Nunito";
  font-size: 12pt;
  color: #226EA6;
}

.content {
  width: 900px;
  margin: 0 auto;
}

.center {
  margin: 0 auto;
}

.nunito-font {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h2 {
  border-bottom: 3px dotted;
  text-align: left;
}

.title {
  font-size: 50pt;
  font-weight: 800;
  text-shadow: 1px 1px 1px white;
  justify-content: center;
}

 /* unvisited link */
a:link {
  color: #226EA6;
  font-weight: 700;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* visited link */
a:visited {
  color: #226EA6;
  font-weight: 700;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* mouse over link */
a:hover {
  color: #2B8AD0;
  font-weight: 700;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: help;
}

/* selected link */
a:active {
  color: #2B8AD0;
  font-weight: 700;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: help;
} 

/* navbar shit */
nav{
  z-index: 99;
  /* background-color: yellow; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.navlink{
  display: block;
  width: 100px;
  padding: 10pt;
  margin: 8px 5px 8px;
  text-align: center;
}
/* end of navbar shit */

/* petz display from lacey's site */
.infoflex {
display: flex; /*this is what tells the divs to sit next to each other*/
flex-wrap: wrap; /*this will make the divs wrap to the next line automatically when they reach the end, instead of stretching your page or container*/
gap: 1rem; /*the amount of space you want between the divs, a "rem" is about 16px wide, but you can also use px here instead of rem if you prefer*/
margin: 0 auto; /*this centers your content*/
max-width:max-content;
}

/******** option 3: images with backgrounds plus info seperately/below bg *********/

.fulldiv3 {
align-self: baseline;
min-width: 150px;
width: min-content;
}

.imgdiv-female { /*you can replace 'testbgimg.png' with your own bg image*/ 
background:url(/thing/cloudbg.png) no-repeat center;
min-width: 150px; /* make this the width of your bg image */
text-align: center;
}

.imgdiv-male { /*you can replace 'testbgimg.png' with your own bg image*/ 
background:url(/thing/cloudbg.png) no-repeat center;
min-width: 150px; /* make this the width of your bg image */
text-align: center;
}

.infodiv {
text-align: center;
margin-top: -15pt;
} 

.name {
  font-weight: 800;
  letter-spacing: 2pt;
  font-size: 15pt;
}
/* end of petz display stuff */