img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width:160px;
  image-rendering: pixelated;
}

h1 {
 font-size: 5rem;
 align-self: auto;
 margin: 2.5rem 0;
}

@media only screen and (max-width: 980px) {

  h1 {
    font-size: 8vw;
  }
} 

@media only screen and (max-width: 600px) {

  h1 {
    font-size: 9vw;
  }
  img {
    width:112px;
  }
} 

h1 { /*Used for header text*/
  /*Structure*/

  line-height:1.2;
  /*Style*/
    font-family: "Sniglet", "Comic Sans MS", cursive, sans-serif;
  background-color: #ffffff;
  background:
  linear-gradient(#eed0ff 0%, #e1fffeaa 15%, transparent 80%),
  linear-gradient(60deg, rgba(147,208,255,1) 0%, rgba(211,186,248,1) 25%, rgba(255,197,238,1) 50%, rgba(255,226,224,1) 75%, rgba(255,247,202,1) 100%);
  background-blend-mode: hard-light,normal;
 background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-stroke:2px #ffffff;
  filter: drop-shadow(0px 2px 4px rgba(50, 50, 93, 0.25)) drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3));
  }
			
		/* this solidifies the .link button on hover */
a {
text-decoration: none;
transition: color 0.8s;
}

/* solid button with text color change on hover */

.link {
text-align: center;
color: #000;
font-weight: bold;
background: #fff;
padding: 20px;
width: 300px;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 999px; /*this is a hack to make a pill shape*/
box-shadow: rgba(8, 49, 112, 0.24) 0px 2px 8px 0px;

}
		/* this changes the text from black to grey for .link3 on hover */
		
a.link:hover {
color: #999;
background: #fff;
}

.links {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 16px;
}

.links-subtitle {
  font-size: .83em;
}