/* Background pattern from Subtle Patterns */

@font-face {
	font-family:  MisterTtocSHandwritingFont2019;
	src:  url("fonts/MisterTtocSHandwritingFont2019.ttf");
}

@font-face {
	font-family:  MisterTtocSHandwritingFontThick;
	src:  url("fonts/MisterTtocSHandwritingFontThick.ttf");
}

body {
	align-items:  center;
	margin:  0;
}

h1, h2, h3, h4, h5, h6 {
  font-family:  MisterTtocSHandwritingFont2019;
  padding:  5px;
  margin:  5px;
}

p, a {
	font-family:   MisterTtocSHandwritingFont2019;
}

#wrapper {
	width:   100%;
}

header {
	text-align:   center;
}

h1 {
	font-size:   100px;
}

h2 {
	font-size:  80px;
}

h3 {
	font-size:  60px;
}

h4 {
	font-size:  40px;
}

h5 {
	font-size:  20px;
}

main {
	text-align:   center;
	width:  100%;
}

main p {
	font-size:  30px;
}

#pjkimg {
	width:  350px;
}

/*@media (max-width: 700px) {
	a {
		font-size:  40px;
		margin:  5px;
	}

	main p {
		font-size:  40px;
	}

	#pjkimg {
		width:  450px;
	}
}*/

@media (max-width:  700px) {
	h1 {
		font-size:  70px;
	}
}

@media (max-width:  480px) {
	h1 {
		font-size:  50px;
	}

	.website-links {
		display:  grid;
		grid-template-columns: auto;
	}
}

a {
	color:   red;
	text-decoration:   none;
	/*transition:  font-size 2s;*/
}

a:visited {
	color:   red;
}

a:hover {
	color:   lightpink;
}

.website-links {
	display:  inline;
	margin:  0;
	padding:  3px;
	list-style-type:  none;
	position: relative;
}

.website-links a {
	margin:  3px;
	padding:  3px;
	border-radius:  5px;
	background-color:  red;
	color:  white;
}

/*.website-links a {
	transition:  background-color 0.5s;
	transition:  font-size 2s;
}*/

.website-links a:hover {
	background-color:  pink;
}

@media (max-width:  700px) {
	h1 {
		font-size:  70px;
	}

	.website-links {
		margin: auto;
	}

	.website-links {
		display:  grid;
		grid-template-columns: auto;
		width:  40%;
	}
}

@media (max-width:  480px) {
	h1 {
		font-size:  50px;
	}
}